How QR Code Login Works: Behind the Scenes of Web and Mobile Authentication

Demand Introduction

First, an introduction to QR code login. Most users have apps like QQ, Taobao, or Tmall on their phones, and the companies behind these apps also run corresponding websites. To make login more convenient and secure, these companies offer a service where users can scan a QR code with their phone to log in.

Principle Explanation

Web Side + Server

When a user opens the website's 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 this key with the company's verification string to generate a QR code image. The QR code image and UUID are returned to the browser.

The browser displays the QR code and repeatedly (e.g., every second) polls the server with the UUID to check whether login has succeeded.

Mobile Side + Server

The user scans the QR code with their phone, obtaining a verification string and the same UUID. Since the mobile app is already logged in, it includes a user token in its request to its own server. The mobile server extracts the userId from the token (for security, the userId is not sent directly). It then sends a verification request to the main server with the token and UUID.

The main server validates the request and returns a confirmation to the mobile app. After the user confirms the login on the phone, the mobile app sends another request; the server stores the userId in Redis with the UUID as the key.

Login Success

When the browser polls the server again, the server can retrieve the userId from Redis using the UUID, generate a session token for the browser, and return the user information, completing the login. Storing the userId instead of full user data ensures consistency between mobile and web user records.

Login flow diagram: