微信网页受权登陆实践总结

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

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

首先咱们须要注册登陆微信公众平台，若是手头上没有微信公众号能够试试 微信公众平台接口测试账号。接口测试号具有公众平台的所有接口的。正式帐户拥有的全部高级功能，在测试号中也是所有都有的，这点不用担忧。

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

若是是作微信网页受权登陆，须要配置两个域名回调。第一个是 JS接口安全域名 第二个是 受权回调页面域名。这两个域名都必须是公网上能够访问的域名地址，而且不能够加端口号。好比个人域名是 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": [
    
  ]
}
复制代码