真實面試小場景：
經過八股和演算法的交鋒，老三鬆了口氣，都hold住了。只見面試官微微一笑，“其實，我真正想問的是……你覺得掃碼登入應該怎麼實現。”
老三：“啊……這個，哦……那個，這個就這麼，然後……額……嗯……”
面試官：“瞭解了，回去等通知吧。”
完……
好了，鋪墊結束，進入我們今天的主題，掃碼登入功能該如何實現？
掃碼登入場景
掃碼登入場景想必我們都不陌生——很多PC端的網站都提供了掃碼登入的功能，無需在網頁上輸入任何賬號和密碼，只需要通過手機上的APP，如微信、淘寶、QQ等等，使用掃描功能，掃描網頁上的二維碼，確認登入，就可以完成網頁端登入。
掃碼登入分析
我們來分析一下，掃碼登入，其實涉及到三種角色，需要解決兩個問題。
三種角色
很明顯，掃碼登入當中涉及到的三種角色：PC端、手機端、服務端。
相關的設計都要圍繞這三端來展開，具體的設計其實就是每一端應該完成什麼功能？應該怎麼實現？端和端應該如何互動？
兩個問題
掃碼登入本質上是一種特殊的登入認證方式，我們面對的是兩個問題
手機端如何完成認證PC端如何完成登入
如果用普通的賬號密碼方式登入認證，PC端通過賬號密碼完成認證，然後服務端給PC端同步返回token key之類的標識，PC端再次請求服務端，需要攜帶token key，用於標識和證明自己登入的狀態。
服務端響應的時候，需要對token key進行校驗，通過則正常響應；校驗不通過，認證失敗；或者token過期，PC端需要再次登入認證，獲取新的token key。
現在換成了掃碼登入：
- 認證不是通過賬號密碼了，而是由手機端掃碼來完成
- PC端沒法同步獲取認證成功之後的憑據，必須用某種方式來讓PC端獲取認證的憑據。
掃碼登入實現
手機端如何完成認證
二維碼怎麼生成
二維碼和超市裡的條形碼類似，超市的條形碼實際是一串數字，上面儲存了商品的序列號。
二維碼的內容就比較自由，裡面不止可以存數字，還可以存任何的字串。我們可以認為，它就是字元的另外一種表現形式。
下面我通過一個網站把文字轉成了二維碼：
所以，我們手機掃碼這個過程，其實是對二維碼的解碼，獲取二維碼中包含的資料。
那麼二維碼怎麼生成呢？
首先，二維碼是展示在我們的PC端，所以生成這個操作應該由PC端去請求服務端，獲取相應的資料，再由PC端生成這個二維碼。
二維碼包含什麼呢？
二維碼在我們這個場景裡面是一個重要的媒介，服務端必須給這個資料生成惟一的標識作為二維碼ID，同時還應該設定過期的時間。PC端根據二維碼ID等資料生成二維碼。
同時，服務端也應該儲存二維碼的一些狀態：未掃描、已成功、已失效。
APP認證機制
我們還得認識一下基於APP的移動網際網路認證機制。
首先，手機端一般是不會儲存登入密碼的，我們我們發現，只有裝載APP，第一次登入的時候，才需要進行基於賬號密碼的登入，之後即使這個清理掉這個應用程式，甚至手機重啟，都是不需要再次輸入賬號密碼的，它可以自動登入。
這背後有一套基於token的認證機制，和PC有些類似，但又有一些不同。
- APP登入認證的時候除了賬號密碼，還有裝置資訊
- 賬號密碼校驗通過，服務端會把賬號與裝置進行一個繫結，進行持久化的儲存，包含了賬號ID，裝置ID，裝置型別等等
- APP每次請求除了攜帶token key，還需要攜帶裝置資訊。
因為移動端的裝置具備唯一性，可以為每個客戶端生成專屬token，這個token也不用過期，所以這就是我們可以一次登入，長久使用的原理。
手機掃碼幹了什麼
那這下就清楚了，我們手機掃碼幹了兩件事：
掃描二維碼：識別PC端展示的二維碼，獲取二維碼ID
確認登入：手機端通過帶認證資訊(token key、裝置資訊)、二維碼資訊（二維碼ID）請求服務端，完成認證過程，確認PC端的登入。
ps: 關於手機掃碼和確認，不是重點，所以這裡進行了簡化，一種說法是掃碼時同時向服務端申請一次性臨時token，確認登入的時候攜帶這個臨時token來訪問服務端。
PC端如何完成登入
接下來到我們的重頭戲了，手機端完成了它的工作，我們服務端的登入怎麼進入登入狀態呢？
我們前面講了，PC端通過token來標識登入狀態。那麼手機端掃碼確認之後，我們的服務端就應該給PC生成相應的token。
那麼，這個PC端又如何獲取它所需的token key，來完成登入呢？
PC端可以通過獲取二維碼的狀態來進行相應的響應：
- 二維碼
未掃描：無操作 - 二維碼
已失效：提示重新整理二維碼 - 二維碼
已成功：從服務端獲取PC token
獲取二維碼狀態，主要有三種方式：
輪詢
輪詢方式是指客戶端會每隔一段時間就主動給服務端傳送一次二維碼狀態的查詢請求。
長輪詢
長輪詢是指客戶端主動給服務端傳送二維碼狀態的查詢請求，服務端會按情況對請求進行阻塞，直至二維碼資訊更新或超時。當客戶端接收到返回結果後，若二維碼仍未被掃描，則會繼續傳送查詢請求，直至狀態變化（已失效或已成功）。
Websocket
Websocket是指前端在生成二維碼後，會與後端建立連線，一旦後端發現二維碼狀態變化，可直接通過建立的連線主動推送資訊給前端。
總結
通過前面的分析，我們已經知道了二維碼掃碼登入的一些關鍵點，現在我們把這些點串起來，來看一看二維碼掃碼登入的整體的實現流程。
以常用的輪詢方式獲取二維碼狀態為例：
- 訪問PC端二維碼生成頁面，PC端請求服務端獲取
二維碼ID - 服務端生成相應的
二維碼ID，設定二維碼的過期時間，狀態等。 - PC獲取
二維碼ID，生成相應的二維碼。 - 手機端掃描二維碼，獲取
二維碼ID。 - 手機端將
手機端token和二維碼ID傳送給服務端，確認登入。 - 服務端校驗
手機端token，根據手機端token和二維碼ID生成PC端token - PC端通過輪詢方式請求服務端，通過
二維碼ID獲取二維碼狀態，如果已成功，返回PC token，登入成功。
好了，這樣我們一個掃描登入的功能就設計完成了。
由於博主對移動端的相關認證機制瞭解不多，如有錯漏，歡迎和博主溝通！
參考：
[1].三種方式實現掃碼登入： https://forthe77.github.io/2019/05/23/qrcode-scan-login/
[2].二維碼掃碼登入是什麼原理 ？: https://juejin.cn/post/6940976355097985032