Authing Docs

# Use the SDK access applet to scan the code to log in

You can use authing-js-sdk to quickly access the applet and scan the code to log in. For detailed documentation, please see:

Scan code login module

# Install authing-js-sdk

Use npm:

npm install authing-js-sdk

Use yarn:

yarn add authing-js-sdk

If you want to use it in the React Native environment, you need to first run in the RN project root directory: npx rn-nodeify --install "crypto,stream", and then a shim.js file will be generated in the project root directory. Then introduce import'./shim.js' in the first line of App.js.

# Initialization

Need to introduce the AuthenticationClient of authing-js-sdk:

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

# One key to start scanning

You can use authenticationClient.wxqrcode.startScanning(domId, options) to generate a small program scan code login form on the Web side with one click:

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

This will generate a complete QR code login form on the DOM node qrcode.

# Complete parameter list

  • domId <string> ID of the DOM element.
  • options <Object>
  • options.interval <number> Interval time, in milliseconds, the default is 800 milliseconds
  • options.onStart <Function> The event callback function to start polling, the first parameter is the timer returned by setInterval, you can use clearInterval to cancel this timer
  • options.onResult <Function> Get the latest status event callback function of the QR code. The type of the first parameter is QRCodeStatus.
  • options.onScanned <Function> The callback function for the user's first scan code event. At this time, the user has not authorized yet, and the callback user information only contains the nickname and avatar for display purposes. For security reasons, by default, userInfo will only contain two fields, nickname and photo. Developers can also configure in the background to return complete user information.
  • options.onSuccess <Function> The user agrees to the authorization event callback function. This function will only call back once, after which the polling ends. The first parameter is userInfo user information, and the second parameter is ticket, which is used in exchange for user details. See https://docs.authing.co/scan-qrcode/app-qrcode/customize.html for details. The ticket can be used to exchange for complete user information, see https://docs.authing.co/scan-qrcode/app-qrcode/full-api-list.html for related interfaces.
  • options.onCancel <Function> The callback function of the user cancel authorization event. This event will only be called back once, after which the polling ends.
  • options.onError <Function> The callback function for the failure to get the QR code status. Common reasons are network failures, etc., and it will call back every time a query fails. Examples of callback parameter data are {"code": 2241,"message": "QR code does not exist"}
  • options.onExpired <Function> will be called back when the QR code is invalid, only once, after which the polling ends.
  • options.onCodeShow <Function> The event when the QR code is successfully displayed for the first time.
  • options.onCodeLoaded <Function> The first successful loading event of the QR code.
  • options.onCodeLoadFailed <Function> The event of QR code loading failure.
  • options.onCodeDestroyed <Function> The event when the QR code is destroyed.
  • options.size <Object> QR code image size, the default is 240 _ 240, the unit is px.
  • options.size.height <number> height
  • options.size.width <number> width
  • options.containerSize <Object> DOM container size, the default is 300 _ 300, and the unit is px.
  • options.containerSize.height <number> height
  • options.containerSize.width <number> width

← Use the API →