微信开放平台
网站应用
扫码登录
- 引入js文件
https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js
- 实例化二维码
var obj = new WxLogin({
self_redirect:false, // 是否在挂载容器内跳转,
id:"login_container", // 挂载二维码容器
appid: "", // appid
scope: "", // 值为'snsapi_login'
redirect_uri: "", // 用户确认授权后重定向url
state: "", // 附加参数，会在重定向url拼接state=xxx
style: "black", // 二维码背景：默认black即白底黑字，white则相反
href: "data:text/css;base64,LmltcG93ZXJCb3h7Zm9udC1zaXplOjA7fS5pbXBvd2VyQm94IC5pbmZvLC5pbXBvd2VyQm94IC50aXRsZXtkaXNwbGF5Om5vbmU7fS5pbXBvd2VyQm94IC5xcmNvZGV7d2lkdGg6MTAwJTttYXJnaW46MDtib3JkZXI6bm9uZTt9" // 自定义二维码样式的css资源url,或者base64格式的css代码
});
- 获取到code传递给后端
用户扫码确认授权，页面重定向到拼接了code的redirect_uri。在重定向页面将url的code传递给后端，后端换取access_token、openid，生成网站应用的登录token返回前端，登录完成；
vue实现
// utils.js
const appid = process.env.VUE_APP_WX_APPID;
export function initWxLoginQrcode(id, redirect_uri) {
const WxLogin = window.WxLogin;
new WxLogin({
id,
appid,
state: true,
scope: 'snsapi_login',
redirect_uri: encodeURIComponent(redirect_uri),
href: 'data:text/css;base64,LmltcG93ZXJCb3h7Zm9udC1zaXplOjA7fS5pbXBvd2VyQm94IC5pbmZvLC5pbXBvd2VyQm94IC50aXRsZXtkaXNwbGF5Om5vbmU7fS5pbXBvd2VyQm94IC5xcmNvZGV7d2lkdGg6MTAwJTttYXJnaW46MDtib3JkZXI6bm9uZTt9'
});
}
// login.vue
mounted() {
const redirectUrl = `${process.env.VUE_APP_LOGIN_REDIRECT_ROOT}/#/login`;
initWxLoginQrcode('img_qrcode_login', redirectUrl);
}
async beforeEnterRouter(){
let code = getQueryParmas("code");
if(code){
let { data } = await this.$http.wxLogin(code);
if(data?.token){
...token处理
}
}
}
注：
这种内嵌二维码扫码登录是重定向到前端页面后再发送code给后端，适用于前后端分离；如果后端允许，可以设置重定向地址设为后端路径，后端直接拿到code处理后返回；
非内嵌方式
页面提供微信登录按钮，绑定click事件请求后端指定接口
后端拼接路径并返回
https://open.weixin.qq.com/connect/qrconnect?appid=xxx&&redirect_uri=xxx&response_type=xxx&scope=snsapi_login
前端将接口返回的url打开为一个新窗口，这个窗口用于展示供用户扫的二维码
用户扫码后并授权后微信会将授权code拼接在后端配置的redirect_uri接口执行重定向，后端使用redirect_uri带过来的code参换取access_token，获取用户微信信息后执行其它业务逻辑；
有些网站使用非内嵌登录后会自动关闭当前重定向的标签页，可以借助onstorage事件 + window.close()实现
