IM要做手機掃碼登錄？先看看微信的掃碼登錄功能技術(shù)原理

Posted on 2020-03-13 17:15 Jack Jiang 閱讀(370) 評論(0) 編輯收藏

本文原文由作者Amazing10原創(chuàng)發(fā)布于公眾號業(yè)余碼農(nóng)，收錄時有改動，感謝原作者的技術(shù)分享。

1、引言

某天中午，吃完午飯，攤在自己的躺椅上，想趁吃飽喝足的午后時間靜靜享受獨自的靜謐。

干點什么好呢？于是單手操作鼠標(biāo)打開了一個陌生而隱秘的網(wǎng)站。正開著某個視頻起勁。。。

突然瀏覽器彈出了一個提示：

請使用微信掃碼登錄賬號，繼續(xù)觀看

這...

但是由于強烈的好奇驅(qū)使，迫于無奈，只好選擇登錄再繼續(xù)觀看。于是熟練的掏出手機，打開微信掃一掃對準(zhǔn)上面的二維碼，只聽見 “叮” 的一聲，網(wǎng)頁上的二維碼放佛活過來了，直接刷新出了本尊的微信頭像，同時手機上也彈出登錄的提醒。

心中略微驚嘆，但沒來得及多想。忙點擊手機界面中登錄按鈕。此時網(wǎng)頁刷新，恢復(fù)了正常，表示可以繼續(xù)觀看。

上網(wǎng)沖浪的時間總是過得很快，很快就有些疲倦。于是閉上眼睛，腦海中卻浮現(xiàn)出了剛剛微信掃描二維碼，然后登錄網(wǎng)頁的場景，心中再次驚嘆，并開始思考起其中的原理來。。。

言歸正傳，本文將以輕松活潑的語言形式，為你分析和講解微信手機掃碼登錄的技術(shù)原理，希望在你的IM中開發(fā)此功能時有所啟發(fā)。

推薦閱讀：另一篇同類文章《IM的掃碼登錄功能如何實現(xiàn)？一文搞懂主流的掃碼登錄技術(shù)原理》也值得一讀。

學(xué)習(xí)交流：

- 即時通訊/推送技術(shù)開發(fā)交流5群：215477170[推薦]
- 移動端IM開發(fā)入門文章：《新手入門一篇就夠：從零開發(fā)移動端IM》

（本文同步發(fā)布于：http://www.52im.net/thread-2941-1-1.html）

2、IM開發(fā)干貨系列文章

本文是系列文章中的第23篇，總目錄如下：

《IM消息送達保證機制實現(xiàn)(一)：保證在線實時消息的可靠投遞》
《IM消息送達保證機制實現(xiàn)(二)：保證離線消息的可靠投遞》
《如何保證IM實時消息的“時序性”與“一致性”？》
《IM單聊和群聊中的在線狀態(tài)同步應(yīng)該用“推”還是“拉”？》
《IM群聊消息如此復(fù)雜，如何保證不丟不重？》
《一種Android端IM智能心跳算法的設(shè)計與實現(xiàn)探討（含樣例代碼）》
《移動端IM登錄時拉取數(shù)據(jù)如何作到省流量？》
《通俗易懂：基于集群的移動端IM接入層負(fù)載均衡方案分享》
《淺談移動端IM的多點登錄和消息漫游原理》
《IM開發(fā)基礎(chǔ)知識補課(一)：正確理解前置HTTP SSO單點登錄接口的原理》
《IM開發(fā)基礎(chǔ)知識補課(二)：如何設(shè)計大量圖片文件的服務(wù)端存儲架構(gòu)？》
《IM開發(fā)基礎(chǔ)知識補課(三)：快速理解服務(wù)端數(shù)據(jù)庫讀寫分離原理及實踐建議》
《IM開發(fā)基礎(chǔ)知識補課(四)：正確理解HTTP短連接中的Cookie、Session和Token》
《IM群聊消息的已讀回執(zhí)功能該怎么實現(xiàn)？》
《IM群聊消息究竟是存1份(即擴散讀)還是存多份(即擴散寫)？》
《IM開發(fā)基礎(chǔ)知識補課(五)：通俗易懂，正確理解并用好MQ消息隊列》
《一個低成本確保IM消息時序的方法探討》
《IM開發(fā)基礎(chǔ)知識補課(六)：數(shù)據(jù)庫用NoSQL還是SQL？讀這篇就夠了！》
《IM里“附近的人”功能實現(xiàn)原理是什么？如何高效率地實現(xiàn)它？》
《IM開發(fā)基礎(chǔ)知識補課(七)：主流移動端賬號登錄方式的原理及設(shè)計思路》
《IM開發(fā)基礎(chǔ)知識補課(八)：史上最通俗，徹底搞懂字符亂碼問題的本質(zhì)》
《IM的掃碼登功能如何實現(xiàn)？一文搞懂主流應(yīng)用的掃碼登錄技術(shù)原理》
《IM要做手機掃碼登陸？先看看微信的掃碼登錄功能技術(shù)原理》（本文）

