1. 程式人生 > >微信網頁版掃碼登入原理

微信網頁版掃碼登入原理

微信網頁版登入步驟

2.  手機掃描二維碼,網頁出現使用者頭像

3.  手機確認登入

4.  網頁加載出使用者微信介面

手機一掃描二維碼,並且同意登入後,網頁上就能及時知道當前二維碼被掃描,使用者同意後,立馬就能加載出聊天介面,實時性非常高,

問題

那麼網頁是如何知道當前二維碼是被哪個使用者掃描的,是何時掃描的?

問題分析

用google瀏覽器開啟網頁版微信:https://wx.qq.com/,F12開啟開發者工具,選擇Network,F5重新整理頁面,可以看到此網頁一直有一個請求處於等待相應狀態,如下圖:


請求引數如下:

https://login.wx.qq.com/cgi-bin/mmwebwx-bin/login?loginicon=true&

uuid=gcWrz8np0Q==&tip=0&r=-1942477294&_=1513770915130

該請求會一直處於等待相應狀態,除非等到25s左右自動重新請求,或二維碼被掃描,二維碼被掃描的情況下,頁面會加載出使用者頭像,並等待使用者在手機上進行確認登入,確認後就能加載出微信主介面

1、  開啟網頁版微信,會向微信伺服器傳送請求得到一個uuid,使用者生成登入二維碼

2、  頁面用此uuid作為引數傳送請求,檢視該uuid被掃描的情況,如果已經被掃描,則返回掃描者的資訊,如果沒有被掃描,等待一段時間後,繼續檢視,直到請求超時或找到掃描者資訊

3、  使用者用手機掃描二維碼時,就是向伺服器傳送請求,用掃描到的二維碼uuid作為key,生成掃描記錄和授權記錄,方便網頁版使用該uuid查詢掃描記錄

問題總結

實現的關鍵在於一個一直處於等待迴應狀態的請求(ajax長輪詢),該請求保證只要二維碼被掃描,就能實時的獲取到使用者資訊

擴充套件

微信網頁版的聊天也是保持一個ajax長輪詢,如圖