掃二維碼登入過程

OnlyDawn發表於2019-06-13

近些年來，越來越多的網站支援使用手機 APP 掃二維碼進行登入。傳統的登入方式需要使用者在瀏覽器中輸入賬號密碼，完成輸入之後點選登入按鈕將這些資料傳送到伺服器上，伺服器對這些資料進行驗證並返回特定的狀態碼和 Cookie 等資訊給瀏覽器。掃二維碼登入這種方式不需要使用者輸入賬號密碼，這些資訊儲存在手機 APP 中，並由 APP 傳送到伺服器上。但是這種方式有幾個問題需要解決：

  1. 伺服器不能主動傳送資訊給瀏覽器，那麼要怎麼將伺服器驗證結果的狀態碼讓瀏覽器獲得？
  2. 要怎麼保證瀏覽器的登入資訊和某個賬戶關聯？

開啟微信網頁版 https://wx.qq.com/ 後出現如下的登入二維碼：

20190428132517.png

使用二維碼識別軟體可以得到這個二維碼中包含的字串資訊，這是一個 URL 地址，包含了一個引數 I=AbRKq90dXQ==。

20190428132625.png

再開啟 Chrome 的開發者工具觀察網路請求，注意到瀏覽器在不斷地傳送 https://login.wx.qq.com/cgi-bin/mmwebwx-bin/login?loginicon=true&uuid=AbRKq90dXQ==&tip=0&r=-1945474617&_=1548133675454 這個請求，並且其中的 uuid 引數值和二維碼中的 I 引數一樣。

loginicon: true
uuid: AbRKq90dXQ==
tip: 0
r: -1945474617
_: 1548133675454

透過上面的實踐我們知道，登入二維碼包含了伺服器的 URL 地址，其中也包含了 uuid 引數。當使用者使用手機 APP 掃描二維碼登入之後，傳送使用者名稱、密碼、uuid 等資訊給伺服器，伺服器驗證之後就將 uuid 和該賬戶關聯並儲存到 Session 中。

瀏覽器需要不斷地向伺服器傳送 AJAX 請求，該請求包含了 uuid 引數，當查詢到伺服器已經存在 uuid 和賬戶的關聯資訊之後，就可以知道是某個賬戶掃描了該二維碼登入，伺服器返回 200 成功狀態碼、Cookie 和賬戶資訊等資料，瀏覽器接受到這些資料之後就可以完成登入操作。應該注意到，為了使的瀏覽器能不斷髮送 AJAX 請求，建立的 HTTP 連線需要是長連線。

二維碼除了可以用於 APP 掃碼登入操作之外，還可以用來進行支付寶掃碼付款等，原理其實差不多。

https://xiaozhuanlan.com/topic/3978105462

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章