Implementing QR Code Login for Web Applications Using Redis

With the widespread use of WeChat, many developers need to implement a "QR code login" feature, especially for PC web pages. This tutorial records the process of creating such a feature, from initial research to final deployment.

Principle Analysis

QR code login requires cooperation between the mobile server and the web server and can be divided into several steps.

Step 1: Web page requests a login QR code

The web server receives a request for a login QR code, generates a random UUID as a unique identifier, and stores this UUID as a key in Redis. The corresponding value will be defined later. The key‑value pair must have an expiration time to avoid permanent login states.

The browser receives the QR code information, extracts the UUID, and continuously polls the backend to check whether the login has succeeded. If the backend indicates success, the web page redirects to the logged‑in page; otherwise it keeps polling until the QR code expires.

Step 2: Mobile side stores user ID in Redis

After scanning the QR code with a mobile app, the app sends the UUID together with a token obtained after mobile login to the mobile server.

The mobile server validates the token, and if the user is authenticated, stores a uuid‑userId pair in Redis. This completes the mobile side work.

Step 3: Web side polls for success

The web server repeatedly checks Redis for the existence of the uuid‑userId pair. If the pair exists, it means the mobile side has scanned and logged in, so the web server can retrieve the userId, generate the necessary user information and token, and return them to the web front‑end, completing the login.

Simple Summary

This article documents a basic implementation of QR code login, outlining the overall principle and the three main steps. In real development, additional details such as security considerations need to be addressed.