扫码登录实战系列 1: 原理及流程设计

6,448 阅读3分钟

本文是扫码登录实战系列的第一篇,完整目录:

在开始所有内容之前,先看下最终的成果是怎样的。话不多说上代码:

startAppAuthScanning({
  onSuccess(userInfo) {
    localStorage.setItem('token', userInfo.token);
  }
})

我们要通过这五行代码,在 Web 实现一个完整的扫码登录表单!且用户扫码授权之后会回调 onSuccess 函数,从而获取到用户信息。

我们将从原理到接口设计,再到实际编码,最后封装 SDK,实现一个完整且开发者友好的扫码登录模块。完整的代码在这里:github.com/liaochangji…

通过这篇文章文章,你可以学到:

  • 使用 jwt 完成用于登录、认证
  • 了解完整的扫码登录流程
  • 理解扫码登录本质
  • 优秀的封装接口能力 原理及流程设计 首先,我们先尝试用一句话定义一下扫码登录的本质:扫码登录本质上是请求登录方请求已登录方将登录凭证写入特定媒介的过程。这里的请求登录方为 Web 端,已登录方为 APP 端,登录凭证可以是用户信息,也可以是换取用户信息的凭证,而特定媒介是某一张二维码。

具体的扫码登录流程大致如下:

  1. 打开登录页面,展示一个二维码,同时轮询二维码状态(web)
  2. 打开APP扫描该二维码后,APP显示确认、取消按钮(app)
  3. 登录页面展示被扫描的用户头像等信息(web)
  4. 用户在APP上点击确认登录(app)
  5. 登录页面从轮询二维码状态得知用户已确认登录,并获取到登录凭证(web)
  6. 页面登录成功,并进入主应用程序页面(web)

整个过程中,一张特定二维码起到了连接请求登录方和已登录方桥梁的作用。而二维码本质上就是通过某种约定的编码方式将一段文本信息转换为一个能够被解码识别的图片,其本质就是一段文本信息。所以,我们可以将二维码 ID、创建时间、过期时间等信息写入二维码,APP 终端通过解码二维码信息(这是终端媒介具备的基础功能),就能够识别出此二维码。

在 Web 端,一般会有一个请求生成二维码的接口,此接口会返回二维码 ID 和二维码连接,ID 用于查询二维码最新状态,链接用于展示。

这样,Web 端和 APP 端就建立起了一个共识:二维码 ID。APP 端通过授权修改二维码状态,Web 端能通过轮询监听到二维码状态变化,并获取到登录凭证,从而完成登录。

再来详细分解一下,二维码一共具有哪些状态:

  • 未扫描
  • 已扫描,等待用户确认
  • 已扫描,用户同意授权
  • 已扫描,用户取消授权
  • 已过期

APP 可以修改二维码状态,一共会用到三个接口:

  • 确认已扫描
  • 同意授权
  • 取消授权

一旦 Web 端监听到二维码状态变成了同意授权,登录就完成了。 APP 端请求这些接口时,需要带上登录凭证(这是显然的),后端接口能够从此判断同意授权的用户,从而将二维码 ID 和用户 ID 绑定起来。

现在我们应该很清楚该怎么做了,来总结一下需要提供哪些接口:

  • 二维码生成接口
  • 二维码状态查询接口
  • 标记二维码以扫描接口
  • 同意授权接口
  • 取消授权接口

下面开始实际的代码实现部分。