Authing 文档文档
快速开始
概念
使用指南
开发集成 arrow
  • V2 文档
  • V3 文档
元数据
应用集成
身份自动化
加入 APN
开发集成
多租户(内测版)
控制台文档
多租户控制台
租户控制台
Saas 应用 Demo
快速开始
概念
使用指南
开发集成 arrow
  • V2 文档
  • V3 文档
元数据
应用集成
身份自动化
加入 APN
开发集成
多租户(内测版)
控制台文档
多租户控制台
租户控制台
Saas 应用 Demo
旧版
使用指南
  • 快速开始

  • 对用户进行认证

    • 概述
    • 使用账号密码认证
    • 使用短信验证码认证
    • 使用社会化登录认证
    • 使用扫码登录认证

      • 使用自建 App 扫码登录网站

        • 概述
        • 完整接口列表
        • 自定义配置项
      • 使用小程序扫码登录网站
    • 在小程序中进行认证
    • 手机号一键登录
    • 实现单点登录(SSO)
    • 在移动端实现单点登录
    • 多因素认证
    • 对认证流程进行扩展

    • 对登录框进行个性化配置
  • 对用户进行权限管理

  • 用户自助服务

  • 授权

  • 自适应 MFA

  • 管理用户账号

  • 管理用户目录

  • 同步中心

  • 应用

  • 成为联邦认证身份源

  • 连接外部身份源(IdP)

  • 微信生态全场景能力

  • 迁移用户到 Authing

  • 管理组织机构

  • 安全设置

  • 品牌化

  • 自动化

  • 审计日志

  • 设置

  • Authing 令牌
  • 私有化部署方案

  • 常见问题 FAQ

  1. 使用指南
  2. /
  3. 对用户进行认证
  4. /
  5. 使用扫码登录认证
  6. /
  7. 使用自建 App 扫码登录网站
  8. /
  9. 概述

¶ 概述

更新时间: 2025-02-18 09:00:47
编辑

随着移动互联网的普及,手机已经成为人们生活中的必需品,通过手机扫描二维码完成认证的方式变得越来越常见。越来越多的移动应用集成了扫描二维码登录 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" }
}

字段含义如下:

字段名称字段含义
scene场景值
APP_AUTH 表示 APP 扫码登录
random二维码 ID
移动端根据此 ID 完成确认扫码、同意授权、取消授权(注意:这里的“确认扫码”意思是移动端标记此二维码已经被扫描,但是用户还没有采取同意或取消操作。有关二维码的详细状态,请见完整接口列表页)。
userPoolId用户池 ID
createdAt二维码创建时间
expireAt二维码过期时间
customData用户自定义字段
了解如何添加自定义数据,请见完整接口列表页。

有关如何在 iOS 中扫描并解析二维码的内容,可以查看使用 AVFoundation 读取二维码 (opens new window)。

要实现 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')

在此 获取 AUTHING_APP_ID 和 APP HOST (opens new window)。

¶ 第三步:登录成功

获取到用户信息之后,你可以得到用户的身份凭证(用户信息的 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 具备操作权限。

上一篇: 使用自建 App 扫码登录网站 下一篇: 完整接口列表
  • 第一步:Web 端生成二维码并轮询扫码状态
  • 第二步:移动 APP 扫码授权用户信息
  • 第三步:登录成功

用户身份管理

集成第三方登录
手机号闪验 (opens new window)
通用登录表单组件
自定义认证流程

企业内部管理

单点登录
多因素认证
权限管理

开发者

开发文档
框架集成
博客 (opens new window)
GitHub (opens new window)
社区用户中心 (opens new window)

公司

400 888 2106
sales@authing.cn
北京市朝阳区北辰世纪中心 B 座 16 层(总)
成都市高新区天府五街 200 号 1 号楼 B 区 4 楼 406 室(分)

京ICP备19051205号

beian京公网安备 11010802035968号

© 北京蒸汽记忆科技有限公司