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

QR‑code login first appeared on WeChat PC, allowing users to scan a QR image with their phone to authenticate on a web page; the article introduces the concept and why product managers request similar features.

Basic technical principle : When a user opens the login page, the browser requests a QR code, the server generates a UUID, stores it in Redis with an expiration, and returns the QR image. The browser polls the server with the UUID to check login status, while the mobile app scans the QR code, obtains the UUID and a verification token, and sends a login confirmation request to its own server. The mobile server validates the token, stores the user ID in Redis keyed by the UUID, and the web server can then retrieve the user ID and issue a session token.

Taobao implementation : The login page at login.taobao.com returns a QR code with a lgToken parameter. The browser repeatedly calls https://qrlogin.taobao.com/qrcodelogin/qrcodeLoginCheck.do with the token. If not scanned, the response indicates waiting; after scanning, the response contains {"code":"10001","message":"mobile scan QRCode success","success":true} . When the user confirms login, the server returns a URL containing a token for final redirection.

WeChat implementation :

1) Obtain a unique UUID and generate a QR code containing the UID.

// getUUID function example
function getUUID() {
    var defer = t.defer();
    window.QRLogin = {};
    $.ajax({
        url: i.API_jsLogin,
        dataType: "script"
    }).done(function(){
        // handle success
    }).fail(function(){
        // handle failure
    });
}

2) Browser polls the server for scan status using a long‑polling JSONP request.

function checkLogin(uuid) {
    return $.ajax({
        url: i.API_login + "?loginicon=true&uuid=" + uuid + "&tip=" + a,
        dataType: "script",
        timeout: 35e3
    }).done(function(){
        // process response
    }).fail(function(){
        // handle error
    });
}

3) Server returns status codes:

408 – scan timeout (continue polling)

400 – QR code expired after ~5 minutes

201 – QR code scanned, user info returned (continue polling)

200 – user confirmed login, token returned (stop polling and redirect)

4) The article provides a detailed switch‑case handling example that parses the JSONP response, extracts fields such as code , userAvatar , SKey , Sid , and performs appropriate actions (redirect, reload, error reporting).

Conclusion : QR‑code login is widely used beyond IM apps, and the same principles apply to web and desktop clients. Understanding long‑polling, Redis‑based state storage, and JSONP cross‑origin techniques is essential for implementing secure and responsive QR‑code authentication.