Technical Implementation of QR Code Login: Principles and Case Studies of Taobao and WeChat

1. Introduction

QR code login first appeared on WeChat's PC client. Although it forces users to scan a code to log in, the feature is considered cool and has become a standard expectation for many IM products.

Developers of IM products often receive the demand: "Why does WeChat have QR login while our product does not?" This article aims to demystify the technology and guide developers to implement it themselves.

2. Basic Technical Principles

2.1 What is QR Code Login?

Most users have apps like WeChat, QQ, or Taobao on their phones, each with a corresponding web version. QR code login allows users to log into the web version by scanning a QR code with their mobile app, providing a convenient and secure authentication method.

Typical UI screenshots from major platforms are shown below:

The QR code appears on the web page, and the system must determine which device scanned it and complete the login.

2.2 Complete Technical Logic

1) Interaction between web page and server:

When a user opens the login page, the browser requests a QR code. The server generates a UUID, stores it in Redis as a key with an expiration time, and returns the QR image together with the UUID.

The browser displays the QR code and polls the server every second, sending the UUID to check whether the login succeeded.

The user’s ID is not stored on the web server; it is stored by the mobile server after the mobile device scans the code.

2) Interaction between mobile app and server:

The mobile app scans the QR code, obtains the UUID and a verification string, and sends a login request to the mobile server, including the user’s token (which contains the userId).

The mobile server validates the token, then stores the userId in Redis with the UUID as the key.

3) Login success logic:

When the web server receives a poll request, it finds the userId associated with the UUID, generates a session token for the browser, and returns it, completing the login.

4) Summary diagram:

3. Taobao QR Login Implementation

Taobao’s login page (https://login.taobao.com/member/login.jhtml) returns the following parameters:

Polling request example:

https://qrlogin.taobao.com/qrcodelogin/qrcodeLoginCheck.do?lgToken=2c3b4d53ef0513787bf4ce711ea5ba53&defaulturl=&_ksTS=1540106757739_2804&callback=jsonp2805

If the QR code is not scanned, the response is empty; if scanned, the response contains JSON indicating success:

{
  "code": "10001",
  "message": "mobile scan QRCode success",
  "success": true
}

When the user confirms login, Taobao returns a URL with a token, indicating successful authentication.

4. WeChat QR Login Implementation

4.1 Technical Flow Diagram

4.2 Actual Code Logic

1) Obtain UUID and QR image:

// 获取uuid
getUUID: function() {
    var e = t.defer();
    return window.QRLogin = {},
    $.ajax({
        url: i.API_jsLogin,
        dataType: "script"
    }).done(function() {
        200 == window.QRLogin.code ? e.resolve(window.QRLogin.uuid) : e.reject(window.QRLogin.code)
    }).fail(function() { e.reject() }),
    e.promise
}

2) Browser polls server for scan status:

// 查看扫码状态
checkLogin: function(e, a) {
    var n = t.defer(), a = a || 0;
    window.code = 0,
    window.checkLoginPromise = $.ajax({
        url: i.API_login + "?loginicon=true&uuid=" + e + "&tip=" + a + "&r=" + ~new Date,
        dataType: "script",
        timeout: 35000
    }).done(function() {
        // handle response codes 200, 201, 408, etc.
    }).fail(function() { n.reject() }),
    n.promise
}

3) Handle server response codes:

408 – QR code timeout (continue polling).

400 – QR code expired after ~5 minutes.

201 – QR code scanned, waiting for user confirmation.

200 – User confirmed, token returned, stop polling.

Sample handling code:

function o(c) {
    switch(c.code) {
        case 200:
            // process successful login, extract redirect_uri, tokens, etc.
            break;
        case 201:
            // mark as scanned, continue polling
            break;
        case 408:
            // timeout, continue polling
            break;
        case 400:
        case 500:
        case 0:
            // refresh or abort
            break;
        case 202:
            // other states
            break;
    }
    e.code = c.code;
    e.userAvatar = c.userAvatar;
}

4.3 Summary

WeChat’s web QR login uses JSONP for cross‑origin polling and employs server‑side long‑polling to reduce unnecessary requests.

5. Article Summary

QR code login is now common across many web and mobile services, not limited to IM applications. The principles described here apply broadly, and the same logic works for native desktop clients as well.

Understanding the underlying web real‑time communication techniques such as long‑polling can further help developers optimize the login flow.