小程序扫码登录网页实践

本文首发于公众号：符合预期的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网页的大致流程就是这样了。我也通过这个方案，完成了自己网站的登陆逻辑。

coypan.info/chat

欢迎交流。