Implementation Principles of QR Code Login

Requirement Overview

QR code login has become popular because many users already have apps like QQ, Taobao, and Tmall on their phones. Companies that provide these apps also run corresponding websites and want a convenient, secure way for users to log in. By scanning a QR code with their phone, users can log in to the website without typing credentials.

Many readers wonder how a simple QR image on a web page can identify which phone scanned it and complete the login, and how the user information is then displayed.

Principle Explanation

Web Side + Server

When a user opens the login page, the browser sends a request to the server to obtain a login QR code. The server generates a random UUID, stores it as a key in Redis with an expiration time, and combines the UUID with a verification string to create a QR image via a QR‑code generation API. The QR image and UUID are returned to the browser.

The browser displays the QR code and, every second, polls the server with the UUID to check whether the login has succeeded. Although the server only stored the UUID, the user ID will later be inserted by the mobile side.

The user ID is stored in Redis by the mobile server, as described below.

Mobile Side + Server

When the user scans the QR code with their phone, the mobile client obtains a verification string and the same UUID. Because the mobile app is already logged in, the request to the mobile server carries a user token. The mobile server extracts the userId from the token (using the token instead of a raw userId for security) and sends a verification request to its own server, including the verification string and token.

The mobile server validates the verification string and, if correct, returns a confirmation to the phone. After the user confirms the login on the phone, the mobile client sends another request containing the UUID and userId. The server then stores the userId as the value in Redis with the UUID as the key.

Login Success

When the browser polls again, the web server can retrieve the userId from Redis, generate a session token for the browser, and return the user information, completing the login. Storing only the userId (instead of full user data) allows the mobile and web sides to maintain independent user profiles.

Login flow diagram:

PS: If you find this sharing useful, feel free to like and share.

Java Group Leader

Focused on Java practical sharing

Scan the QR code above for more Java content