How QR Code Login Works Behind the Scenes: WeChat, Taobao, and Implementation Details

1. Introduction

QR code login originated from WeChat's PC client and has become a popular authentication method for many IM products and web services. The article aims to explain the underlying technology and demonstrate implementations using Taobao and WeChat as examples.

2. Basic Technical Principles

2.1 What Is QR Code Login?

Users scan a QR code displayed on a web page with a mobile app (WeChat, QQ, Taobao, etc.) to log in without typing credentials, improving convenience and security.

2.2 Complete Technical Logic

1) Web‑server and browser interaction:

The browser requests a QR code; the server generates a UUID, stores it as a key in Redis with an expiration time, and returns the QR image and UUID.

The browser polls the server every second, sending the UUID to check login status.

The server only stores the UUID; the actual user ID is stored later by the mobile server.

2) Mobile‑server interaction:

The user scans the QR code, the mobile app obtains a verification string and the same UUID.

The mobile app sends a login verification request (including a user token) to its own server.

The mobile server validates the token, extracts the userId, and returns a confirmation to the mobile client.

After user confirmation, the mobile server stores userId in Redis with the UUID as the key.

3) Login success flow:

The browser polls again, receives the userId, generates a browser‑side token, and completes the login.

4) Summary diagram:

3. Taobao QR Code Login Implementation

The login page https://login.taobao.com/member/login.jhtml returns parameters that include an lgToken (the unique page ID). The browser repeatedly polls the endpoint:

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

If the QR code is not scanned, the response indicates no action. When scanned, the server returns JSON such as:

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

After the user confirms login, the server returns a redirect URL containing a token, e.g.:

{
  "code": "10006",
  "success": true,
  "url": "https://login.taobao.com/member/loginByIm.do?uid=cntaobaoxxx&token=ff82fc0d1d395a33d3b38ec5a4981336&time=1530179143250&asker=qrcodelogin&ask_version=1.0.0&defaulturl=https://www.taobao.com&webpas=0b7aed2d43f01825183e4a49c6cae47d1479929926"
}

Long‑polling stops when the QR code expires (about 5 minutes) or after a successful scan.

4. WeChat QR Code Login Implementation

4.1 Process Flowchart

4.2 Detailed Logic

1) Obtain UUID and QR image:

// getUUID
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
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 redirect and response
    }).fail(function() { n.reject() }),
    n.promise;
}

3) Handle server responses:

408 – scan timeout: continue polling.

400 – QR code expired after ~5 minutes.

201 – QR scanned, server returns basic user info; continue polling.

200 – user confirmed login, server returns token; stop polling and redirect.

Code handling these cases:

function o(c) {
    switch(c.code) {
        case 200:
            // process redirect_uri, tokens, etc.
            break;
        case 201:
            // mark as scanned, continue polling
            break;
        case 408:
            // timeout, retry
            break;
        case 400:
        case 500:
        case 0:
            // refresh logic
            break;
        case 202:
            // additional login states
            break;
    }
    e.code = c.code;
    e.userAvatar = c.userAvatar;
    a.log("get code", c.code);
}

4.3 Summary

WeChat's web QR login uses JSONP for cross‑origin polling and employs server‑side blocking to reduce unnecessary front‑end requests.

5. Article Summary

QR code login is now common across IM apps and many web services with mobile components. The principles described apply to both web pages and native desktop clients, with the same core flow of UUID generation, Redis storage, mobile token verification, and browser polling.

Readers unfamiliar with long‑polling or real‑time web communication are encouraged to study related materials on instant messaging technologies.