公众号H5授权登录原理
发表时间：2020-10-27
发布人：葵宇科技
浏览次数：29
公众号H5授权登录
在微信公众号里获取微信用户信息分两种方式
注意：以下所有操作，都需要再公众号配置网页授权配置域名授权
1.以snsapi_base为scope发起的网页授权
这种方式是静默获取，对用户来说是无感的，看不到任何变化
使用场景，只能获取到openid，调用微信支付使用，无法获取头像昵称等数据
$wxurl = https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的APPID&redirect_uri={$url}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect
注意参数说明：
appid=你的APPID
{$url}回调的url地址，url需要用urlencode编码
scope=snsapi_base 静默授权类型
使用说明
$wxurl 这个链接地址是固定的拼接方式，微信官网有文档点击我获取
把拿到的这个连接给前端，前端通过让用户触发这个链接，跳转获取微信的code参数，或者自己通过代码触发跳转
微信跳转后得到的链接 https://domain.com/index/index/wxlogin?code=051pYGkl2bQ3S54TUxll2ttJ6Z2pYGk0&state=STATE
后面多了code参数和state参数，如果跳转的是后端，后端直接获取code就可以，如果跳转的是前端， 前端截取url，拿到code传给后端
$wxurl必须在微信里打开才能获取到code，开发调试请使用微信开发者工具,获取结果如下
{"access_token":"38_gUjz8OA3RUbAiGSEB-o68bSAyI8rGVwOXmNepBHXKdcCEiNotFb3e9CTzFTxsFt21PxwXT3l9qUsL3gNBcsg8A","expires_in":7200,"refresh_token":"38_7aZk0NQHhLOO5e3j-uqVl5na48CMvuoedJ90c3lDmby8mOEsBHcsfT4SPtQJTMpMdx8GKFFR7sXFj6Nuu8h21A","openid":"obBHk04gFkeKsRVDowMfXn-LLYpU","scope":"snsapi_base"}
实现截图
实现代码
//后台代码 我用的是tp5
public function wxlogin()
{
$appid = '';
$appsecret = '';
$input = input();
if(!empty($input['code'])){
$url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$appid.'&secret='.$appsecret.'&code='.$input['code'].'&grant_type=authorization_code';
$client = new Client(); //GuzzleHttp\Client 模拟http 请求，如果不会用 直接换成curl函数
$result = $client->get($url)->getBody()->getContents();
echo $result;
//die();
$api_data = json_decode($result, true);
//$api_data 里就是我们要获取的openid
}
$url = urlencode('https://d-fangfei.bigchun.com/index/index/wxlogin');
$this->assign('url', $url);
return $this->view->fetch();
}
前端代码
<p>
<a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的APPID&redirect_uri={$url}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect">
获取静默授权获取code
</a>
</p>2.以snsapi_userinfo为scope发起的网页授权
这种方式是授权获取，会弹出让用户确认获取资料按钮
使用场景，可以获取用户openid，头像，昵称，性别等资料
$wxurl = https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri={$url}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect
注意参数说明：
appid=你的APPID
{$url}回调的url地址，url需要用urlencode编码
scope = snsapi_userinfo
静默授权类型
使用说明
$wxurl 这个链接地址是固定的拼接方式，微信官网有文档点击我获取
把拿到的这个连接给前端，前端通过让用户触发这个链接，跳转获取微信的code参数，或者自己通过代码触发跳转
微信跳转后得到的链接 https://domain.com/index/index/wxlogin?code=051pYGkl2bQ3S54TUxll2ttJ6Z2pYGk0&state=STATE
后面多了code参数和state参数，如果跳转的是后端，后端直接获取code就可以，如果跳转的是前端， 前端截取url，拿到code传给后端
实现过程截图
$wxurl必须在微信里打开才能获取到code，开发调试请使用微信开发者工具,获取结果如下：
{"openid":"obBHk04gFkeKsRVDowMfXn-LLYpU","nickname":"D永涛","sex":1,"language":"zh_CN","city":"深圳","province":"广东","country":"中国","headimgurl":"https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/DYAIOgq83eremdfYmic4MpxiadSdloCicKKNOdMZCIIQdwmiaPluD8NDVxXN5axqc9kmVGxVoFo88UkEy9GPKpicQUw\/132","privilege":[],"unionid":"oKzvn1ZU_Ne_4or8VLwhtZxlJOJU"}
实现截图
1.触发截图
2.拼接上code后得到的结果
实现代码
//后台实现代码
public function wxlogin()
{
$appid = '';
$appsecret = '';
$input = input();
if(!empty($input['code'])){
$url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$appid.'&secret='.$appsecret.'&code='.$input['code'].'&grant_type=authorization_code';//微信接口地址，参考接口文档
$client = new Client(); //GuzzleHttp\Client 模拟http 请求，如果不会用 直接换成curl函数
$result = $client->get($url)->getBody()->getContents();
$api_data = json_decode($result, true);
if(!empty($api_data['openid'])){
$url = 'https://api.weixin.qq.com/sns/userinfo?access_token='.$api_data['access_token'].'&openid='.$api_data['openid'].'&lang=zh_CN';//微信接口地址，参考接口文档
$client = new Client();
$result = $client->get($url)->getBody()->getContents();
$userinfo = json_decode($result, true);
print_r($userinfo);
}
}
$url = urlencode('https://d-fangfei.bigchun.com/index/index/wxlogin');
$this->assign('url', $url);
return $this->view->fetch();
}前端实现代码
<p>
<a href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的APPID&redirect_uri={$url}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect">
微信授权登录
</a>
</p>有问题可以加裙问我，我是群主721200119
