PC 端网页实现微信扫码登录

原创已于 2025-02-11 19:26:43 修改 · 1w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#移动端

于 2020-04-15 16:40:54 首次发布

移动端专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何使用微信网页授权登录功能，包括设置appid、redirect_uri等参数，以及通过二维码扫描授权后，如何处理回调参数code，从而获取用户信息。

微信开发文档：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

实现步骤：

点击按钮，跳转到微信授权页面，会出现一个二维码。
```
//拉取授权页面
let APPID = '网页应用的appid'
let REDIRECT_URI = encodeURIComponent('授权后跳转回的页面')
location.href=`https://open.weixin.qq.com/connect/qrconnect?appid=${APPID }&redirect_uri=${REDIRECT_URI }&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect `
```
appid：是应用的唯一标识。
redirect_uri：授权登录后跳转回的页面，需要在微信开放平台配置授权回调域，用户使用微信帐号登录后，只能回调至该域名下的页面。要使用 encodeURIComponent() 进行编码，不能使用 encodeURI()，因为如果使用的是 hash 模式的话，# 后面的内容会丢失，导致报错：scope 错误或没有 scope 权限。
response_type：填 code 即可。
scope：应用授权作用域，网页应用目前仅填写 snsapi_login 即可。
state：非必填，用于保持请求和回调的状态，授权请求后原样带回给第三方。
用户扫码，会弹出授权弹框，确认授权后，微信会自动跳转到回调地址 redirect_uri，并通过?的形式拼接相关回调参数。

提取出 code 传给后端，后端接口会返回网页授权 access_token 和其他一些用户信息。

//获取url中的search
let search = location.search.slice(1);
let arr = search.split("&");
let result = {};
arr.forEach(function(item){
      let itemArr = item.split('=');
      result[itemArr[0]]=itemArr[1];
})

if(result.code){
	//调用后端接口
	getUserInfo();
}