本文首发于公众号：符合预期的CoyPan
写在前面
要实现网页的登录功能，可以从零自建账号体系，也可以依托于现有的账号体系，如微信登录等。使用微信扫描二维码完成登录，是当下十分常见的一种交互形式。对于个人开发者来说，想要在web网页中实现微信登录，暂时是做不到的。因为相关的接口，只开放给了企业开发者。如果想要实现扫描二维码登录网页，还可以借助小程序二维码来完成。本文将介绍利用微信小程序二维码来完成web网页登录的方案。
方案整体流程
方案讲解
整个方案以一个临时key为核心，借助了自定义小程序二维码和小程序的登陆功能，实现web网页端的登陆。web端的用户登录账号，实际上是以用户在小程序内的openid为基础的。这样，也实现了web端和小程序端的打通。
web网页
1、请求后台，获取小程序码
2、后台针对每一次登录请求，生成唯一的小程序登录二维码以及临时key
3、在页面上显示登录二维码，同时使用临时key轮询登录状态。
4、用户扫描二维码且在小程序端完成登录后，前端解析轮询结果，即可判断登录成功。
web后台
1、生成小程序二维码
async function generateLoginQrcode() {
const accessToken = await getAccessToken();
const tmpkey = tmpKeyHandler.get();
const res = await axios.request({
url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit? access_token=${accessToken}`,
method: 'post',
responseType: 'arraybuffer',
data: {
page: 'pages/login-page/index',
scene: `tmpkey=${tmpkey}`, // 二维码包含的自定义参数
check_path: false,
}
});
return {
imgData: res.data, // 二维码buffer数据
tmpkey: tmpkey, // 临时key
},
}
2、处理小程序的登陆逻辑：通过小程序传过来的code请求微信后台拿到用户openid等信息。将用户信息和临时key进行绑定。前端轮询时，返回对应的用户信息
这里需要注意的是，如何存储临时key。
如果是单进程跑的后台，直接保存在内存都行。如果是多进程部署，则需要考虑将临时key存储在mysql或者redis了。
微信小程序
1、用户扫描登录二维码进入小程序后，可通过以下代码，解析出二维码中的自定义信息，即临时key
onLoad(query) {
const scene = decodeURIComponent(query.scene);
const params = querystring.parse(scene);
const tmpkey = params["tmpkey"];
}
2、小程序登录
wx.login({
success: res => {
const code = res.code; //小程序登录凭证, 根据此code请求后台接口，换取用户的openid等
wx.request({
url: 'xxxx',
method: "POST",
data: { // 同时传入code和临时key
code,
tmpkey,
},
success: () => {
...
},
}),
},
});
写在后面
利用微信小程序登录web网页的大致流程就是这样了。我也通过这个方案，完成了自己网站的登陆逻辑。
欢迎交流。
