# 使用 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-sdkAuthenticationClient:

import { AuthenticationClient } from "authing-js-sdk"
const authenticationClient = new AuthenticationClient({
   userPoolId: "YOUR_USERPOOL_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> 宽度