How QR Code Login Works: From Token Generation to Secure Authentication

The Essence of QR Code Login

QR code login is essentially an authentication method that performs two tasks: telling the system who you are and proving your identity.

Identify the user.

Prove the user's identity.

For example, a username/password login tells the system the username and proves identity with the password; a mobile verification code does the same with the phone number and the code.

Understanding QR Codes

Before diving into the login flow, it is useful to understand QR codes. A QR code is similar to a barcode but can store any string, not just numbers. Online tools (e.g., cǎoliào QR code ) can convert strings, URLs, or files into QR codes and also decode them.

System Authentication Mechanism

Modern mobile apps use token‑based authentication. After the first password login, the server issues a token that is stored locally. The token, together with device information, is sent with each API request. The server validates the token by matching the stored device data.

const token = {
  accountId: 'Account ID',
  deviceId: 'Device ID',
  deviceType: 'Device type, e.g., iOS, Android, PC...'
};

The client saves the token locally; each request includes the token and device info. The server retrieves the associated account and device data via the token and grants or denies access accordingly.

General Steps of QR Code Login

Preparation

The PC client requests the server to generate a QR code for login and sends its device info.

The server creates a unique QR code ID and binds it to the PC's device info.

The server returns the QR code ID to the PC.

The PC generates a QR code that encodes this ID.

The PC polls the server periodically to check the QR code status.

Scanning Phase

The user scans the QR code with a logged‑in mobile app, extracting the QR code ID.

The mobile app sends its identity information together with the QR code ID to the server.

The server binds the identity to the QR code ID and returns a temporary token to the mobile app.

The PC, still polling, receives the status change and updates the UI to “scanned”.

The temporary token is a one‑time credential used by the mobile app in the next step to ensure the scan and confirmation originate from the same device.

Confirmation Phase

The mobile app displays a confirmation prompt; the user confirms login, sending the temporary token to the server.

The server generates a permanent login token for the PC based on the bound account and device information.

The PC receives the “confirmed” status and the login token from the server.

The PC uses this token to access protected resources.

If the user cancels, the process aborts; handling such edge cases is left as an exercise.

Summary

QR code login works by combining token‑based authentication with QR code state transitions. The flow consists of preparing a QR code with a unique ID, scanning it to bind the mobile identity, and confirming to issue a login token for the PC.

Key concepts covered:

QR code fundamentals.

Token‑based authentication.

Stateful QR code workflow (waiting, scanned, confirmed).

References:

https://time.geekbang.org/dailylesson/detail/100044032

https://cli.im/