Design of QR Code Login Functionality

Today I will introduce how the QR code login feature is designed.

The QR code login feature is divided into three stages: pending scan, scanned pending confirmation, and confirmed.

Overall flow diagram as shown.

Now let's look at the design principles stage by stage.

1. Pending Scan Stage

First is the pending scan stage, which is the interaction between the PC client and the server.

Each time the user opens a PC login request, the system returns a unique QR code ID and renders it as a QR code for the user.

This QR code ID must be unique; later it will be bound to identity information, and if not unique, accounts could be compromised.

At this point the PC client starts a timer that polls to check whether the QR code has been scanned.

If the mobile side does not scan, the QR code will expire after a period.

The interaction process for this stage is shown in the following diagram.

2. Scanned Pending Confirmation Stage

The second stage is the scanned pending confirmation stage, mainly the interaction between the mobile client and the server.

First the mobile scans the QR code, obtains the QR code ID, and sends the mobile login credential (token) together with the QR code ID to the server.

At this point the phone is already logged in; there is no situation of being not logged in.

After the server receives the request, it associates the token with the QR code ID and generates a temporary token, which is returned to the mobile client; the temporary token is used as a credential for confirming login.

The PC client’s timer detects the QR code status change and updates the PC QR code to "scanned, please confirm on mobile".

Why is a mobile confirmation step needed?

If there were no confirmation, an attacker could intercept the token and impersonate login. Therefore the QR code scan must have a confirmation page for the user to approve login.

After confirmation, a login reminder notification is sent to the user's app or phone, advising to change password if the login was not performed by the user.

The interaction process for this stage is shown in the following diagram.

3. Confirmed

The final stage of QR code login, the user clicks confirm login, and the mobile client uses the temporary token obtained in the previous step to access the server.

After the server validates, it updates the QR code status and generates a formal token for the PC client.

Subsequently the PC client uses this token to access the server.

The interaction process for this stage is shown in the following diagram.

The above is the detailed design of the entire QR code login feature!