現(xiàn)在掃碼登錄是一種很常見(jiàn)的登錄方式。當(dāng)用戶需要登錄某個(gè)網(wǎng)站時(shí)，網(wǎng)站會(huì)提供一種掃碼登錄的方式，用戶打開(kāi)相應(yīng)的手機(jī)App，掃描網(wǎng)站上顯示的二維碼，然后在App中確認(rèn)登錄，網(wǎng)站監(jiān)測(cè)到用戶確認(rèn)登錄后，跳轉(zhuǎn)到登錄成功頁(yè)面。從這個(gè)形式上看，掃碼登錄就是將用戶在手機(jī)App中的登錄狀態(tài)同步到網(wǎng)站中，這篇文章就來(lái)一窺這個(gè)同步是如何發(fā)生的。

     同一產(chǎn)品中的掃碼登錄

       假設(shè)有一款產(chǎn)品，這個(gè)產(chǎn)品通過(guò)手機(jī)端App和PC端應(yīng)用為用戶提供服務(wù)，為了方便用戶在PC端上登錄，產(chǎn)品提供了一個(gè)掃碼登錄的功能，即PC端應(yīng)用上展示一個(gè)登錄二維碼，用戶使用手機(jī)端App掃碼并確認(rèn)登錄，然后用戶就可以在PC端上登錄成功。在這個(gè)例子中，手機(jī)端App和PC端應(yīng)用同屬于一個(gè)產(chǎn)品，這是一種常見(jiàn)的產(chǎn)品形態(tài)，微信、微博、知乎等等都是這種產(chǎn)品形態(tài)的代表。

為了方便介紹，這里再假設(shè)PC端應(yīng)用是一個(gè)Web站點(diǎn)，下面就來(lái)看一下這種登錄方式的運(yùn)作原理：

如上圖所示，整個(gè)過(guò)程比較簡(jiǎn)單，這里大概分為如下幾個(gè)步驟：

       1、用戶發(fā)起二維碼登錄：此時(shí)網(wǎng)站會(huì)先生成一個(gè)二維碼，同時(shí)把這個(gè)二維碼對(duì)應(yīng)的標(biāo)識(shí)保存起來(lái)，以便跟蹤二維碼的掃碼狀態(tài)，然后將二維碼頁(yè)面返回到瀏覽器中；瀏覽器先展示這個(gè)二維碼，再按照J(rèn)avascript腳本的指示發(fā)起掃碼狀態(tài)的輪詢。所謂輪詢就是瀏覽器每隔幾秒調(diào)用網(wǎng)站的API查詢二維碼的掃碼登錄結(jié)果，查詢時(shí)攜帶二維碼的標(biāo)識(shí)。有的文章說(shuō)這里可以使用WebSocket，雖然WebSocket響應(yīng)比較及時(shí)，但是從兼容性和復(fù)雜度考慮，大部分方案還是會(huì)選擇輪詢或者長(zhǎng)輪詢，畢竟此時(shí)通信稍微延遲下也沒(méi)多大關(guān)系。

       2、用戶掃碼確認(rèn)登錄：用戶打開(kāi)手機(jī)App，使用App自帶的掃碼功能，掃描瀏覽器中展現(xiàn)的二維碼，然后App提取出二維碼中的登錄信息，顯示登錄確認(rèn)的頁(yè)面，這個(gè)頁(yè)面可以是App的Native頁(yè)面，也可以是遠(yuǎn)程H5頁(yè)面，這里采用Native頁(yè)面，用戶點(diǎn)擊確認(rèn)或者同意按鈕后，App將二維碼信息和當(dāng)前用戶的Token一起提交到網(wǎng)站API，網(wǎng)站API確認(rèn)用戶Token有效后，更新在步驟1中創(chuàng)建的二維碼標(biāo)識(shí)的狀態(tài)為“確認(rèn)登錄”，同時(shí)綁定當(dāng)前用戶。

       3、網(wǎng)站驗(yàn)證登錄成功：在步驟1中，二維碼登錄頁(yè)面啟動(dòng)了一個(gè)掃碼狀態(tài)的輪詢，如果用戶已經(jīng)“確認(rèn)登錄”，則輪詢?cè)L問(wèn)網(wǎng)站API時(shí)，網(wǎng)站會(huì)生成二維碼綁定用戶的登錄Session，然后向前端返回登錄成功消息。這里登錄狀態(tài)維護(hù)是采用的Session機(jī)制，也可以換成其它的機(jī)制，比如JWT。

       為了保證登錄的安全，有必要采取一些安全措施，可能包括以下若干方法：

