一、总体流程
-
公司注册微信开放平台账号,并认证开发者资质(需要300块,只用交一次);
-
创建网站应用,获取AppID和AppSecret;
-
前端在登录页嵌入微信二维码,并将扫码成功后重定向携带的code传给后端;
-
后端调用微信接口,先获取access_token,再获取用户信息(包含昵称、头像、UnionID);
-
判断扫码用户是否关联网站账号(UnionID + 手机号 + 网站账号,三者关联);
-
没有关联就是首次登录,需要绑定手机号并发送短信验证码(证明手机号真实性)。
graph LR
微信扫码 --> 获取微信用户信息 --> 允许 -- 首次 --> 输入手机号绑定 --> 发送短信验证码 --> 进入首页
二、前端代码
js
<div id="wxqrcode-container"></div>;
if (WxLogin) {
const origin = location.origin;
// 重复调用可以刷新二维码
new WxLogin({
self_redirect: false, // 不改
id: 'wxqrcode-container', // 二维码容器的id
appid: APP_ID, // 网站应用的AppID
scope: 'snsapi_login', // 不改
redirect_uri: encodeURI(`${origin}/login`), // 重定向地址,通常是登录页地址(注意域名必须和网站应用的授权回调域名一致)
state: '', // 重定向要带的参数,可以防止csrf攻击(加载二维码前从后端拿state值,扫码后再将state和code一起传回后端,后端验证state是否相同)
style: 'black', // 文字颜色,只有黑白
href: `${origin}/wxqrcode.css`, // 二维码的样式文件
});
}
const code = location.search.split('code')?.[1]?.slice(1);
if (code) {
// TODO: 将code传给后端
}
三、微信不同应用间的信息互通
网站既有pc站点也有对应的小程序,那在小程序登录后,pc还需要重新绑定手机号吗?
不需要。利用UnionID机制就能实现用户信息互通,因为只要是同一个微信开放平台账号下的移动应用、网站应用、公众号、小程序,用户的UnionID是唯一的(即同一用户,对同一个微信开放平台下的不同应用,UnionID是相同的)。
网站应用最后获取的用户信息包含UnionID;小程序通过wx.login获取用户的UnionID。