微信掃碼登錄的幾秒鐘里，到底發生了什麼
- 2020 年 3 月 4 日
- 筆記
來源：業餘碼農
作者：Amazing10
事情經過
這天中午，小A吃完午飯，攤在自己的躺椅上，想趁吃飽喝足的午後時間靜靜享受獨自的靜謐。
干點什麼好呢？小A單手操作滑鼠打開了一個陌生而隱秘的網站。正開著某個影片起勁，突然瀏覽器彈出了一個對話框：
請使用微信掃碼登錄帳號，繼續觀看
這…
但是由於強烈的好奇驅使，迫於無奈，小A只好選擇登錄再繼續觀看。只見他熟練的掏出手機，打開微信掃一掃對準上面的二維碼，只聽見 「叮」 的一聲，網頁上的二維碼放佛活過來了，直接刷新出了小A的微信頭像，同時手機上也彈出登錄的提醒。
小A心中略微驚嘆，但沒來得及多想。忙點擊手機介面中登錄按鈕。此時網頁刷新，恢復了正常，表示可以繼續觀看。
上網衝浪的時間總是過得很快，小A很快就有些疲倦。他閉上眼睛，腦海中卻浮現出了剛剛微信掃描二維碼，然後登錄網頁的場景，心中再次驚嘆，並開始思考起其中的原理來。
原理解析
微信掃碼登錄現在在日常生活中已經是常見不能再常見的場景之一了，但是要知道微信首次公開這項功能時，卻是驚艷眾人。移動端與PC端以這樣一種巧妙的方式鏈接在了一起，的確是讓人驚嘆。
小A想起來之前聽過的前後端的概念，知道賬戶的數據資訊一般都是放在伺服器上，前端負責向後端 「討要數據」 並顯示，後端則是對前端的 「討要」 做出反應。這樣一來，小A猜測微信登錄的過程可能就是：
- 網頁前端向微信後台請求帳號數據
- 微信後台接受網頁前端的請求，然後將他的帳號數據返回
- 網頁前端接收到了數據後，在瀏覽器里進行顯示
還手腳麻利的畫了個示意圖：
當小A正準備沾沾自喜的時候，突然看到桌面上的手機。咦，如果就只是這麼個過程，那手機的作用是啥。他才開始意識到，問題沒這麼簡單。
於是，他決定重新探秘微信掃碼登錄的過程。
過程分析
小A打開了一個十分簡潔的網站，說是微信的網頁版，可以微信直接掃碼登錄。
https://wx.qq.com/
小A看著網頁中碩大的二維碼陷入了沉思，他在想這個二維碼跟他的身份有沒有關係呢。如果沒有，那它又是怎麼生成的呢。
思考間，小A打開了瀏覽器的開發者工具。在網路監控一覽找到了這幅二維碼，與之對應的鏈接是
https://login.weixin.qq.com/qrcode/4fhrH4fhTQ==
然後習慣性地，小A嘗試多次刷新頁面，發現二維碼不斷發生變化，鏈接也不斷更改。
https://login.weixin.qq.com/qrcode/YdDa9LAqpA== https://login.weixin.qq.com/qrcode/ofw5oAsMVg== https://login.weixin.qq.com/qrcode/gaNS_fxO_w==
他似乎發現了些東西。二維碼不斷變化，其對應的鏈接尾的程式碼也相應變化，並且是隨機性的變化。
這也就是說，每一次頁面刷新都會隨機且唯一地生成一個二維碼。這或許可以與手機登錄的過程聯繫起來。
小A似乎開始明白了，他隨即再次拿起手機，熟練的使用微信掃描了此時的二維碼。
「叮」 的一聲，網頁上的二維碼頓時變成了小A帥氣的微信頭像。這個時候，小A才突然意識到，是掃碼之後網頁才與他的微信帳號建立起了聯繫。
沒有掃碼之前，頁面上的二維碼只是隨機生成的且與用戶無關的碼；而當用戶掃碼之後，二維碼便與用戶帳號綁定在了一起。
原來手機掃碼的用處是這樣！
小A此時注意到，手機微信上彈出了『微信登錄確認』的提醒。小A這個時候謹慎地點擊了下方的登錄按鈕。
隨著平滑的動畫一閃而過，網頁上已經顯示出了小A的帳號資訊，顯然小A的微信帳號已經登錄。再一次體驗這個過程，小A心中開始思索手機微信在登錄過程中所起到的具體作用。
首先需要明白幾個過程：
- 進入網頁登陸介面，隨機生成一個二維碼；
- 小A通過手機掃描二維碼，將微信帳號與二維碼綁定；
- 小A在手機微信點擊登錄按鈕，授權網頁登錄微信帳號；
- 網頁獲得小A的帳號資訊，將數據顯示。
原理解釋
小A望著上述過程，結合最開始的原理猜測，開始思索整個環節哪裡出了差錯。
網頁的二維碼到底從何而來？ 是誰向微信後台請求了帳號數據？
突然，他意識到，不同的網站可能都需要通過微信後台進行數據的獲取，那麼每一個網站必然也存在它的後台來給微信後台發送請求。
這樣一來，整個過程就能解釋得通了！
- 網站頁面刷新，網頁後台向微信後台請求授權登錄；
- 微信後台返回登錄所需二維碼；
- 用戶通過手機掃描二維碼，並在手機上授權登錄後，微信後台告知網頁後台已授權；
- 網頁後台向微信後台請求微信帳號數據；
- 微信後台返回帳號數據；
- 網頁後台接收數據並通過瀏覽器顯示；
技術剖析
小A在想清楚了整個過程後，決定對整個過程的技術實現進行進一步的探究。他打開了微信開發官方文檔，找到了第三方網站應用微信登錄開發指南：
https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
他將整個過程梳理了一遍，畫出了這個圖：
技術實現如下：
一、二維碼的獲得
- 用戶打開網站後，網站後台根據微信
OAuth2.0協議向微信開發平台請求授權登錄，並傳遞事先在微信開發平台中審核通過的AppID和AppSecrect等參數； - 微信開發平台對
AppID等參數進行驗證，並向網站後台返回二維碼； - 網站後台將二維碼傳送至網站前端進行顯示；
二、微信客戶端授權登錄
- 用戶使用微信客戶端掃描二維碼並授權登錄；
- 微信客戶端將二維碼特定的
uid與微信帳號綁定，傳送至微信開發平台； - 微信開發平台驗證綁定數據，調用網站後台的回調介面，發送授權臨時票據
code；
三、網站後台請求數據
- 網站後台接收到
code，表明微信開發平台同意數據請求； - 網站後台根據
code參數，再加上AppID和AppSecret請求微信開發平台換取access_token； - 微信開發平台驗證參數，並返回
access_token； - 網站後台收到
access_token後即可進行參數分析獲得用戶帳號數據。
在上述過程中，有幾個參數值得解釋一下：（來源官方文檔）
AppID：應用唯一標識，在微信開放平台提交應用審核通過後獲得 AppSecret：應用密鑰，在微信開放平台提交應用審核通過後獲得 code：授權臨時票據，第三方通過code進行獲取access_token的時候需要用到，code的超時時間為10分鐘，一個code只能成功換取一次access_token即失效。code的臨時性和一次性保障了微信授權登錄的安全性。
整個過程從網站後台向微信開發平台請求授權登錄開始，最終目的是為了獲得access_token。
access_token：用戶授權第三方應用發起介面調用的憑證
在獲得了access_token後就可以解析用戶的一些基本資訊，包括頭像、用戶名、性別、城市等。這樣一來，整個微信掃描登錄的過程就完成了。
研究到這，小A終於大體上對微信掃碼登錄的整個過程有了清晰的認知。看起來似乎也不難，開發者只需要在網頁後端做好對微信公眾平台的介面調用即可實現掃碼登錄。
伸了伸懶腰，小A又想到在整個過程中還需要考慮超時的問題。比如二維碼超時未掃描、二維碼掃描後超時授權、獲得access_token後超時等等問題。
揉了揉太陽穴，小A發現一個簡單的功能實現起來還是需要考慮許多細節，真的是紙上得來終覺淺呀。小A下定決心，下次得少上網衝浪了，花點時間搭個伺服器先把微信掃碼登錄過程實現看看。
不過，還得先去在微信開放平台註冊開發者帳號，並擁有一個已審核通過的網站應用，並獲得相應的AppID和AppSecret才行。
想了想，還是先睡覺吧。
