[[431128]]

真實面試小場景：

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

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

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

完……

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

掃碼登錄場景

掃碼登錄場景想必我們都不陌生——很多PC端的網站都提供了掃碼登錄的功能，無需在網頁上輸入任何賬號和密碼，只需要通過手機上的APP，如微信、淘寶、QQ等等，使用掃描功能，掃描網頁上的二維碼，確認登錄，就可以完成網頁端登錄。

掃碼登錄QQ郵箱

掃碼登錄分析

我們來分析一下，掃碼登錄，其實涉及到三種角色，需要解決兩個問題。

三種角色

很明顯，掃碼登錄當中涉及到的三種角色：PC端、手機端、服務端。

三端

相關的設計都要圍繞這三端來展開，具體的設計其實就是每一端應該完成什么功能?應該怎么實現(xiàn)?端和端應該如何交互?

兩個問題

掃碼登錄本質上是一種特殊的登錄認證方式，我們面對的是兩個問題

• 手機端如何完成認證
• PC端如何完成登錄

如果用普通的賬號密碼方式登錄認證，PC端通過賬號密碼完成認證，然后服務端給PC端同步返回token key之類的標識，PC端再次請求服務端，需要攜帶token key，用于標識和證明自己登錄的狀態(tài)。

服務端響應的時候，需要對token key進行校驗，通過則正常響應;校驗不通過，認證失敗;或者token過期，PC端需要再次登錄認證，獲取新的token key。

賬號/密碼登錄過程

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

• 認證不是通過賬號密碼了，而是由手機端掃碼來完成
• PC端沒法同步獲取認證成功之后的憑據，必須用某種方式來讓PC端獲取認證的憑據。

掃碼登錄實現(xiàn)

手機端如何完成認證

二維碼怎么生成

二維碼和超市里的條形碼類似，超市的條形碼實際是一串數字，上面存儲了商品的序列號。

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

下面我通過一個網站把文字轉成了二維碼：

文字轉二維碼

所以，我們手機掃碼這個過程，其實是對二維碼的解碼，獲取二維碼中包含的數據。

那么二維碼怎么生成呢?

首先，二維碼是展示在我們的PC端，所以生成這個操作應該由PC端去請求服務端，獲取相應的數據，再由PC端生成這個二維碼。

二維碼包含什么呢?

二維碼在我們這個場景里面是一個重要的媒介，服務端必須給這個數據生成惟一的標識作為二維碼ID，同時還應該設置過期的時間。PC端根據二維碼ID等數據生成二維碼。

二維碼生成

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

APP認證機制

我們還得認識一下基于APP的移動互聯(lián)網認證機制。

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

這背后有一套基于token的認證機制，和PC有些類似，但又有一些不同。

APP端登錄認證

• APP登錄認證的時候除了賬號密碼，還有設備信息
• 賬號密碼校驗通過，服務端會把賬號與設備進行一個綁定，進行持久化的保存，包含了賬號ID，設備ID，設備類型等等
• APP每次請求除了攜帶token key，還需要攜帶設備信息。

因為移動端的設備具備唯一性，可以為每個客戶端生成專屬token，這個token也不用過期，所以這就是我們可以一次登錄，長久使用的原理。

手機掃碼干了什么

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

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

掃描

• 確認登錄：手機端通過帶認證信息(token key、設備信息)、二維碼信息(二維碼ID)請求服務端，完成認證過程，確認PC端的登錄。

確認登錄

ps: 關于手機掃碼和確認，不是重點，所以這里進行了簡化，一種說法是掃碼時同時向服務端申請一次性臨時token，確認登錄的時候攜帶這個臨時token來訪問服務端。

PC端如何完成登錄

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

我們前面講了，PC端通過token來標識登錄狀態(tài)。那么手機端掃碼確認之后，我們的服務端就應該給PC生成相應的token。

那么，這個PC端又如何獲取它所需的token key，來完成登錄呢?

如何獲取PC token

PC端可以通過獲取二維碼的狀態(tài)來進行相應的響應：

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

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

輪詢

輪詢方式是指客戶端會每隔一段時間就主動給服務端發(fā)送一次二維碼狀態(tài)的查詢請求。

輪詢

長輪詢

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

長輪詢

Websocket

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

Websocket

總結

通過前面的分析，我們已經知道了二維碼掃碼登錄的一些關鍵點，現(xiàn)在我們把這些點串起來，來看一看二維碼掃碼登錄的整體的實現(xiàn)流程。

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

掃碼登錄

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

好了，這樣我們一個掃描登錄的功能就設計完成了。

由于博主對移動端的相關認證機制了解不多，如有錯漏，歡迎和博主溝通!

參考：

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

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

一個號稱能文能武，技術水平和外形匹配的Java程序員?；A、實戰(zhàn)、原理、面試，這里都有，關注我，我們一起進步!