網頁版微信剛推出時,無數人被它的登錄方式驚艷了一下,不需要輸入用戶名密碼,打開手機微信掃一掃,便自動登錄。從原理上講,二維碼只能是一段文本的編碼,如何用它實現快捷登錄的呢?
打開網頁版微信,可以看到如下的頁面:
微信掃碼界面
如果你用我查查、支付寶、新浪微博等軟件掃碼二維碼,你會發現此二維碼解析出來是如下的網址:
接下來詳細介紹一下掃碼登錄具體的每個步驟:
掃碼登錄完整流程
①:用戶 A 訪問微信網頁版,微信服務器為這個會話生成一個全局唯一的 ID,上面的 URL 中 obsbQ-Dzag==
就是這個 ID,此時系統並不知道訪問者是誰。
②:用戶A打開自己的手機微信並掃描這個二維碼,並提示用戶是否確認登錄。
③:手機上的微信是登錄狀態,用戶點擊確認登錄后,手機上的微信客戶端將微信賬號和這個掃描得到的 ID 一起提交到服務器
④:服務器將這個 ID 和用戶 A 的微信號綁定在一起,並通知網頁版微信,這個 ID 對應的微信號為用戶 A,網頁版微信加載用戶 A 的微信信息,至此,掃碼登錄全部流程完成
掃碼登錄看起來神奇,主要是因為微信 APP 掃自家的碼會做一些普通二維碼軟件不會做的額外的操作,那就是將當前已登錄的微信和掃出來的 ID 提交到微信服務器,類似的應用還有掃碼支付、掃碼加公眾號等功能。
掃碼登錄原理
掃碼登錄大概的思路是:微信手機客戶端從網頁二維碼里面得到一些信息,然后發送給網頁微信的服務器,網頁服務器驗證信息並響應。下面,我們借助火狐瀏覽器提供的Firebug工具看看,到底是怎么一回事兒吧!
1.每次打開微信網頁版的時候,都會生成一個含有唯一uid的二維碼,而且每次刷新后都會改變。這樣可以保證一個uid只可以綁定一個賬號和密碼,確定登錄用戶的唯一性。可以通過手機上的UC瀏覽器提供的掃碼功能查看二維碼里面的信息,但並不會自動打開該地址。
我刷新三次,掃描結果如下,其中最后面那串數字就是uid:
通過查看網頁源碼,這個頁面在加載完畢時,已經把很多登錄后才需要的相關資源都預先加載進來了,所以登錄用戶得到確認后展示用戶信息的速度很快。
2.除了返回唯一的uid,實際上打開這個頁面的時候,瀏覽器跟服務器還創建了一個長連接,請求uid的掃描記錄。如果沒有,在特定時長后(目前是27秒左右)會接到狀態碼408(請求超時),表示應該繼續下一次請求;如果接到狀態碼201(服務器創建新資源成功),表示客戶端掃描了該二維碼。
請求超時:返回408
掃碼成功:返回201
長輪詢代碼結構:
3.當用戶使用登錄后的微信掃描二維碼的時候,會將uid和手機微信產生的token進行綁定,並上傳到服務器。這個時候,瀏覽器通過長輪詢查詢到uid掃描記錄,立即得到201響應碼,然后通知服務器,客戶端由此也進入一個新的頁面(就是那個要你點確認的按鈕)。在客戶端點擊確認后,獲得服務器授信的令牌,進行隨后的信息交互過程。
結語
總的來說,微信掃碼登錄核心過程應該是這樣的:瀏覽器獲得一個唯一的、臨時的uid,通過長連接等待客戶端掃描帶有此uid的二維碼后,從長連接中獲得客戶端上報給服務器的帳號信息進行展示。並在客戶端點擊確認后,獲得服務器授信的令牌,進行隨后的信息交互過程。 在超時、網絡斷開、其他設備上登錄后,此前獲得的令牌或丟失、或失效,對授權過程形成有效的安全防護。
整理參考
www.jianshu.com/p/7f072ac61763
justcoding.iteye.com/blog/2213661
推薦去我的博客閱讀更多:
2.Spring MVC、Spring Boot、Spring Cloud 系列教程
3.Maven、Git、Eclipse、Intellij IDEA 系列工具教程
覺得不錯,別忘了點贊+轉發哦!