How QR Code Login Works: From Web Page to Mobile Server
This article explains the end‑to‑end implementation of QR‑code login, covering how a web page requests a QR image, how the server stores a UUID in Redis, how a mobile app scans the code and validates the user, and how the browser finally receives a token to complete authentication.
Introduction
QR‑code login lets users authenticate on a website by scanning a code with their mobile app (e.g., QQ, Taobao). The user simply opens the site, sees a QR image, scans it with their phone, and is logged in without typing credentials.
Web Side + Server
When the login page loads, the browser sends a request to the server for a 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 (using any standard QR‑code library). The image and the UUID are returned to the browser.
The browser displays the QR image and starts polling the server every second, sending the UUID to check whether the login has succeeded. The server only has the UUID in Redis at this point, so it cannot yet identify the user.
Mobile Side + Server
The user scans the QR image with their mobile app. The scan yields the verification string and the same UUID. The mobile app sends a request to its own backend, including the user's authentication token. The mobile server extracts the userId from the token (the token is encrypted, preventing tampering) and validates the verification string.
After validation, the mobile server returns a confirmation to the app. The app then sends another request containing the UUID, the verification string, and the user token. The mobile server stores the userId in Redis using the UUID as the key.
Login Success
When the web browser’s next poll reaches the server, the server finds the userId associated with the UUID in Redis. It generates a session token for the web side, returns the user information, and the login is considered successful. Storing only the user ID (instead of full user data) avoids inconsistencies between mobile and web user profiles.
Login Flow Diagram
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Laravel Tech Community
Specializing in Laravel development, we continuously publish fresh content and grow alongside the elegant, stable Laravel framework.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.