事情經(jīng)過

這天中午，小A吃完午飯，攤在自己的躺椅上，想趁吃飽喝足的午后時(shí)間靜靜享受獨(dú)自的靜謐。

干點(diǎn)什么好呢？小A單手操作鼠標(biāo)打開了一個(gè)陌生而隱秘的網(wǎng)站。正開著某個(gè)視頻起勁，突然瀏覽器彈出了一個(gè)對(duì)話框：

請(qǐng)使用微信掃碼登錄賬號(hào)，繼續(xù)觀看

這...

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

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

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

原理解析

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

小A想起來之前聽過的前后端的概念，知道賬戶的數(shù)據(jù)信息一般都是放在服務(wù)器上，前端負(fù)責(zé)向后端 “討要數(shù)據(jù)” 并顯示，后端則是對(duì)前端的 “討要” 做出反應(yīng)。這樣一來，小A猜測(cè)微信登錄的過程可能就是：

1. 網(wǎng)頁前端向微信后臺(tái)請(qǐng)求賬號(hào)數(shù)據(jù)

2. 微信后臺(tái)接受網(wǎng)頁前端的請(qǐng)求，然后將他的賬號(hào)數(shù)據(jù)返回

3. 網(wǎng)頁前端接收到了數(shù)據(jù)后，在瀏覽器里進(jìn)行顯示

還手腳麻利的畫了個(gè)示意圖：

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

于是，他決定重新探秘微信掃碼登錄的過程。

過程分析

小A打開了一個(gè)十分簡(jiǎn)潔的網(wǎng)站，說是微信的網(wǎng)頁版，可以微信直接掃碼登錄。

https://wx.qq.com/

小A看著網(wǎng)頁中碩大的二維碼陷入了沉思，他在想這個(gè)二維碼跟他的身份有沒有關(guān)系呢。如果沒有，那它又是怎么生成的呢。

思考間，小A打開了瀏覽器的開發(fā)者工具。在網(wǎng)絡(luò)監(jiān)控一覽找到了這幅二維碼，與之對(duì)應(yīng)的鏈接是

https://login.weixin.qq.com/qrcode/4fhrH4fhTQ==

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

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

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

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

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

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

小A似乎開始明白了，他隨即再次拿起手機(jī)，熟練的使用微信掃描了此時(shí)的二維碼。

“?！?的一聲，網(wǎng)頁上的二維碼頓時(shí)變成了小A帥氣的微信頭像。這個(gè)時(shí)候，小A才突然意識(shí)到，是掃碼之后網(wǎng)頁才與他的微信賬號(hào)建立起了聯(lián)系。

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

原來手機(jī)掃碼的用處是這樣！

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

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

首先需要明白幾個(gè)過程：

1. 進(jìn)入網(wǎng)頁登陸界面，隨機(jī)生成一個(gè)二維碼；

2. 小A通過手機(jī)掃描二維碼，將微信賬號(hào)與二維碼綁定；

3. 小A在手機(jī)微信點(diǎn)擊登錄按鈕，授權(quán)網(wǎng)頁登錄微信賬號(hào)；

4. 網(wǎng)頁獲得小A的賬號(hào)信息，將數(shù)據(jù)顯示。

原理解釋

小A望著上述過程，結(jié)合最開始的原理猜測(cè)，開始思索整個(gè)環(huán)節(jié)哪里出了差錯(cuò)。

網(wǎng)頁的二維碼到底從何而來？

是誰向微信后臺(tái)請(qǐng)求了賬號(hào)數(shù)據(jù)？

突然，他意識(shí)到，不同的網(wǎng)站可能都需要通過微信后臺(tái)進(jìn)行數(shù)據(jù)的獲取，那么每一個(gè)網(wǎng)站必然也存在它的后臺(tái)來給微信后臺(tái)發(fā)送請(qǐng)求。

這樣一來，整個(gè)過程就能解釋得通了！

1. 網(wǎng)站頁面刷新，網(wǎng)頁后臺(tái)向微信后臺(tái)請(qǐng)求授權(quán)登錄；

2. 微信后臺(tái)返回登錄所需二維碼；

3. 用戶通過手機(jī)掃描二維碼，并在手機(jī)上授權(quán)登錄后，微信后臺(tái)告知網(wǎng)頁后臺(tái)已授權(quán)；

4. 網(wǎng)頁后臺(tái)向微信后臺(tái)請(qǐng)求微信賬號(hào)數(shù)據(jù)；

5. 微信后臺(tái)返回賬號(hào)數(shù)據(jù)；

6. 網(wǎng)頁后臺(tái)接收數(shù)據(jù)并通過瀏覽器顯示；

