微信公众号-授权第三方网页登录

前期准备

微信公众号官方文档

首先你得有个公众号，是服务号！！，不是订阅号，订阅号在当前时间节点没有该服务。你还得有个服务器，有了服务器就有了ip,然后拿ip去搞个域名备个案。再次准备你的网页。注意：微信授权第三方网页是拿不到手机号的！！

然后配置网页授权域名,这个就是访问你网页的域名例如：xyz.com （此域名会作为页面的回调域名！）。有些额外注意，域名不能带端口，只能用http的8080，或者https的443 默认端口。

顺便也配置下IP 白名单：例如：192.168.1.2

回调地址

首先页面一起来（大概意思是打开页面的第一屏页面），就要进行域名重定向：

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

其中appid就是你公众号的appid，重定向地址就是你网页的访问域名，要和你公众号配置的网页授权访问域名一致！然后拿域名进行urlEncode编码（百度搜，很多平台），然后将此回调地址放到你的网页第一屏页面组件内

window.location.href = '你的回调地址'

域名重定向后你将会获得一个code.

code 处理

code在地址栏里，这里用react-routerV6为例子

let code = new URLSearchParams(useLocation().search).get("code");

拿到code后，再将code传给后端（肯定是后端写个接口呗）

拿到用户信息（后端）

这一块需要后端干。拿到code后发起请求，拿到access_token

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

再请求

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

就可以拿到用户的一些信息了

{   
  "openid": "OPENID",
  "nickname": NICKNAME,
  "sex": 1,
  "province":"PROVINCE",
  "city":"CITY",
  "country":"COUNTRY",
  "headimgurl":"https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
  "privilege":[ "PRIVILEGE1" "PRIVILEGE2"     ],
  "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}

至此已经可以拿到用户的openId,头像等一些信息了。

获取手机号

只能自己搞一个手机登录的功能了，输入手机号，然后获取验证码，登录，这样就可以拿到手机号，但是...既然都微信授权登录了还要手机号登录，有些人会不耐烦。

---

至此结束，打的比较匆忙，自己花了一天搞出来的，我也希望看的同学少走弯路。省点时间来学习(mo yu）。有错误指出，谢谢。