微信网页授权登录实践总结

前两年做过一些微信公众号相关的开发。最近这两年自从微信小程序问世之后,公众号开发慢慢的淡出了视野。这段时间做了一个活动页,用到了微信网页授权登录的相关接口,坑点还是蛮多的,正好整理总结一下如何通过微信网页授权获取用户的基本信息。

注册微信公众平台/测试号

首先我们需要注册登录微信公众平台,如果手头上没有微信公众号可以试试 微信公众平台接口测试帐号。接口测试号具备公众平台的全部接口的。正式账户拥有的所有高级功能,在测试号中也是全部都有的,这点不用担心。

配置微信公众平台/测试号

如果是做微信网页授权登录,需要配置两个域名回调。第一个是 JS接口安全域名 第二个是 授权回调页面域名。这两个域名都必须是公网上可以访问的域名地址,并且不可以加端口号。比如我的域名是 https://wwww.baidu.com ,那么需要在这两个地方填入 www.baidu.com 。协议头 http:// https:// 不要填进去。

获取用户授权

用户在访问前端页面时,前端需要发起一个请求 https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的APPID&redirect_uri=用户确认授权之后重定向的页面&response_type=code&scope=SCOPE&state=一些自定义参数#wechat_redirect
用户同意授权之后微信会做一次重定向,重定向的地址就是我们填写的 redirect_uri。同时会带上一个 code 参数,比如:https://www.xxx.com/login?code=001jPCah2IHlBB0vBGah2Tcwah2jPCad





服务端获取授权数据

前端在重定向之后通过 window.location.search 获取到 URL 中的 code 参数并且将 code 的值发送给后端。需要注意的是 code 是一次性的,仅能使用一次。后端接拿到 code 之后发送请求去交换用户的 access token 注意这里的 access token 不是微信公众号的 access token

1
2
3
4
5
6
7
8
$ curl https://api.weixin.qq.com/sns/oauth2/access_token?grant_type=authorization_code?appid=你的APPID&secret=你的SECRET
{
"access_token": "24_C_G4z0dJmKmdr_aXy-YnBNOSRBEMZzgSi8eDQ203McjmAbnBuhkq1Y-EI_rFIiYU-GMRM-lHDeIdDTCBZVed4VstZJsXaVoWbV0pwMsz0ZE",
"expires_in": 7200,
"refresh_token": "24_FXWHriQzFUzQ7IsJXNgCEycLJEex_m4EwLODafl54Awzm368bcn8c3IP0z9BOVCMqzyr8BK3GdELm0IGmPleqieQc0eKzQQyhIG5UJ1rMvA",
"openid": "oHelauDl2s4jED3RdkWgAKNkp8g8",
"scope": "snsapi_userinfo"
}

通过获取到的 access token 去获取用户的信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
https://api.weixin.qq.com/sns/userinfo?lang=zh_CN\
&access_token=24_C_G4z0dJmKmdr_aXy-YnBNOSRBEMZzgSi8eDQ203McjmAbnBuhkq1Y-EI_rFIiYU-GMRM-lHDeIdDTCBZVed4VstZJsXaVoWbV0pwMsz0ZE\
&openid=oHelauDl2s4jED3RdkWgAKNkp8g8
{
"openid": "oHelauDl2s4jED3RdkWxxKNkp8g8",
"nickname": "xxx",
"sex": 1,
"language": "zh_CN",
"city": "浦东新区",
"province": "上海",
"country": "中国",
"headimgurl": "http://thirdwx.qlogo.cn/mmopen/vi_32/ucdjsK0uwmb55dIB27H9FcSh6icHvXBVVH0jyvTALlFI2WXHtFic2MOb7jE5C70KibWZ9WicsGNqsmFTkFbaaKoI9Q/132",
"privilege": [

]
}