How QR Code Login Works: Inside WeChat and Taobao Implementations

This article explains the technical principles and step‑by‑step implementation of QR‑code login, covering both the web‑client and server sides, with detailed examples from WeChat and Taobao, including request flows, Redis usage, token handling, and JavaScript code snippets.

Programmer DD
Programmer DD
Programmer DD
How QR Code Login Works: Inside WeChat and Taobao Implementations

1. Introduction

QR‑code login first appeared in WeChat's PC client and quickly became a popular way to authenticate users by scanning a QR image with a mobile app, offering a convenient and secure login experience.

2. Basic Technical Principles

2.1 What is QR‑code login?

Most mobile apps such as WeChat, QQ, and Taobao have corresponding web portals. To simplify login on these portals, a QR code is displayed; the user scans it with the mobile app, which then authenticates the session.

2.2 Complete technical flow

1) Web‑client and server coordination

When a user opens the login page, the browser requests a QR code from the server. The server generates a UUID, stores it as a key in Redis with an expiration time, and creates a QR image containing the UUID and a verification string. The QR image and 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.

2) Mobile‑client and server coordination

The user scans the QR code, obtaining the UUID and a verification token. The mobile client, already logged in, includes the user’s token in the request to the server, which validates the token and returns a confirmation.

After the user confirms the login on the mobile device, the server stores the userId in Redis under the same UUID key.

3) Login success handling

When the browser’s next poll reaches the server, the server retrieves the userId from Redis, generates a session token for the web client, and returns it, completing the login.

4) Summary diagram

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

JavaScriptTaobaoWeChatWeb AuthenticationQR Code Login
Programmer DD
Written by

Programmer DD

A tinkering programmer and author of "Spring Cloud Microservices in Action"

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.