[[431128]]

真實(shí)面試小場(chǎng)景：

經(jīng)過(guò)八股和算法的交鋒，老三松了口氣，都hold住了。只見(jiàn)面試官微微一笑，“其實(shí)，我真正想問(wèn)的是……你覺(jué)得掃碼登錄應(yīng)該怎么實(shí)現(xiàn)。”

老三：“啊……這個(gè)，哦……那個(gè)，這個(gè)就這么，然后……額……嗯……”

面試官：“了解了，回去等通知吧。”

完……

好了，鋪墊結(jié)束，進(jìn)入我們今天的主題，掃碼登錄功能該如何實(shí)現(xiàn)?

掃碼登錄場(chǎng)景

掃碼登錄場(chǎng)景想必我們都不陌生——很多PC端的網(wǎng)站都提供了掃碼登錄的功能，無(wú)需在網(wǎng)頁(yè)上輸入任何賬號(hào)和密碼，只需要通過(guò)手機(jī)上的APP，如微信、淘寶、QQ等等，使用掃描功能，掃描網(wǎng)頁(yè)上的二維碼，確認(rèn)登錄，就可以完成網(wǎng)頁(yè)端登錄。

掃碼登錄QQ郵箱

掃碼登錄分析

我們來(lái)分析一下，掃碼登錄，其實(shí)涉及到三種角色，需要解決兩個(gè)問(wèn)題。

三種角色

很明顯，掃碼登錄當(dāng)中涉及到的三種角色：PC端、手機(jī)端、服務(wù)端。

三端

相關(guān)的設(shè)計(jì)都要圍繞這三端來(lái)展開(kāi)，具體的設(shè)計(jì)其實(shí)就是每一端應(yīng)該完成什么功能?應(yīng)該怎么實(shí)現(xiàn)?端和端應(yīng)該如何交互?

兩個(gè)問(wèn)題

掃碼登錄本質(zhì)上是一種特殊的登錄認(rèn)證方式，我們面對(duì)的是兩個(gè)問(wèn)題

• 手機(jī)端如何完成認(rèn)證
• PC端如何完成登錄

如果用普通的賬號(hào)密碼方式登錄認(rèn)證，PC端通過(guò)賬號(hào)密碼完成認(rèn)證，然后服務(wù)端給PC端同步返回token key之類的標(biāo)識(shí)，PC端再次請(qǐng)求服務(wù)端，需要攜帶token key，用于標(biāo)識(shí)和證明自己登錄的狀態(tài)。

服務(wù)端響應(yīng)的時(shí)候，需要對(duì)token key進(jìn)行校驗(yàn)，通過(guò)則正常響應(yīng);校驗(yàn)不通過(guò)，認(rèn)證失敗;或者token過(guò)期，PC端需要再次登錄認(rèn)證，獲取新的token key。

賬號(hào)/密碼登錄過(guò)程

現(xiàn)在換成了掃碼登錄：

• 認(rèn)證不是通過(guò)賬號(hào)密碼了，而是由手機(jī)端掃碼來(lái)完成
• PC端沒(méi)法同步獲取認(rèn)證成功之后的憑據(jù)，必須用某種方式來(lái)讓PC端獲取認(rèn)證的憑據(jù)。

掃碼登錄實(shí)現(xiàn)

手機(jī)端如何完成認(rèn)證

二維碼怎么生成

二維碼和超市里的條形碼類似，超市的條形碼實(shí)際是一串?dāng)?shù)字，上面存儲(chǔ)了商品的序列號(hào)。

二維碼的內(nèi)容就比較自由，里面不止可以存數(shù)字，還可以存任何的字符串。我們可以認(rèn)為，它就是字符的另外一種表現(xiàn)形式。

下面我通過(guò)一個(gè)網(wǎng)站把文字轉(zhuǎn)成了二維碼：

文字轉(zhuǎn)二維碼

所以，我們手機(jī)掃碼這個(gè)過(guò)程，其實(shí)是對(duì)二維碼的解碼，獲取二維碼中包含的數(shù)據(jù)。

那么二維碼怎么生成呢?

首先，二維碼是展示在我們的PC端，所以生成這個(gè)操作應(yīng)該由PC端去請(qǐng)求服務(wù)端，獲取相應(yīng)的數(shù)據(jù)，再由PC端生成這個(gè)二維碼。

二維碼包含什么呢?

二維碼在我們這個(gè)場(chǎng)景里面是一個(gè)重要的媒介，服務(wù)端必須給這個(gè)數(shù)據(jù)生成惟一的標(biāo)識(shí)作為二維碼ID，同時(shí)還應(yīng)該設(shè)置過(guò)期的時(shí)間。PC端根據(jù)二維碼ID等數(shù)據(jù)生成二維碼。

二維碼生成

同時(shí)，服務(wù)端也應(yīng)該保存二維碼的一些狀態(tài)：未掃描、已成功、已失效。

APP認(rèn)證機(jī)制

我們還得認(rèn)識(shí)一下基于APP的移動(dòng)互聯(lián)網(wǎng)認(rèn)證機(jī)制。

首先，手機(jī)端一般是不會(huì)存儲(chǔ)登錄密碼的，我們我們發(fā)現(xiàn)，只有裝載APP，第一次登錄的時(shí)候，才需要進(jìn)行基于賬號(hào)密碼的登錄，之后即使這個(gè)清理掉這個(gè)應(yīng)用進(jìn)程，甚至手機(jī)重啟，都是不需要再次輸入賬號(hào)密碼的，它可以自動(dòng)登錄。

這背后有一套基于token的認(rèn)證機(jī)制，和PC有些類似，但又有一些不同。

APP端登錄認(rèn)證

