天天看點

如何實作掃碼登陸

背景

最近工作原因需要在項目中加入掃碼登陸功能,因為之前沒有接觸過是以對幾個網站主流網站進行了調查。

實作方式

輪詢

調查的全部網站都采用輪詢的方式來實作二維碼登陸,但是具體細節有不同。

以京東為例:

如何實作掃碼登陸

可以看出,在二維碼登陸頁面,網頁會不斷的請求伺服器(輪詢),以擷取是否掃描二維碼.

當完成掃碼後會直接切換狀态,繼續輪詢是否确認登陸:

如何實作掃碼登陸

這樣,在手機點選确認時會直接輪詢會相應并跳轉頁面。

這裡猜測:

  1. 生成二維碼,二維碼資訊入庫
  2. 頁面js開啟輪詢,服務端查庫傳回是否登陸
  3. 手機掃碼app發送請求,服務端修改庫中對應記錄為登陸
  4. js輪詢,服務端傳回登陸,頁面變為登陸狀态進行後續操作
  5. 掃碼登陸結束

細微差别

淘寶

淘寶的差別是,一個輪詢周期發送兩天請求,一條用于确認是否掃碼,另一條用于确認是否登陸。

如何實作掃碼登陸

微信網頁版

微信網頁版的實作邏輯相對更獨特。

如何實作掃碼登陸

雖然都是輪詢,但是微信沒次請求間隔很長(25秒),但是在一次請求後服務端不會馬上傳回相應。

調查後猜測:

微信服務端在收到輪詢後不會立即傳回響應,而是在服務端進行循環查庫,可以了解為在服務端進行輪詢。

服務端在25秒内循環參考狀态是否改變,如果改變則直接傳回,否則25秒結束後傳回為掃碼。

網頁端在接到狀态改變後馬上擷取資料,展現給使用者。

否則會繼續發送輪詢請求。

可以看出,微信的做法使用者體驗更好:

  1. 掃碼後迅速響應,不像其他的需要等待下一次請求才能觸發響應。
  2. 請求次數大量減少,減輕浏覽器壓力,同時節省使用者流量。
  3. 缺點是會增加伺服器壓力。

以上。