这个是个人的微信扫码登陆思路。
结合微信网页授权,一起阅读,效果更佳。
1.网页嵌入一个二维码。
2.扫描二维码之后,向下面这个微信服务器发送一个请求
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
注意:
1.APPID:是开发者的appid,
2.REDIRECT_URI:扫码成功后跳转的页面
3.SCOPE:有两个可选值:snsapi_base 或者 snsapi_userinfo
其中:
(1)snsapi_base:为scope的网页授权,是静默授权的,用户无感知;
(2)snsapi_userinfo:snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。
3.发送上述请求后,微信服务器会返回一个code,然后用code去换取access_token
1.目前情况下,这个code是在前端的,所以需要前端发送一个请求,把code给发送回自己的服务器。
2.服务器接受到这个code之后,向微信服务器发送下面这个请求
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
其中:
APPID:就是开发者的appid
SECRET:就是开发者的app_SECRET
CODE:就是前端传回来的code
4.发送了上述请求后,微信会返回一个JSON,里面包含了用户的access_token,openid
然后发送如下请求:
https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
其中:
ACCESS_TOKEN:微信返回的data里的access_token
OPENID:微信返回的data里的openid
最终这个请求之后,就可以拿到用户的openid,昵称,性别,城市,等等。
小提示⚠️:
怎么URL中?后面的有用的数据呢?
举个🌰:https://editor.csdn.net/md/?code=103976738&Robuta=skljdfkahkdfka
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get(“code”);
console.log(code) //103976738