¶ 概述

随着移动互联网的普及，手机已经成为人们生活中的必需品，通过手机扫描二维码完成认证的方式变得越来越常见。越来越多的移动应用集成了扫描二维码登录 PC 端网站应用的功能，这对于用户来说是一种既方便又安全的体验。借助 Authing 提供的扫码登录能力，可以帮助快速、安全地实现此功能。

要实现使用自建移动应用扫码登录网站应用，大致可以分为以下几步：

1. 在 Web 端生成二维码并开始轮询最新扫码状态。
2. 在移动 APP 中用户扫码，同意授权用户信息。
3. Web 端接收到扫码用户的用户信息，登录成功。

¶ 第一步：Web 端生成二维码并轮询扫码状态

在 Web 端，我们推荐使用 Authing 提供的 JavaScript SDK，其提供了一键生成二维码、轮询最新状态、获取用户信息之后进行回调的接口，开发者只需要指定 onSuccess 回调函数即可：

import { AuthenticationClient } from "authing-js-sdk"
const authenticationClient = new AuthenticationClient({
   appId: "AUTHING_APP_ID",
   appHost: 'https://xxx.authing.cn',
})

authenticationClient.qrcode.startScanning("qrcode", {
 onSuccess: (userInfo, ticket) => {
   console.log(userInfo, ticket)
 },
 onError: (message) => onFail && onFail(`${message}`),
});

运行后将自动生成用于 APP 扫码登录的二维码：

扫码成功之后，Authing 将会回调开发者传入的 onSuccess 函数，回调的参数中包含 userInfo 和 ticket，ticket 可以用来换取用户信息。

如果你想自定义 UI 或者想要有更强的自定义化能力，可以查看完整的 API 列表 或者使用其他的 SDK 方法。

¶ 第二步：移动 APP 扫码授权用户信息

Web 端生成的二维码中包含的原始信息为一串字符串，转换为 JSON 后如下：

{
    "scene": "APP_AUTH",
    "random": "5e05f0c57fde537d950f7da5",
    "userPoolId": "5e04ae0d5f3cee22fb37612b",
    "createdAt": "2019-12-27T11:53:41.260Z",
    "expireAt": "2019-12-27T11:55:41.260Z",
    "customData": { "hello": "world" }
}

字段含义如下：

要实现 APP 扫描登录 Web 端，首先要求 APP 端用户处于登录状态（这是理所当然的），调用相关接口的时候要带上终端用户的 token。移动端一共需要用到三个接口：

• 确认扫码
• 同意授权
• 取消授权

以上三个接口移动端 Android Guard SDK 和 iOS Guard SDK 提供了对应的 API：

• Android ：请先确保移动应用已依赖并初始化 Android Guard SDK (opens new window)，然后在扫码认证流程中使用扫码认证 API (opens new window)。

• iOS：请先确保移动应用已依赖并初始化 IOS Guard SDK (opens new window)，然后在扫码认证流程中使用扫码认证 API (opens new window)。

移动端确认扫码之后，Web 将会看到相关提示。

移动端同意授权之后，整个登录流程也就完成了，开发者可以使用 ticket 去换取用户信息了。

const authenticationClient = new AuthenticationClient({
   appId: "AUTHING_APP_ID",
   appHost: 'https://xxx.authing.cn',
})
const user = await authenticationClient.qrcode.exchangeUserInfo('TICKET')

¶ 第三步：登录成功

获取到用户信息之后，你可以得到用户的身份凭证（用户信息的 token 字段），你可以在客户端后续发送给后端服务器的请求中携带上此 token, 以 axios 为例：

const axios = require("axios");
axios
  .get({
    url: "https://yourdomain.com/api/v1/your/resources",
    headers: {
      Authorization: "Bearer ID_TOKEN",
    },
  })
  .then((res) => {
    // custom codes
  });

在后端接口中需要检验此 token 的合法性，来验证用户的身份，验证方式详情请见验证用户身份凭证（token）。识别用户身份之后，你可能还需要对该用户进行权限管理，以判断用户是否对此 API 具备操作权限。