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

1. Introduction

QR‑code login originated from WeChat PC and quickly became a popular authentication method for many IM products and web services; developers often need to understand its underlying mechanics to implement similar features.

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 (e.g., WeChat, QQ, Taobao) to log in without typing credentials, improving convenience and security.

2.2 Complete technical logic

1) Browser‑server interaction: The browser requests a QR code, the server generates a UUID, stores it in Redis with an expiration time, and returns the QR image and UUID.

The browser repeatedly polls the server (usually every second) with the UUID to check login status.

2) Mobile‑server interaction: The mobile app scans the QR code, obtains the UUID and a verification string, then sends a login request (including the user’s token) to the mobile‑side server.

The mobile server validates the token, extracts the userId, and stores the mapping {uuid: userId} in Redis.

3) Login success handling: When the browser polls and finds the userId associated with the UUID, it generates a session token for the web side and completes the login.

4) Summary diagram: (image omitted for brevity).

3. Taobao QR‑code Login Implementation

Taobao’s login page returns a lgToken as the unique identifier. The browser polls https://qrlogin.taobao.com/qrcodelogin/qrcodeLoginCheck.do with this token.

If the QR code is not scanned, the response indicates no action; if scanned, a JSONP response such as {"code":10001,"message":"mobile scan QRCode success","success":true} is returned.

When the user confirms login, the server returns a URL containing a token, which the browser uses to complete authentication.

Detailed flow diagram: (image omitted).

4. WeChat QR‑code Login Implementation

4.1 Process flow diagram

(image omitted).

4.2 Actual implementation logic

1) Obtain UUID and QR image:

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

2) Browser polling for scan status:

// checkLogin function
function checkLogin(uuid, tip){
  var defer = t.defer();
  $.ajax({
    url: i.API_login + '?loginicon=true&uuid=' + uuid + '&tip=' + (tip||0) + '&r=' + ~new Date,
    dataType: 'script',
    timeout: 35000
  }).done(function(){
    // handle JSONP response, extract code, redirect_uri, etc.
    defer.resolve(window.code);
  }).fail(function(){ defer.reject(); });
  return defer.promise;
}

3) Handling server‑returned status codes:

function handleStatus(c){
  switch(c.code){
    case 200:
      // login confirmed, redirect to returned URL
      window.location.href = c.redirect_uri;
      break;
    case 201:
      // QR scanned, continue polling
      break;
    case 408:
      // timeout, retry polling
      break;
    case 400:
    case 500:
    case 0:
      // error handling, possibly refresh QR code
      break;
    // other cases omitted for brevity
  }
}

The WeChat web client uses JSONP to bypass cross‑origin restrictions and employs long‑polling with server‑side blocking to reduce unnecessary requests.

4.3 Summary

WeChat’s QR‑code login uses JSONP for cross‑domain polling and server‑side blocking to optimize the polling frequency, while Taobao follows a similar token‑based flow.

5. Article Summary

QR‑code login is now common across many web and mobile services; the principles described apply broadly beyond IM applications. Understanding the interaction between browser, mobile app, and backend (including Redis storage, token exchange, and polling strategies) is essential for implementing secure and efficient QR‑code authentication.