面試官：如何實作掃碼登入功能？

真實面試小場景：

經過八股和算法的交鋒，老三松了口氣，都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是指前端在生成二維碼後，會與後端建立連接配接，一旦後端發現二維碼狀态變化，可直接通過建立的連接配接主動推送資訊給前端。

總結

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

以常用的輪詢方式擷取二維碼狀态為例：

1. 通路PC端二維碼生成頁面，PC端請求服務端擷取

   二維碼ID

2. 服務端生成相應的

   二維碼ID

   ，設定二維碼的過期時間，狀态等。
3. PC擷取

   二維碼ID

   ，生成相應的二維碼。
4. 手機端掃描二維碼，擷取

   二維碼ID

5. 手機端将

   手機端token

   和

   二維碼ID

   發送給服務端，确認登入。
6. 服務端校驗

   手機端token

   ，根據

   手機端token

   二維碼ID

   生成

   PC端token

7. PC端通過輪詢方式請求服務端，通過

   二維碼ID

   擷取二維碼狀态，如果已成功，傳回

   PC token

   ，登入成功。

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