¶ Overview

With the popularity of mobile Internet, mobile phones have become a necessity in people's lives, and the way to complete authentication by scanning QR codes with mobile phones has become more and more common. More and more mobile applications have integrated the function of scanning QR codes to log in to PC-side website applications, which is a convenient and safe experience for users. With the help of the scanning code login capability provided by GenAuth, this function can be implemented quickly and safely.

To implement the use of self-built mobile applications to scan codes to log in to website applications, it can be roughly divided into the following steps:

1. Generate a QR code on the Web side and start polling the latest scanning status.
2. The user scans the code in the mobile APP and agrees to authorize the user information.
3. The Web side receives the user information of the scanned user and the login is successful.

¶ Step 1: Generate a QR code on the Web and poll the scanning status

On the Web, we recommend using the JavaScript SDK provided by GenAuth, which provides an interface for one-click QR code generation, polling the latest status, and callback after obtaining user information. Developers only need to specify the onSuccess callback function:

import { AuthenticationClient } from "authing-js-sdk";
const authenticationClient = new AuthenticationClient({
  appId: "GEN_AUTH_APP_ID",
  appHost: "https://xxx.genauth.ai",
});

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

After running, a QR code for scanning and logging in to the APP will be automatically generated:

After the code is scanned successfully, GenAuth will call back the onSuccess function passed in by the developer. The callback parameters include userInfo and ticket. ticket can be used to exchange for user information.

If you want to customize the UI or want more customization capabilities, you can check out the full API list or use other SDK methods.

¶ Step 2: Scan the QR code of the mobile APP to authorize user information

The original information contained in the QR code generated by the web end is a string, which is converted to JSON as follows:

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

The meaning of the fields is as follows:

To implement APP scanning login on the Web side, first require the APP user to be logged in (this is natural), and bring the terminal user's token when calling the relevant interface. A total of three interfaces are required on the mobile side:

• Confirm scan code
• Agree to authorization
• Cancel authorization

The above three interfaces are provided by the mobile Android Guard SDK and iOS Guard SDK. Corresponding APIs:

• Android: Please make sure that the mobile application has relied on and initialized the Android Guard SDK (opens new window), and then use the Scan code authentication API (opens new window) in the scan code authentication process.

• iOS: Please make sure that the mobile app has relied on and initialized the IOS Guard SDK (opens new window), and then use the Scan Code Authentication API (opens new window) in the scan code authentication process.

After the mobile terminal confirms the scan code, the web will see relevant prompts.

After the mobile terminal agrees to the authorization, the entire login process is completed, and the developer can use the ticket to exchange for user information.

const authenticationClient = new AuthenticationClient({
  appId: "GEN_AUTH_APP_ID",
  appHost: "https://xxx.genauth.ai",
});
const user = await authenticationClient.qrcode.exchangeUserInfo("TICKET");

¶ Step 3: Login successful

After obtaining the user information, you can get the user's identity credentials (the token field of the user information). You can carry this token in the subsequent request sent by the client to the backend server. Take axios as an example:

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

In the backend interface, you need to check the legitimacy of this token to verify the user's identity. For details on the verification method, please see Verify User Identity Credentials (token). After identifying the user, you may also need to manage permissions for the user to determine whether the user has permission to operate the API.