【转】微信公众号怎么授权第三方网页登录

Share

前期准备

微信公众号官方文档

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

【转】微信公众号怎么授权第三方网页登录

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

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

【转】微信公众号怎么授权第三方网页登录

基本配置,比如拿AppID和AppSecret的话,需要去:

【转】微信公众号怎么授权第三方网页登录

如果想调试token返回的信息,可以在公众号后台里面的开发者工具里面做一下。

回调地址

首先页面一起来(大概意思是打开页面的第一屏页面),就要进行域名重定向:

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)。有错误指出,谢谢。

    版权声明:

     本网站的所有文字、图片资料,【未注明转载的】均由作者亲自整理创作,任何媒体、网站或个人未经本人同意和授权不得复制、转载、转贴或以其他方式复制发布/发表,请尊重我的劳动成果,侵权必究,谢谢。