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

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

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

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

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

如果是做微信网页授权登录，需要配置两个域名回调。第一个是 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。

$ 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 去获取用户的信息

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": [

  ]
}