调用微信OAuth2.0网页授权接口实现用户信息的绑定

在微信网页开发中,可以通过OAuth2.0网页授权机制,来获取用户基本信息,进而实现自己的业务逻辑。
微信官方文档
关于网页授权回调域名的说明
1、在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头;
2、授权回调域名配置规范为全域名,比如需要网页授权的域名为:www.qq.com,配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com无法进行OAuth2.0鉴权

关于网页授权的两种scope的区别说明
1、以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)
2、以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权会产生一个授权页面,需要用户手动同意,在用户同意后,就可以通过获取用户基本信息的接口获取该用户的基本信息。 如用户的openid,昵称,性别,头像,所在地等。

步骤
具体而言,网页授权流程分为四步:
1、引导用户进入授权页面或打开授权链接同意授权,获取code
2、通过code换取网页授权access_token(与基础支持中的access_token不同)
3、如果需要,开发者可以刷新网页授权access_token,避免过期
4、通过网页授权access_token和openid获取用户基本信息

第一步:用户同意授权,获取code
在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。
参考链接
scope为snsapi_base
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect
scope为snsapi_userinfo
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

尤其需要注意的是redirect_uri这个参数,它代表了授权完成后的回调页面,也就是我们的业务页面,必须以https://开头(官方文档的要求),并且该链接需要经过urlEncode编码

用户同意授权后

如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。会跳转至我们指定的页面,并带上code和state两个参数。根据code值,我们可以获得access_token和openid,再通过access_token和openid,调用获取用户基本信息的接口,就可以获得用户昵称,性别,头像等数据。

第二步:通过code换取网页授权access_token
首先请注意,这里通过code换取的是一个特殊的网页授权access_token,与基础支持中的access_token(该access_token用于调用其他接口)不同。公众号可通过下述接口来获取网页授权access_token。如果网页授权的作用域为snsapi_base,则本步骤中获取到网页授权access_token的同时,也获取到了openid,snsapi_base式的网页授权流程即到此为止。

获取code后,请求以下链接获取access_token:
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

第三步:拉取用户信息(需scope为 snsapi_userinfo)
请求方法
http:GET(请使用https协议)
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
正确时返回的JSON数据包如下:
{ “openid”:" OPENID",
" nickname": NICKNAME,
“sex”:“1”,
“province”:“PROVINCE”
“city”:“CITY”,
“country”:“COUNTRY”,
“headimgurl”: “http://wx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ
4eMsv84eavHiaiceqxibJxCfHe/46”,
“privilege”:[ “PRIVILEGE1” “PRIVILEGE2” ],
“unionid”: “o6_bmasdasdsad6_2sgVt7hMZOPfL”
}
至此我们获取到了用户微信号的完整信息,并可以与业务中的user进行绑定,以进行后续的用户定制和开发。

网页授权获取用户信息完整PHP代码示例

1.首先写一个lib.php封装php的get和post请求等操作

<?php
/**
 * 封装向微信服务器发送http请求的post和get方法
 *
 */


/**
 * 初始化,根据APPID和APPSECRET获取ACCESS_TOKEN
 *
 */
function init(){

    //设置默认时区
    date_default_timezone_set( "Asia/shanghai");

    //APPID
    define("APPID" , "省略");

    //APPSECRET
    define("APPSECRET" , "省略");

    $token_access_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".APPID."&secret=".APPSECRET;

    //获取access_token请求的url地址
    $res = file_get_contents( $token_access_url );

    //将获取的返回json值转换为数组格式
    $arr_result = json_decode($res,true);

    //定义为全局方便使用
    define("ACCESS_TOKEN" , $arr_result['access_token']);

}


/**
 * post方式提交数据
 *
 * @param $url   提交的url地址
 * @param $data  post需要的数据
 * @return object 返回提交后返回的json对象数据
 */
function postMessage( $url , $data){
    $ch = curl_init();
    curl_setopt($ch , CURLOPT_URL , $url );
    curl_setopt($ch , CURLOPT_CUSTOMREQUEST , "POST");
    curl_setopt($ch , CURLOPT_SSL_VERIFYPEER , FALSE);
    curl_setopt($ch , CURLOPT_SSL_VERIFYHOST , FALSE);
    curl_setopt($ch , CURLOPT_USERAGENT , 'Mozilla/5.0 (compatible; MSIE
                                                 5.01 ; Windows NT 5.0)');
    curl_setopt($ch , CURLOPT_FOLLOWLOCATION , 1 );
    curl_setopt($ch , CURLOPT_AUTOREFERER , 1 );
    curl_setopt($ch , CURLOPT_POSTFIELDS , $data );
    curl_setopt($ch , CURLOPT_RETURNTRANSFER , true );

    $info = curl_exec($ch);                               //将执行返回的数据保存到临时变量
    if( curl_errno($ch) ){                                //判断数据在执行过程中是否有错误
        echo 'Errno'.curl_error($ch);

    }

    curl_close($ch);
    return $info ;
}


/**
 * get方式获取数据 , 通过curl
 *
 * @param $url   提交的url地址
 * @return object 返回获取json对象数据
 */