• APP登錄認(rèn)證的時(shí)候除了賬號(hào)密碼，還有設(shè)備信息
• 賬號(hào)密碼校驗(yàn)通過(guò)，服務(wù)端會(huì)把賬號(hào)與設(shè)備進(jìn)行一個(gè)綁定，進(jìn)行持久化的保存，包含了賬號(hào)ID，設(shè)備ID，設(shè)備類型等等
• APP每次請(qǐng)求除了攜帶token key，還需要攜帶設(shè)備信息。

因?yàn)橐苿?dòng)端的設(shè)備具備唯一性，可以為每個(gè)客戶端生成專屬token，這個(gè)token也不用過(guò)期，所以這就是我們可以一次登錄，長(zhǎng)久使用的原理。

手機(jī)掃碼干了什么

那這下就清楚了，我們手機(jī)掃碼干了兩件事：

• 掃描二維碼：識(shí)別PC端展示的二維碼，獲取二維碼ID

掃描

• 確認(rèn)登錄：手機(jī)端通過(guò)帶認(rèn)證信息(token key、設(shè)備信息)、二維碼信息(二維碼ID)請(qǐng)求服務(wù)端，完成認(rèn)證過(guò)程，確認(rèn)PC端的登錄。

確認(rèn)登錄

ps: 關(guān)于手機(jī)掃碼和確認(rèn)，不是重點(diǎn)，所以這里進(jìn)行了簡(jiǎn)化，一種說(shuō)法是掃碼時(shí)同時(shí)向服務(wù)端申請(qǐng)一次性臨時(shí)token，確認(rèn)登錄的時(shí)候攜帶這個(gè)臨時(shí)token來(lái)訪問(wèn)服務(wù)端。

PC端如何完成登錄

接下來(lái)到我們的重頭戲了，手機(jī)端完成了它的工作，我們服務(wù)端的登錄怎么進(jìn)入登錄狀態(tài)呢?

我們前面講了，PC端通過(guò)token來(lái)標(biāo)識(shí)登錄狀態(tài)。那么手機(jī)端掃碼確認(rèn)之后，我們的服務(wù)端就應(yīng)該給PC生成相應(yīng)的token。

那么，這個(gè)PC端又如何獲取它所需的token key，來(lái)完成登錄呢?

如何獲取PC token

PC端可以通過(guò)獲取二維碼的狀態(tài)來(lái)進(jìn)行相應(yīng)的響應(yīng)：

• 二維碼未掃描：無(wú)操作
• 二維碼已失效：提示刷新二維碼
• 二維碼已成功：從服務(wù)端獲取PC token

獲取二維碼狀態(tài)，主要有三種方式：

輪詢

輪詢方式是指客戶端會(huì)每隔一段時(shí)間就主動(dòng)給服務(wù)端發(fā)送一次二維碼狀態(tài)的查詢請(qǐng)求。

輪詢

長(zhǎng)輪詢

長(zhǎng)輪詢是指客戶端主動(dòng)給服務(wù)端發(fā)送二維碼狀態(tài)的查詢請(qǐng)求，服務(wù)端會(huì)按情況對(duì)請(qǐng)求進(jìn)行阻塞，直至二維碼信息更新或超時(shí)。當(dāng)客戶端接收到返回結(jié)果后，若二維碼仍未被掃描，則會(huì)繼續(xù)發(fā)送查詢請(qǐng)求，直至狀態(tài)變化(已失效或已成功)。

長(zhǎng)輪詢

Websocket

Websocket是指前端在生成二維碼后，會(huì)與后端建立連接，一旦后端發(fā)現(xiàn)二維碼狀態(tài)變化，可直接通過(guò)建立的連接主動(dòng)推送信息給前端。

Websocket

總結(jié)

通過(guò)前面的分析，我們已經(jīng)知道了二維碼掃碼登錄的一些關(guān)鍵點(diǎn)，現(xiàn)在我們把這些點(diǎn)串起來(lái)，來(lái)看一看二維碼掃碼登錄的整體的實(shí)現(xiàn)流程。

以常用的輪詢方式獲取二維碼狀態(tài)為例：

掃碼登錄

• 訪問(wèn)PC端二維碼生成頁(yè)面，PC端請(qǐng)求服務(wù)端獲取二維碼ID
• 服務(wù)端生成相應(yīng)的二維碼ID，設(shè)置二維碼的過(guò)期時(shí)間，狀態(tài)等。
• PC獲取二維碼ID，生成相應(yīng)的二維碼。
• 手機(jī)端掃描二維碼，獲取二維碼ID。
• 手機(jī)端將手機(jī)端token和二維碼ID發(fā)送給服務(wù)端，確認(rèn)登錄。
• 服務(wù)端校驗(yàn)手機(jī)端token，根據(jù)手機(jī)端token和二維碼ID生成PC端token
• PC端通過(guò)輪詢方式請(qǐng)求服務(wù)端，通過(guò)二維碼ID獲取二維碼狀態(tài)，如果已成功，返回PC token，登錄成功。

好了，這樣我們一個(gè)掃描登錄的功能就設(shè)計(jì)完成了。

由于博主對(duì)移動(dòng)端的相關(guān)認(rèn)證機(jī)制了解不多，如有錯(cuò)漏，歡迎和博主溝通!

參考：

[1].三種方式實(shí)現(xiàn)掃碼登錄：https://forthe77.github.io/2019/05/23/qrcode-scan-login/

[2].二維碼掃碼登錄是什么原理 ?: https://juejin.cn/post/6940976355097985032

一個(gè)號(hào)稱能文能武，技術(shù)水平和外形匹配的Java程序員?；A(chǔ)、實(shí)戰(zhàn)、原理、面試，這里都有，關(guān)注我，我們一起進(jìn)步!