背景
最近工作原因需要在項目中加入掃碼登陸功能,因為之前沒有接觸過是以對幾個網站主流網站進行了調查。
實作方式
輪詢
調查的全部網站都采用輪詢的方式來實作二維碼登陸,但是具體細節有不同。
以京東為例:
可以看出,在二維碼登陸頁面,網頁會不斷的請求伺服器(輪詢),以擷取是否掃描二維碼.
當完成掃碼後會直接切換狀态,繼續輪詢是否确認登陸:
這樣,在手機點選确認時會直接輪詢會相應并跳轉頁面。
這裡猜測:
- 生成二維碼,二維碼資訊入庫
- 頁面js開啟輪詢,服務端查庫傳回是否登陸
- 手機掃碼app發送請求,服務端修改庫中對應記錄為登陸
- js輪詢,服務端傳回登陸,頁面變為登陸狀态進行後續操作
- 掃碼登陸結束
細微差别
淘寶
淘寶的差別是,一個輪詢周期發送兩天請求,一條用于确認是否掃碼,另一條用于确認是否登陸。
微信網頁版
微信網頁版的實作邏輯相對更獨特。
雖然都是輪詢,但是微信沒次請求間隔很長(25秒),但是在一次請求後服務端不會馬上傳回相應。
調查後猜測:
微信服務端在收到輪詢後不會立即傳回響應,而是在服務端進行循環查庫,可以了解為在服務端進行輪詢。
服務端在25秒内循環參考狀态是否改變,如果改變則直接傳回,否則25秒結束後傳回為掃碼。
網頁端在接到狀态改變後馬上擷取資料,展現給使用者。
否則會繼續發送輪詢請求。
可以看出,微信的做法使用者體驗更好:
- 掃碼後迅速響應,不像其他的需要等待下一次請求才能觸發響應。
- 請求次數大量減少,減輕浏覽器壓力,同時節省使用者流量。
- 缺點是會增加伺服器壓力。
以上。