3、原理解析

微信掃碼登錄現(xiàn)在在日常生活中已經(jīng)是常見不能再常見的場景之一了，但是要知道微信首次公開這項功能時，卻是驚艷眾人。移動端與PC端以這樣一種巧妙的方式鏈接在了一起，的確是讓人驚嘆。

以下是一個典型的微信掃碼登錄全過程：

本來想在Web版微信上截圖，但掃碼登陸后出現(xiàn)了下面的提示（貌似很多人都碰到過）：

好吧，這很微信，反正就是不想讓你好好用，用戶愛咋咋滴。。。

如上圖所示，操作過程如下：

1）第一步：電腦上打開PC端（出現(xiàn)2維碼）；
2）第二步：拿出手機，掃碼2維碼；
3）第三步：PC端顯示掃碼成功；
4）第四步：手機端“確認(rèn)”登錄；
5）第五步：成功登陸PC端。

上述實際操作過程，用戶體驗相當(dāng)順滑，也難怪剛出來那會，能驚艷到很多人。

那么，對于上述操作過程的技術(shù)實現(xiàn)原理是什么樣的呢？

想起來之前聽過的前后端的概念，知道賬戶的數(shù)據(jù)信息一般都是放在服務(wù)器上，前端負(fù)責(zé)向后端 “討要數(shù)據(jù)” 并顯示，后端則是對前端的 “討要” 做出反應(yīng)。

這樣一來，猜測微信登錄的過程可能就是：

1）網(wǎng)頁前端向微信后臺請求賬號數(shù)據(jù)；
2）微信后臺接受網(wǎng)頁前端的請求，然后將他的賬號數(shù)據(jù)返回；
3）網(wǎng)頁前端接收到了數(shù)據(jù)后，在瀏覽器里進行顯示。

于是，手腳麻利的畫了個示意圖：

當(dāng)我正準(zhǔn)備沾沾自喜的時候，突然看到桌面上的手機。咦，如果就只是這么個過程，那手機的作用是啥。于是才開始意識到，問題沒這么簡單。

好吧，我們城要再深入一點探秘微信掃碼登錄的過程。

4、過程分析

為了更深入的分析整個過程，我們可以去看看微信網(wǎng)頁版，地址是：https://wx.qq.com/。

筆者看著網(wǎng)頁中碩大的二維碼陷入了沉思——這個二維碼跟手機賬號有沒有什么對應(yīng)關(guān)系呢？如果沒有，那它又是怎么生成的呢？

思考間，于是打開了瀏覽器的開發(fā)者工具。

在網(wǎng)絡(luò)監(jiān)控一覽找到了這幅二維碼，與之對應(yīng)的鏈接是：

https://login.weixin.qq.com/qrcode/gaO8cOQweA==

如下圖所示：

然后習(xí)慣性地，嘗試多次刷新頁面，發(fā)現(xiàn)二維碼不斷發(fā)生變化，鏈接也不斷更改：

https://login.weixin.qq.com/qrcode/AencxgKNFQ==
https://login.weixin.qq.com/qrcode/YcD7f_DxvA==
https://login.weixin.qq.com/qrcode/QblN8lCn2g==

似乎發(fā)現(xiàn)了些東西：二維碼不斷變化，其對應(yīng)的鏈接尾的代碼也相應(yīng)變化，并且是隨機性的變化。

這也就是說，每一次頁面刷新都會隨機且唯一地生成一個二維碼。這或許可以與手機登錄的過程聯(lián)系起來。

似乎開始明白了，于是再次拿起手機，熟練的使用微信掃描了此時的二維碼。

“叮” 的一聲，網(wǎng)頁上的二維碼頓時變成了我?guī)洑獾奈⑿蓬^像。這個時候，我才突然意識到，是掃碼之后網(wǎng)頁才與他的微信賬號建立起了聯(lián)系。

如下圖所示：

也就是說：

1）沒有掃碼之前，頁面上的二維碼只是隨機生成的且與用戶無關(guān)的碼；
2）而當(dāng)用戶掃碼之后，二維碼便與用戶帳號綁定在了一起。

原來手機掃碼的用處是這樣！

