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

QR code login originated from WeChat's PC client and has become a popular feature for many web and mobile applications. The article begins with an introduction to the concept and shows typical UI screenshots that users recognize.

It then describes the overall technical logic, starting with the web page requesting a QR code and a UUID from the server, storing the UUID in Redis with an expiration time, and returning the QR image to the browser. The browser polls the server every second, sending the UUID to check the login status.

The server stores user information (userId) in Redis when the mobile side confirms the login. The mobile client scans the QR code, obtains a verification string and the UUID, and sends a login request containing a token that encodes the userId. After verification, the server returns a confirmation to the mobile client, which then prompts the user to confirm the login.

When the user confirms, the server stores the userId in Redis keyed by the UUID. The browser’s next poll receives a token, which it uses to complete the login process.

Technical flow diagram:

Taobao QR Code Login Implementation

The article presents the Taobao login page URL and the GET request used to check the QR code status, highlighting the crucial lgToken parameter. Sample responses for "no scan" and "scan success" are shown as JSON objects.

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

When the mobile side confirms login, the server returns a URL containing the token and other parameters, indicating a successful login.

{
    "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"
}

WeChat QR Code Login Implementation

The WeChat web login flow is illustrated with a diagram and the steps to obtain a unique UUID and generate a QR code.

JavaScript code is used to fetch the UUID and poll the login status:

// 获取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
}

// 查看扫码状态
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: 35e3
    }).done(function() {
        // handle success
    }).fail(function() { n.reject() }),
    n.promise
}

The server returns status codes such as 408 (timeout), 400 (QR code expired), 201 (scanned), and 200 (authorized). Corresponding UI updates and actions are described, with screenshots for each state.

When the user confirms login, the server returns a token and the front‑end stops polling, redirecting to the target page.

Additional JavaScript handling of the various status codes is provided in a detailed code block.

function o(c) {
    switch(c.code) {
        case 200:
            // handle login success
            break;
        case 201:
            // handle scanned
            break;
        case 408:
            // handle timeout
            break;
        case 400:
        case 500:
        case 0:
            // handle errors and refresh
            break;
        case 202:
            // handle other cases
            break;
    }
    e.code = c.code;
    e.userAvatar = c.userAvatar;
    a.log("get code", c.code);
}

The article concludes that QR code login is now common across many web and mobile services, and the principles described apply broadly beyond instant‑messaging applications. It also points readers to resources on JSONP and long‑polling for deeper understanding.