IM要作手機掃碼登陸？先看看微信的掃碼登陸功能技術原理
本文原文由做者Amazing10原創發佈於公衆號業餘碼農，收錄時有改動，感謝原做者的技術分享。php
一、引言
某天中午，吃完午餐，攤在本身的躺椅上，想趁吃飽喝足的午後時間靜靜享受獨自的靜謐。html
乾點什麼好呢？因而單手操做鼠標打開了一個陌生而隱祕的網站。正開着某個視頻起勁。。。前端
忽然瀏覽器彈出了一個提示：算法
請使用微信掃碼登陸帳號，繼續觀看數據庫
這...小程序
可是因爲強烈的好奇驅使，迫於無奈，只好選擇登陸再繼續觀看。因而熟練的掏出手機，打開微信掃一掃對準上面的二維碼，只聽見 「叮」 的一聲，網頁上的二維碼放佛活過來了，直接刷新出了本尊的微信頭像，同時手機上也彈出登陸的提醒。後端
心中略微驚歎，但沒來得及多想。忙點擊手機界面中登陸按鈕。此時網頁刷新，恢復了正常，表示能夠繼續觀看。微信小程序
上網衝浪的時間老是過得很快，很快就有些疲倦。因而閉上眼睛，腦海中卻浮現出了剛剛微信掃描二維碼，而後登陸網頁的場景，心中再次驚歎，並開始思考起其中的原理來。。。跨域
言歸正傳，本文將以輕鬆活潑的語言形式，爲你分析和講解微信手機掃碼登陸的技術原理，但願在你的IM中開發此功能時有所啓發。瀏覽器
推薦閱讀：另外一篇同類文章《IM的掃碼登陸功能如何實現？一文搞懂主流的掃碼登陸技術原理》也值得一讀。
學習交流：
- 即時通信/推送技術開發交流5羣：215477170[推薦]
- 移動端IM開發入門文章：《新手入門一篇就夠：從零開發移動端IM》
（本文同步發佈於：http://www.52im.net/thread-2941-1-1.html）
二、IM開發乾貨系列文章
本文是系列文章中的第23篇，總目錄以下：
《IM消息送達保證機制實現(一)：保證在線實時消息的可靠投遞》
《一種Android端IM智能心跳算法的設計與實現探討（含樣例代碼）》
《IM開發基礎知識補課(一)：正確理解前置HTTP SSO單點登陸接口的原理》
《IM開發基礎知識補課(二)：如何設計大量圖片文件的服務端存儲架構？》
《IM開發基礎知識補課(三)：快速理解服務端數據庫讀寫分離原理及實踐建議》
《IM開發基礎知識補課(四)：正確理解HTTP短鏈接中的Cookie、Session和Token》
《IM羣聊消息到底是存1份(即擴散讀)仍是存多份(即擴散寫)？》
《IM開發基礎知識補課(五)：通俗易懂，正確理解並用好MQ消息隊列》
《IM開發基礎知識補課(六)：數據庫用NoSQL仍是SQL？讀這篇就夠了！》
《IM裏「附近的人」功能實現原理是什麼？如何高效率地實現它？》
《IM開發基礎知識補課(七)：主流移動端帳號登陸方式的原理及設計思路》
《IM開發基礎知識補課(八)：史上最通俗，完全搞懂字符亂碼問題的本質》
三、原理解析
微信掃碼登陸如今在平常生活中已是常見不能再常見的場景之一了，可是要知道微信首次公開這項功能時，倒是驚豔衆人。移動端與PC端以這樣一種巧妙的方式連接在了一塊兒，的確是讓人驚歎。
如下是一個典型的微信掃碼登陸全過程：
原本想在Web版微信上截圖，但掃碼登錄後出現了下面的提示（貌似不少人都碰到過）：
好吧，這很微信，反正就是不想讓你好好用，用戶愛咋咋滴。。。
如上圖所示，操做過程以下：
1）第一步：電腦上打開PC端（出現2維碼）；
2）第二步：拿出手機，掃碼2維碼；
3）第三步：PC端顯示掃碼成功；
4）第四步：手機端「確認」登陸；
5）第五步：成功登錄PC端。
上述實際操做過程，用戶體驗至關順滑，也難怪剛出來那會，能驚豔到不少人。
那麼，對於上述操做過程的技術實現原理是什麼樣的呢？
想起來以前聽過的先後端的概念，知道帳戶的數據信息通常都是放在服務器上，前端負責向後端 「討要數據」 並顯示，後端則是對前端的 「討要」 作出反應。
這樣一來，猜想微信登陸的過程可能就是：
1）網頁前端向微信後臺請求帳號數據；
2）微信後臺接受網頁前端的請求，而後將他的帳號數據返回；
3）網頁前端接收到了數據後，在瀏覽器裏進行顯示。
因而，手腳麻利的畫了個示意圖：
當我正準備沾沾自喜的時候，忽然看到桌面上的手機。咦，若是就只是這麼個過程，那手機的做用是啥。因而纔開始意識到，問題沒這麼簡單。
好吧，咱們城要再深刻一點探祕微信掃碼登陸的過程。
四、過程分析
爲了更深刻的分析整個過程，咱們能夠去看看微信網頁版，地址是：https://wx.qq.com/。
筆者看着網頁中碩大的二維碼陷入了沉思——這個二維碼跟手機帳號有沒有什麼對應關係呢？若是沒有，那它又是怎麼生成的呢？
思考間，因而打開了瀏覽器的開發者工具。
在網絡監控一覽找到了這幅二維碼，與之對應的連接是：
https://login.weixin.qq.com/qrcode/gaO8cOQweA==
以下圖所示：
而後習慣性地，嘗試屢次刷新頁面，發現二維碼不斷髮生變化，連接也不斷更改：
https://login.weixin.qq.com/qrcode/AencxgKNFQ==
https://login.weixin.qq.com/qrcode/YcD7f_DxvA==
https://login.weixin.qq.com/qrcode/QblN8lCn2g==
彷佛發現了些東西：二維碼不斷變化，其對應的連接尾的代碼也相應變化，而且是隨機性的變化。
這也就是說，每一次頁面刷新都會隨機且惟一地生成一個二維碼。這或許能夠與手機登陸的過程聯繫起來。
彷佛開始明白了，因而再次拿起手機，熟練的使用微信掃描了此時的二維碼。
「叮」 的一聲，網頁上的二維碼頓時變成了我帥氣的微信頭像。這個時候，我才忽然意識到，是掃碼以後網頁才與他的微信帳號創建起了聯繫。
以下圖所示：
也就是說：
1）沒有掃碼以前，頁面上的二維碼只是隨機生成的且與用戶無關的碼；
2）而當用戶掃碼以後，二維碼便與用戶賬號綁定在了一塊兒。
原來手機掃碼的用處是這樣！
此時注意到，手機微信上彈出了『微信登陸確認』的提醒。這個時候謹慎地點擊了下方的登陸按鈕。
以下圖所示：
隨着平滑的動畫一閃而過，網頁上已經顯示出了個人微信帳號信息，顯示微信帳號已經登陸。再一次體驗這個過程，心中開始思索手機微信在登陸過程當中所起到的具體做用。
首先須要明白幾個過程：
1）進入網頁登錄界面，隨機生成一個二維碼；
2）經過手機掃描二維碼，將微信帳號與二維碼綁定；
3）在手機微信點擊登陸按鈕，受權網頁登陸微信帳號；
4）網頁得到的帳號信息，將數據顯示。
五、原理解釋
回顧上述過程，結合最開始的原理猜想，開始思索整個環節，是哪裏理解的不對。。。
1）網頁的二維碼到底從何而來？
2）是誰向微信後臺請求了帳號數據？
實際上：不一樣的網站可能都須要經過微信後臺進行數據的獲取，那麼每個網站必然也存在它的後臺來給微信後臺發送請求。
這樣一來，整個過程就能解釋得通了：
1）網站頁面刷新，網頁後臺向微信後臺請求受權登陸；
2）微信後臺返回登陸所需二維碼；
3）用戶經過手機掃描二維碼，並在手機上受權登陸後，微信後臺告知網頁後臺已受權；
4）網頁後臺向微信後臺請求微信帳號數據；
5）微信後臺返回帳號數據；
6）網頁後臺接收數據並經過瀏覽器顯示；
六、技術剖析
正如上節所述，想清楚了整個過程後，咱們應該對整個過程的技術實現進行進一步的探究。
在微信開發官方文檔中，我找到了第三方網站應用微信登陸開發指南：
https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
我將整個過程梳理了一遍，畫出了這個圖：
如上圖所示，整個技術實現以下。
（1）二維碼的得到：
- 1）用戶打開網站後，網站後臺根據微信OAuth2.0協議向微信開發平臺請求受權登陸，並傳遞事先在微信開發平臺中審覈經過的AppID和AppSecrect等參數；
- 2）微信開發平臺對AppID等參數進行驗證，並向網站後臺返回二維碼；
- 3）網站後臺將二維碼傳送至網站前端進行顯示。
（2）微信客戶端受權登陸：
- 1）用戶使用微信客戶端掃描二維碼並受權登陸；
- 2）微信客戶端將二維碼特定的uid與微信帳號綁定，傳送至微信開發平臺；
- 3）微信開發平臺驗證綁定數據，調用網站後臺的回調接口，發送受權臨時票據code；
（3）網站後臺請求數據：
- 1）網站後臺接收到code，代表微信開發平臺贊成數據請求；
- 2）網站後臺根據code參數，再加上AppID和AppSecret請求微信開發平臺換取access_token；
- 3）微信開發平臺驗證參數，並返回access_token；
- 4）網站後臺收到access_token後便可進行參數分析得到用戶帳號數據。
在上述過程當中，有幾個參數值得解釋一下（來源官方文檔）：
- 1）AppID：應用惟一標識，在微信開放平臺提交應用審覈經過後得到；
- 2）AppSecret：應用密鑰，在微信開放平臺提交應用審覈經過後得到；
- 3）code：受權臨時票據，第三方經過code進行獲取access_token的時候須要用到，code的超時時間爲10分鐘，一個code只能成功換取一次access_token即失效。code的臨時性和一次性保障了微信受權登陸的安全性。
整個過程從網站後臺向微信開發平臺請求受權登陸開始，最終目的是爲了得到access_token：
access_token：用戶受權第三方應用發起接口調用的憑證
在得到了access_token後就能夠解析用戶的一些基本信息，包括頭像、用戶名、性別、城市等。這樣一來，整個微信掃描登陸的過程就完成了。
七、寫在最後
研究到這，終於大致上對微信掃碼登陸的整個過程有了清晰的認知。看起來彷佛也不難，開發者只須要在網頁後端作好對微信公衆平臺的接口調用便可實現掃碼登陸。
伸了伸懶腰，突然又想到在整個過程當中還須要考慮超時的問題。好比二維碼超時未掃描、二維碼掃描後超時受權、得到access_token後超時等等問題。
我發現一個簡單的功能實現起來仍是須要考慮許多細節，真的是紙上得來終覺淺呀。因而我下定決心，下次得少上網衝浪了，花點時間搭個服務器先把微信掃碼登陸過程實現看看。
不過，還得先去在微信開放平臺註冊開發者賬號，並擁有一個已審覈經過的網站應用，並得到相應的AppID和AppSecret才行。
想了想，仍是讓我先趟一下子吧。。。
附錄：更多IM開發相關文章
[1] IM開發熱門文章：
《移動端IM開發者必讀(一)：通俗易懂，理解移動網絡的「弱」和「慢」》
《移動端IM開發者必讀(二)：史上最全移動弱網絡優化方法總結》
《現代移動端網絡短鏈接的優化手段總結：請求速度、弱網適應、安全保障》
《小白必讀：閒話HTTP短鏈接中的Session和Token》
《開源IM工程「蘑菇街TeamTalk」的現狀：一場虎頭蛇尾的開源秀》
《QQ音樂團隊分享：Android中的圖片壓縮技術詳解（上篇）》
《QQ音樂團隊分享：Android中的圖片壓縮技術詳解（下篇）》
《騰訊原創分享(一)：如何大幅提高移動網絡下手機QQ的圖片傳輸速度和成功率》
《騰訊原創分享(二)：如何大幅壓縮移動網絡下APP的流量消耗（上篇）》
《騰訊原創分享(三)：如何大幅壓縮移動網絡下APP的流量消耗（下篇）》
《如約而至：微信自用的移動端IM網絡層跨平臺組件庫Mars已正式開源》
《基於社交網絡的Yelp是如何實現海量用戶圖片的無損壓縮的？》
《騰訊技術分享：騰訊是如何大幅下降帶寬和網絡流量的(圖片壓縮篇)》
《騰訊技術分享：騰訊是如何大幅下降帶寬和網絡流量的(音視頻技術篇)》
《字符編碼那點事：快速理解ASCII、Unicode、GBK和UTF-8》
《子彈短信光鮮的背後：網易雲信首席架構師分享億級IM平臺的技術實踐》
《微信技術分享：微信的海量IM聊天消息序列號生成實踐（算法原理篇）》
《自已開發IM有那麼難嗎？手把手教你自擼一個Andriod版簡易IM (有源碼)》
《適合新手：從零開發一個IM服務端（基於Netty，有完整源碼）》
>> 更多同類文章 ……
[2] 有關WEB端即時通信開發：
《Web端即時通信技術盤點：短輪詢、Comet、Websocket、SSE》
《Comet技術詳解：基於HTTP長鏈接的Web端實時通訊技術》
《WebSocket詳解（一）：初步認識WebSocket技術》
《WebSocket詳解（二）：技術原理、代碼演示和應用案例》
《WebSocket詳解（三）：深刻WebSocket通訊協議細節》
《WebSocket詳解（四）：刨根問底HTTP與WebSocket的關係(上篇)》
《WebSocket詳解（五）：刨根問底HTTP與WebSocket的關係(下篇)》
《WebSocket詳解（六）：刨根問底WebSocket與Socket的關係》
《LinkedIn的Web端即時通信實踐：實現單機幾十萬條長鏈接》
《Web端即時通信技術的發展與WebSocket、Socket.io的技術實踐》
《Web端即時通信安全：跨站點WebSocket劫持漏洞詳解(含示例代碼)》
《開源框架Pomelo實踐：搭建Web端高性能分佈式IM聊天服務器》
《詳解Web端通訊方式的演進：從Ajax、JSONP 到 SSE、Websocket》
《MobileIMSDK-Web的網絡層框架爲什麼使用的是Socket.io而不是Netty？》
《理論聯繫實際：從零理解WebSocket的通訊原理、協議格式、安全性》
《微信小程序中如何使用WebSocket實現長鏈接(含完整源碼)》
《八問WebSocket協議：爲你快速解答WebSocket熱門疑問》
《快速瞭解Electron：新一代基於Web的跨平臺桌面技術》
>> 更多同類文章 ……
（本文同步發佈於：http://www.52im.net/thread-2941-1-1.html）
- 1. IM要作手機掃碼登陸？先看看微信的掃碼登陸功能技術原理
- 2. IM的掃碼登陸功能如何實現？一文搞懂主流的掃碼登陸技術原理
- 3. 微信掃碼登陸功能實現
- 4. 淺析微信掃碼登陸原理
- 5. 掃碼登陸技術原理
- 6. 微信掃碼登陸
- 7. 微信掃碼登陸_JAVA
- 8. WinForm微信掃碼登陸
- 9. JAVA微信掃碼登陸
- 10. thinkcmf5 微信掃碼登陸
- 更多相關文章...
- • MyBatis的工作原理 - MyBatis教程
- • SVN 查看歷史信息 - SVN 教程
- • ☆技術問答集錦（13）Java Instrument原理
- • 漫談MySQL的鎖機制
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
- 1. IM要作手機掃碼登陸？先看看微信的掃碼登陸功能技術原理
- 2. IM的掃碼登陸功能如何實現？一文搞懂主流的掃碼登陸技術原理
- 3. 微信掃碼登陸功能實現
- 4. 淺析微信掃碼登陸原理
- 5. 掃碼登陸技術原理
- 6. 微信掃碼登陸
- 7. 微信掃碼登陸_JAVA
- 8. WinForm微信掃碼登陸
- 9. JAVA微信掃碼登陸
- 10. thinkcmf5 微信掃碼登陸