使用微信小程序实现微信扫码登录流程

背景

1. 微信公众号的扫码登录流程需要企业认证才可以完成。
2. 当前项目需要保证微信小程序与web端的信息一致性，保留用户原有的信息，所以需要借助微信小程序的openid还绑定用户信息。

实现流程及思路

获取小程序二维码：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/qr-code/getUnlimitedQRCode.html

1. PC端获取小程序的登录二维码 跟唯一字符的 scene

   • 通过scene传递唯一参数，作为生成二维码的参数

   • 通过page指定扫码之后进入的页面 比如： "/pages/webAuth/login" 登录页面

   • 生成二维码，比如以下二维码：

2. 获取到二维码时，通过轮询（每10秒请求一次）根据scene获取扫码状态 轮询

   • 如果用户扫码登录成功就返回token，停止轮询

   • 没有获取到token则继续轮询

3. 通过微信扫码获取到二维码中的scene参数

   • 微信扫码进入小程序登录页面授权按钮

4. 在扫码之后onLoad事件的时候发送登录请求携带 code 和 scene 标识用户

Page({
  onLoad (query) {
    // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
    const scene = decodeURIComponent(query.scene)
    // 获取微信小程序标识
    wx.login({
      success({code}){
        // 调用登录接口
        this.$httpApi.login({
          code,  // 服务端通过code获取openid
          scene,
        })
      }
    })

  }
})

5. 服务端在通过openid 获取到用户信息，再将用户信息生成一个token 根据scene 存储在redis中

6. 通过步骤二的过程就可以根据scene 的值 就可以获取到根据openid 生成的token

流程图

几个关键点：

1. Web端如何监听用户已经进行了扫码操作

   • 前端可以通过轮询的方式，监听服务端的数据，判断用户是否扫码或者登录

   • 也可以通过WebSocket，服务端通过双工通信向客户端推送信息

2. 如何区分不同的用户（不同的用户扫不同的码）

   • 确定用户身份主要是通过scene判断用户身份，Web端调用接口请求的时候会携带scene

   • 用户扫码进入小程序，点击授权登录按钮时会携带scene发送到服务端

   • 服务端跟Web端通过scene区分不同的二维码，并且返回准确的用户信息