此時注意到，手機微信上彈出了『微信登錄確認(rèn)』的提醒。這個時候謹(jǐn)慎地點擊了下方的登錄按鈕。

如下圖所示：

隨著平滑的動畫一閃而過，網(wǎng)頁上已經(jīng)顯示出了我的微信賬號信息，顯示微信賬號已經(jīng)登錄。再一次體驗這個過程，心中開始思索手機微信在登錄過程中所起到的具體作用。

首先需要明白幾個過程：

1）進入網(wǎng)頁登陸界面，隨機生成一個二維碼；
2）通過手機掃描二維碼，將微信賬號與二維碼綁定；
3）在手機微信點擊登錄按鈕，授權(quán)網(wǎng)頁登錄微信賬號；
4）網(wǎng)頁獲得的賬號信息，將數(shù)據(jù)顯示。

5、原理解釋

回顧上述過程，結(jié)合最開始的原理猜測，開始思索整個環(huán)節(jié)，是哪里理解的不對。。。

1）網(wǎng)頁的二維碼到底從何而來？
2）是誰向微信后臺請求了賬號數(shù)據(jù)？

實際上：不同的網(wǎng)站可能都需要通過微信后臺進行數(shù)據(jù)的獲取，那么每一個網(wǎng)站必然也存在它的后臺來給微信后臺發(fā)送請求。

這樣一來，整個過程就能解釋得通了：

1）網(wǎng)站頁面刷新，網(wǎng)頁后臺向微信后臺請求授權(quán)登錄；
2）微信后臺返回登錄所需二維碼；
3）用戶通過手機掃描二維碼，并在手機上授權(quán)登錄后，微信后臺告知網(wǎng)頁后臺已授權(quán)；
4）網(wǎng)頁后臺向微信后臺請求微信賬號數(shù)據(jù)；
5）微信后臺返回賬號數(shù)據(jù)；
6）網(wǎng)頁后臺接收數(shù)據(jù)并通過瀏覽器顯示；

6、技術(shù)剖析

正如上節(jié)所述，想清楚了整個過程后，我們應(yīng)該對整個過程的技術(shù)實現(xiàn)進行進一步的探究。

在微信開發(fā)官方文檔中，我找到了第三方網(wǎng)站應(yīng)用微信登錄開發(fā)指南：

https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

我將整個過程梳理了一遍，畫出了這個圖：

如上圖所示，整個技術(shù)實現(xiàn)如下。

（1）二維碼的獲得：

1）用戶打開網(wǎng)站后，網(wǎng)站后臺根據(jù)微信OAuth2.0協(xié)議向微信開發(fā)平臺請求授權(quán)登錄，并傳遞事先在微信開發(fā)平臺中審核通過的AppID和AppSecrect等參數(shù)；
2）微信開發(fā)平臺對AppID等參數(shù)進行驗證，并向網(wǎng)站后臺返回二維碼；
3）網(wǎng)站后臺將二維碼傳送至網(wǎng)站前端進行顯示。

（2）微信客戶端授權(quán)登錄：

1）用戶使用微信客戶端掃描二維碼并授權(quán)登錄；
2）微信客戶端將二維碼特定的uid與微信賬號綁定，傳送至微信開發(fā)平臺；
3）微信開發(fā)平臺驗證綁定數(shù)據(jù)，調(diào)用網(wǎng)站后臺的回調(diào)接口，發(fā)送授權(quán)臨時票據(jù)code；

（3）網(wǎng)站后臺請求數(shù)據(jù)：

1）網(wǎng)站后臺接收到code，表明微信開發(fā)平臺同意數(shù)據(jù)請求；
2）網(wǎng)站后臺根據(jù)code參數(shù)，再加上AppID和AppSecret請求微信開發(fā)平臺換取access_token；
3）微信開發(fā)平臺驗證參數(shù)，并返回access_token；
4）網(wǎng)站后臺收到access_token后即可進行參數(shù)分析獲得用戶賬號數(shù)據(jù)。

在上述過程中，有幾個參數(shù)值得解釋一下（來源官方文檔）：

1）AppID：應(yīng)用唯一標(biāo)識，在微信開放平臺提交應(yīng)用審核通過后獲得；
2）AppSecret：應(yīng)用密鑰，在微信開放平臺提交應(yīng)用審核通過后獲得；
3）code：授權(quán)臨時票據(jù)，第三方通過code進行獲取access_token的時候需要用到，code的超時時間為10分鐘，一個code只能成功換取一次access_token即失效。code的臨時性和一次性保障了微信授權(quán)登錄的安全性。

整個過程從網(wǎng)站后臺向微信開發(fā)平臺請求授權(quán)登錄開始，最終目的是為了獲得access_token：