•  對(duì)二維碼承載的信息按照某種規(guī)則進(jìn)行處理，App可以在掃碼時(shí)進(jìn)行驗(yàn)證，避免任   何掃碼都去請(qǐng)求登錄；

•  對(duì)二維碼設(shè)置一個(gè)過(guò)期時(shí)間，過(guò)期就自動(dòng)刪除，這樣使其占用的資源保持在合理范   圍之內(nèi)；

•  限制二維碼只能使用一次，防止重放攻擊；

•  二維碼使用足夠長(zhǎng)的隨機(jī)性字符串，防止被惡意窮舉占用；

•  用HTTPS傳輸，保護(hù)登錄數(shù)據(jù)不被竊聽(tīng)和篡改。

     第三方應(yīng)用的掃碼登錄

       現(xiàn)在很多網(wǎng)站除了提供自身賬號(hào)的登錄方式以外，還提供了微信掃碼登錄、微博掃碼登錄等方式，本來(lái)這對(duì)用戶來(lái)說(shuō)是十分方便的，不過(guò)很多站點(diǎn)為了獲取用戶手機(jī)號(hào)，首次登錄時(shí)還需要用手機(jī)驗(yàn)證碼再登錄一次，用戶會(huì)有點(diǎn)被欺騙的感覺(jué)，不過(guò)這個(gè)問(wèn)題不是本文要探討的。

       這里以微信掃碼登錄某網(wǎng)站為例，某網(wǎng)站就是第三方應(yīng)用，所謂第三方是相對(duì)微信自身來(lái)說(shuō)的。相比同一產(chǎn)品中的掃碼登錄，網(wǎng)站使用微信掃碼登錄會(huì)更復(fù)雜一些，因?yàn)檫@涉及到不同應(yīng)用之間的登錄安全。下面就給出這一登錄方式的詳細(xì)運(yùn)作原理，時(shí)序圖比較長(zhǎng)，不過(guò)只要耐心點(diǎn)就能完全搞清楚，甚至自己實(shí)現(xiàn)一個(gè)類似的第三方掃碼登錄方案。

       這里對(duì)一些關(guān)鍵點(diǎn)特別說(shuō)明下：

       1、步驟3 生成微信登錄請(qǐng)求記錄：當(dāng)用戶掃碼并同意登錄之后，步驟25中瀏覽器會(huì)重定向到第三方應(yīng)用，如果之前沒(méi)有創(chuàng)建一條登錄請(qǐng)求記錄，網(wǎng)站并不能確定這次登錄就是自己發(fā)起的，這可能導(dǎo)致跨站請(qǐng)求偽造攻擊。比如使用某個(gè)應(yīng)用的微信登錄二維碼，騙取用戶的授權(quán)，然后最終回調(diào)跳轉(zhuǎn)到其它站點(diǎn)，被回調(diào)站點(diǎn)只能被動(dòng)接受，雖然下一步驗(yàn)證授權(quán)Code通不過(guò)，微信也可能會(huì)認(rèn)為第三方應(yīng)用出了某種問(wèn)題，搞不好被封掉。因此第三方應(yīng)用創(chuàng)建一條登錄請(qǐng)求記錄之后，還要把記錄的標(biāo)識(shí)拼接到訪問(wèn)微信登錄二維碼的url中，微信會(huì)在用戶同意登錄后原樣返回這個(gè)標(biāo)識(shí)，步驟26中第三方應(yīng)用可以驗(yàn)證這個(gè)標(biāo)識(shí)是不是有效的。

       2、步驟17 顯示應(yīng)用名稱和請(qǐng)求授權(quán)信息：因?yàn)槲⑿胖С趾芏嗟牡谌綉?yīng)用，需要明確告知用戶正在登錄哪個(gè)應(yīng)用，應(yīng)用可以訪問(wèn)自己的什么信息，這都是用戶做出登錄決定的必要信息。因此掃碼之后，微信手機(jī)端就需要去微信開(kāi)放平臺(tái)查詢下二維碼對(duì)應(yīng)的第三方應(yīng)用信息。

       3、步驟24 登錄臨時(shí)授權(quán)Code：微信開(kāi)放平臺(tái)沒(méi)有直接向?yàn)g覽器返回登錄用戶的信息，這是因?yàn)榈谌綉?yīng)用還需要對(duì)用戶進(jìn)行授權(quán)并保持會(huì)話的狀態(tài)，這適合在應(yīng)用的服務(wù)端來(lái)處理；而且直接返回用戶信息到瀏覽器也是不安全的，并不能保證二維碼登錄請(qǐng)求就是通過(guò)指定的第三方應(yīng)用發(fā)起的。第三方應(yīng)用會(huì)在步驟27中攜帶這個(gè)授權(quán)Code，加上應(yīng)用的AppId和AppSecret，再去向微信開(kāi)放平臺(tái)發(fā)起登錄請(qǐng)求，臨時(shí)授權(quán)Code只能使用1次，存下來(lái)也不能再用，且只能用在指定的應(yīng)用（即綁定了AppId），AppSecret是應(yīng)用從服務(wù)端提取的，用來(lái)驗(yàn)證應(yīng)用的身份，這些措施保證了微信授權(quán)登錄的安全性。不過(guò)驗(yàn)證通過(guò)后還是沒(méi)有直接返回用戶信息，而是返回了一個(gè)access token，應(yīng)用可以使用這個(gè)token再去請(qǐng)求獲取用戶信息的接口，這是因?yàn)殚_(kāi)放平臺(tái)提供了很多接口，訪問(wèn)這些接口都需要有授權(quán)才行，所以發(fā)放了一個(gè)access token給第三方應(yīng)用，這種授權(quán)登錄方式叫做OAuth 2.0?；诎踩矫娴目紤]，access token的有效期比較短，開(kāi)放平臺(tái)一般還會(huì)發(fā)放一個(gè)refresh token，access token過(guò)期之后，第三方應(yīng)用可以拿著這個(gè)refresh token再去換一個(gè)新的access token，如果refresh token也過(guò)期了或者用戶取消了授權(quán)，則不能獲取到新的access token，第三方應(yīng)用此時(shí)應(yīng)該注銷用戶的登錄。這些token都不能泄漏，所以需要保存在第三方應(yīng)用的服務(wù)端。

     微信二維碼登錄的變種

        微信除了跳轉(zhuǎn)到二維碼登錄頁(yè)面的方式，還提供了第三方網(wǎng)站中內(nèi)嵌二維碼的方式。通過(guò)微信JS SDK生成二維碼并在網(wǎng)頁(yè)的指定區(qū)域展現(xiàn)，用戶掃碼同意登錄后，微信JS SDK發(fā)起重定向或者在iframe中打開(kāi)應(yīng)用回調(diào)頁(yè)面，傳遞臨時(shí)授權(quán)Code和應(yīng)用State，后續(xù)的流程就都一樣了。

另外這里的第三方應(yīng)用如果是移動(dòng)端App，微信開(kāi)放平臺(tái)也支持掃碼登錄的方式，區(qū)別在于需要集成微信SDK，獲取二維碼和接收用戶授權(quán)Code都是通過(guò)SDK回調(diào)的方式，后續(xù)的流程也都一樣。

作者：螢火架構(gòu)
鏈接：https://juejin.cn/post/7056544865647067172
來(lái)源：稀土掘金