1. 程式人生 > 實用技巧 >微信掃碼登入是如何實現的?

微信掃碼登入是如何實現的?

網頁版微信剛推出時,無數人被它的登入方式驚豔了一下,不需要輸入使用者名稱密碼,開啟手機微信掃一掃,便自動登入。從原理上講,二維碼只能是一段文字的編碼,如何用它實現快捷登入的呢?

開啟網頁版微信,可以看到如下的頁面:

微信掃碼介面

如果你用我查查、支付寶、新浪微博等軟體掃碼二維碼,你會發現此二維碼解析出來是如下的網址:

https://login.weixin.qq.com/l/obsbQ-Dzag==

接下來詳細介紹一下掃碼登入具體的每個步驟:

掃碼登入完整流程

①:使用者 A 訪問微信網頁版,微信伺服器為這個會話生成一個全域性唯一的 ID,上面的 URL 中 obsbQ-Dzag== 就是這個 ID,此時系統並不知道訪問者是誰。

②:使用者A開啟自己的手機微信並掃描這個二維碼,並提示使用者是否確認登入。

③:手機上的微信是登入狀態,使用者點選確認登入後,手機上的微信客戶端將微信賬號和這個掃描得到的 ID 一起提交到伺服器

④:伺服器將這個 ID 和使用者 A 的微訊號繫結在一起,並通知網頁版微信,這個 ID 對應的微訊號為使用者 A,網頁版微信載入使用者 A 的微信資訊,至此,掃碼登入全部流程完成

掃碼登入看起來神奇,主要是因為微信 APP 掃自家的碼會做一些普通二維碼軟體不會做的額外的操作,那就是將當前已登入的微信和掃出來的 ID 提交到微信伺服器,類似的應用還有掃碼支付、掃碼加公眾號等功能。

掃碼登入原理

掃碼登入大概的思路是:微信手機客戶端從網頁二維碼裡面得到一些資訊,然後傳送給網頁微信的伺服器,網頁伺服器驗證資訊並響應。下面,我們藉助火狐瀏覽器提供的Firebug工具看看,到底是怎麼一回事兒吧!

1.每次開啟微信網頁版的時候,都會生成一個含有唯一uid的二維碼,而且每次重新整理後都會改變。這樣可以保證一個uid只可以繫結一個賬號和密碼,確定登入使用者的唯一性。可以通過手機上的UC瀏覽器提供的掃碼功能檢視二維碼裡面的資訊,但並不會自動開啟該地址。

我重新整理三次,掃描結果如下,其中最後面那串數字就是uid:

1) https://login.weixin.qq.com/l/48e24d66bdbc4f
2) https://login.weixin.qq.com/l/0787fb4fa7ad4c
3) https://login.weixin.qq.com/l/92781a4a7f1c47

通過檢視網頁原始碼,這個頁面在載入完畢時,已經把很多登入後才需要的相關資源都預先載入進來了,所以登入使用者得到確認後展示使用者資訊的速度很快。

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

推薦去我的部落格閱讀更多:

1.Java JVM、集合、多執行緒、新特性系列教程

2.Spring MVC、Spring Boot、Spring Cloud 系列教程

3.Maven、Git、Eclipse、Intellij IDEA 系列工具教程

4.Java、後端、架構、阿里巴巴等大廠最新面試題

覺得不錯,別忘了點贊+轉發哦!