function getCach($url){

    $ch = curl_init();
    curl_setopt($ch , CURLOPT_URL , $url );
    curl_setopt($ch , CURLOPT_HEADER, false);
    curl_setopt($ch , CURLOPT_RETURNTRANSFER , true );
    curl_setopt($ch , CURLOPT_SSL_VERIFYPEER , false);
    curl_setopt($ch , CURLOPT_USERAGENT , 'Mozilla/5.0 (Windows NT 6.1)
                                           AppleWebKit/537.11 ( KHTML , like Geko ) Chrome/23.0.1271.1 Safari/537.11');
    $res = curl_exec($ch);
    $rescode = curl_getinfo($ch , CURLINFO_HTTP_CODE);
    curl_close($ch);
    return $res;

}

/**
 * get方式获取数据
 *
 * @param $url   提交的url地址
 * @return object 返回读取的数据
 */
function getFileGetContent($url){
    $result = file_get_contents($url);
    return $result ;
}

/**
 * 格式输出调试信息
 *
 */
function p($arr){
    var_dump($arr);
}

然后在业务逻辑页面中获取用户的基本信息

<?php
require_once "lib.php";

//APPID
define("APPID" , "省略");

//APPSECRET
define("APPSECRET" , "省略");

if( isset( $_GET['code'])){

    //获取授权页回调过来的code值
	define("CODE",$_GET['code']);

    //请求access_token的url
	$get_access_token_url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=".APPID."&secret=".APPSECRET."&code=".CODE."&grant_type=authorization_code";
	$json_result = getCach($get_access_token_url);
	$arr_result = json_decode($json_result,true);
	define("ACCESS_TOKEN",$arr_result['access_token']);
    define("OPEN_ID",$arr_result['openid']);

    //获取用户基本信息的接口url
	$get_user_info_url = "https://api.weixin.qq.com/sns/userinfo?access_token=".ACCESS_TOKEN."&openid=".OPEN_ID;
	$userinfo_json = getCach($get_user_info_url);
	$userinfo_arr = json_decode($userinfo_json,true);

    //获得用户的openid
	$openid = $userinfo_arr['openid'];
    //获得用户的昵称
	$nickname = $userinfo_arr['nickname'];
    //获得用户的性别
	$sex = $userinfo_arr['sex'];
    //获得用户的头像url
    $imgicon = $userinfo_arr['headimgurl'];

}
?>

也欢迎关注个人公众号,移动开发,音视频,图形图像,大厂内推,不定时更新
在这里插入图片描述

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信OAuth2.0网页授权接口PHP版用法示例,测试前请先申请一个公众号供测试,微信提供测试用的公众账号,此帐号只能添加100个关注者且只有__已关注__的用户才可以进行OAuth2.0受权。   1.开通后将```appID```、```appsecret```、```Token```填入```index/Conf/config.php```中。然后将接口配置信息中的URL改至php服务器,将地址定位到```index.php/Index/wechatInitAuth```进行微信API认证,直到提示"配置成功"。   2.点击‘体验接口权限表--OAuth2.0网页授权(仅关注者才能授权)’中的修改,将授权回调页面域名改为php服务器地址。直到出现‘通过安全监测’。   配置完微信测试号后,在微信中打开```http://项目目录/index.php```(例:```http://121.40.135.90/weixin_auth/index.php```)将会在页面中打印出session中的受权数据,表示测试受权成功。   在AuthAction中的初始化函数```_initialize```中进行了OAuth2.0受权,所有基于AuthAction的控制器都将进行受权过程(除了微信API认证过程wechatInitAuth)。   对于同一用户在受权过期时间内多次打开此控制器的页面,将不会进行多次受权,因为其受权信息记录在session中,以免重复受权,减慢访问速度。受权过期时间在```index/Conf/config.php```中```wx_webauth_expire```设置,建议不要大于微信的过期时间7200秒。注意:   * 微信OAuth2.0受权分为snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息),AuthAction.class.php默认为snsapi_base,而且session中只记录了snsapi_base中的基础数据,如需要snsapi_userinfo请自行修改。   * 具体的实现方法见代码注释。
在Vue项目中使用微信OAuth2.0授权登录,可以通过以下步骤实现: 1. 在微信公众平台或开放平台中申请应用,并获取到appID和appSecret。 2. 在Vue项目中安装wechat-oauth模块,该模块提供了微信OAuth2.0的相关接口。 ``` npm install wechat-oauth ``` 3. 在Vue项目的后端服务器中,编写一个处理微信OAuth2.0授权登录的回调接口,并在该接口调用wechat-oauth模块提供的接口实现用户授权登录。 ``` const OAuth = require('wechat-oauth'); const client = new OAuth(appId, appSecret); // 获取授权地址并重定向到该地址 router.get('/wechat/login', async (ctx, next) => { const redirectUrl = client.getAuthorizeURL( 'http://your-redirect-url', '', 'snsapi_userinfo' ); ctx.redirect(redirectUrl); }); // 处理授权回调 router.get('/wechat/callback', async (ctx, next) => { const code = ctx.query.code; const token = await client.getAccessToken(code); const openid = token.data.openid; const userInfo = await client.getUser(openid); // TODO: 处理用户信息 }); ``` 4. 在Vue项目中,提供一个“使用微信登录”的按钮,点击该按钮时,重定向到后端服务器中的授权接口实现用户授权登录。 ``` <template> <div> <button @click="loginWithWechat">使用微信登录</button> </div> </template> <script> export default { methods: { loginWithWechat() { window.location.href = 'http://your-server/wechat/login'; } } } </script> ``` 需要注意的是,使用微信OAuth2.0授权登录,需要用户在微信客户端中进行操作,因此需要在移动端或微信公众号中使用。同时,需要在微信公众平台或开放平台中配置授权回调地址,并保证该地址可以被访问到。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值