IM要作手機掃碼登陸？先看看微信的掃碼登陸功能技術原理

本文原文由做者Amazing10原創發佈於公衆號業餘碼農，收錄時有改動，感謝原做者的技術分享。

一、引言

某天中午，吃完午餐，攤在本身的躺椅上，想趁吃飽喝足的午後時間靜靜享受獨自的靜謐。

 

 

乾點什麼好呢？因而單手操做鼠標打開了一個陌生而隱祕的網站。正開着某個視頻起勁。。。

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

請使用微信掃碼登陸帳號，繼續觀看

這...

 

可是因爲強烈的好奇驅使，迫於無奈，只好選擇登陸再繼續觀看。因而熟練的掏出手機，打開微信掃一掃對準上面的二維碼，只聽見 「叮」 的一聲，網頁上的二維碼放佛活過來了，直接刷新出了本尊的微信頭像，同時手機上也彈出登陸的提醒。

 

心中略微驚歎，但沒來得及多想。忙點擊手機界面中登陸按鈕。此時網頁刷新，恢復了正常，表示能夠繼續觀看。

上網衝浪的時間老是過得很快，很快就有些疲倦。因而閉上眼睛，腦海中卻浮現出了剛剛微信掃描二維碼，而後登陸網頁的場景，心中再次驚歎，並開始思考起其中的原理來。。。

言歸正傳，本文將以輕鬆活潑的語言形式，爲你分析和講解微信手機掃碼登陸的技術原理，但願在你的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才行。

想了想，仍是讓我先趟一下子吧。。。（本文同步發佈於：http://www.52im.net/thread-2941-1-1.html）