技術(shù)剖析

小A在想清楚了整個(gè)過程后，決定對(duì)整個(gè)過程的技術(shù)實(shí)現(xiàn)進(jìn)行進(jìn)一步的探究。他打開了微信開發(fā)官方文檔，找到了第三方網(wǎng)站應(yīng)用微信登錄開發(fā)指南：

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

他將整個(gè)過程梳理了一遍，畫出了這個(gè)圖：

技術(shù)實(shí)現(xiàn)如下：

一、二維碼的獲得

1. 用戶打開網(wǎng)站后，網(wǎng)站后臺(tái)根據(jù)微信OAuth2.0協(xié)議向微信開發(fā)平臺(tái)請(qǐng)求授權(quán)登錄，并傳遞事先在微信開發(fā)平臺(tái)中審核通過的AppID和AppSecrect等參數(shù)；

2. 微信開發(fā)平臺(tái)對(duì)AppID等參數(shù)進(jìn)行驗(yàn)證，并向網(wǎng)站后臺(tái)返回二維碼；

3. 網(wǎng)站后臺(tái)將二維碼傳送至網(wǎng)站前端進(jìn)行顯示；

二、微信客戶端授權(quán)登錄

1. 用戶使用微信客戶端掃描二維碼并授權(quán)登錄；

2. 微信客戶端將二維碼特定的uid與微信賬號(hào)綁定，傳送至微信開發(fā)平臺(tái)；

3. 微信開發(fā)平臺(tái)驗(yàn)證綁定數(shù)據(jù)，調(diào)用網(wǎng)站后臺(tái)的回調(diào)接口，發(fā)送授權(quán)臨時(shí)票據(jù)code；

三、網(wǎng)站后臺(tái)請(qǐng)求數(shù)據(jù)

1. 網(wǎng)站后臺(tái)接收到code，表明微信開發(fā)平臺(tái)同意數(shù)據(jù)請(qǐng)求；

2. 網(wǎng)站后臺(tái)根據(jù)code參數(shù)，再加上AppID和AppSecret請(qǐng)求微信開發(fā)平臺(tái)換取access_token；

3. 微信開發(fā)平臺(tái)驗(yàn)證參數(shù)，并返回access_token；

4. 網(wǎng)站后臺(tái)收到access_token后即可進(jìn)行參數(shù)分析獲得用戶賬號(hào)數(shù)據(jù)。

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

AppID：應(yīng)用唯一標(biāo)識(shí)，在微信開放平臺(tái)提交應(yīng)用審核通過后獲得

AppSecret：應(yīng)用密鑰，在微信開放平臺(tái)提交應(yīng)用審核通過后獲得

code：授權(quán)臨時(shí)票據(jù)，第三方通過code進(jìn)行獲取access_token的時(shí)候需要用到，code的超時(shí)時(shí)間為10分鐘，一個(gè)code只能成功換取一次access_token即失效。code的臨時(shí)性和一次性保障了微信授權(quán)登錄的安全性。

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

access_token：用戶授權(quán)第三方應(yīng)用發(fā)起接口調(diào)用的憑證

在獲得了access_token后就可以解析用戶的一些基本信息，包括頭像、用戶名、性別、城市等。這樣一來，整個(gè)微信掃描登錄的過程就完成了。

研究到這，小A終于大體上對(duì)微信掃碼登錄的整個(gè)過程有了清晰的認(rèn)知。看起來似乎也不難，開發(fā)者只需要在網(wǎng)頁后端做好對(duì)微信公眾平臺(tái)的接口調(diào)用即可實(shí)現(xiàn)掃碼登錄。

伸了伸懶腰，小A又想到在整個(gè)過程中還需要考慮超時(shí)的問題。比如二維碼超時(shí)未掃描、二維碼掃描后超時(shí)授權(quán)、獲得access_token后超時(shí)等等問題。

揉了揉太陽穴，小A發(fā)現(xiàn)一個(gè)簡(jiǎn)單的功能實(shí)現(xiàn)起來還是需要考慮許多細(xì)節(jié)，真的是紙上得來終覺淺呀。小A下定決心，下次得少上網(wǎng)沖浪了，花點(diǎn)時(shí)間搭個(gè)服務(wù)器先把微信掃碼登錄過程實(shí)現(xiàn)看看。

不過，還得先去在微信開放平臺(tái)注冊(cè)開發(fā)者帳號(hào)，并擁有一個(gè)已審核通過的網(wǎng)站應(yīng)用，并獲得相應(yīng)的AppID和AppSecret才行。

想了想，還是先睡覺吧。

帥氣的你“在看”我嗎？