Authing 文档

# 使用 SDK 接入小程序扫码登录

你可以使用 authing-js-sdk 快速接入小程序扫码登录，详细文档请见：

扫码登录模块

# 安装 authing-js-sdk

使用 npm:

npm install authing-js-sdk

使用 yarn:

yarn add authing-js-sdk

如果你要在 React Native 环境中使用，需要先在 RN 项目根目录运行：npx rn-nodeify --install "crypto,stream"，之后会在项目根目录生成一个 shim.js 文件，然后在 App.js 第一行引入 import './shim.js'。

# 初始化

需要引入 authing-js-sdk 的 AuthenticationClient:

import { AuthenticationClient } from "authing-js-sdk"
const authenticationClient = new AuthenticationClient({
   appId: "YOUR_APP_ID",
})

# 一键开始扫码

你可以使用 authenticationClient.wxqrcode.startScanning(domId, options) 一键在 Web 端生成小程序扫码登录表单：

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

这会在 DOM 节点 qrcode 上生成一个完整的二维码登录表单。

# 完整参数列表

  • domId <string> DOM 元素的 ID。
  • options <Object>
  • options.interval <number> 间隔时间，单位为毫秒，默认为 800 毫秒
  • options.onStart <Function> 开始轮询的事件回调函数, 第一个参数为 setInterval 返回的计时器，可以用 clearInterval 取消此计时器
  • options.onResult <Function> 获取到二维码最新状态事件回调函数，第一个参数为的类型为 QRCodeStatus。
  • options.onScanned <Function> 用户首次扫码事件回调函数。此时用户还没有授权，回调的用户信息中通仅包含昵称和头像，用作展示目的。 出于安全性考虑，默认情况下，userInfo 只会包含昵称（nickname）和头像（photo）两个字段，开发者也可以在后台配置使其返回完整用户信息，
  • options.onSuccess <Function> 用户同意授权事件回调函数。该函数只会回调一次，之后轮询结束。第一个参数为 userInfo 用户信息，第二个参数为 ticket，用于换取用户的详情。 详情见 https://docs.authing.co/scan-qrcode/app-qrcode/customize.html。 ticket 可以用来换取完整的用户信息，相关接口见 https://docs.authing.co/scan-qrcode/app-qrcode/full-api-list.html。
  • options.onCancel <Function> 用户取消授权事件回调函数。该事件只会回调一次，之后轮询结束。
  • options.onError <Function> 获取二维码状态失败事件回调函数。常见原因为网络失败等，每次查询失败时都会回调。回调参数 data 示例如 {"code": 2241,"message": "二维码不存在" }
  • options.onExpired <Function> 二维码失效时被回调，只回调一次，之后轮询结束。
  • options.onCodeShow <Function> 二维码首次成功显示的事件。
  • options.onCodeLoaded <Function> 二维码首次成功 Load 的事件。
  • options.onCodeLoadFailed <Function> 二维码加载失败的事件。
  • options.onCodeDestroyed <Function> 二维码被销毁的事件。
  • options.size <Object> 二维码图片大小，默认为 240 * 240，单位为 px 。
  • options.size.height <number> 高度
  • options.size.width <number> 宽度
  • options.containerSize <Object> DOM 容器大小，默认为 300 * 300，单位为 px 。
  • options.containerSize.height <number> 高度
  • options.containerSize.width <number> 宽度

← 使用 API 接入 →