現(xiàn)在我們很多的應用（如微信公眾號、B站網(wǎng)頁等）都是支持手機掃碼登錄，在網(wǎng)頁上打開應用后就會彈出使用手機掃碼登錄的頁面如下：

    此時用戶只需使用微信（微信已經(jīng)是登錄狀態(tài)的，不然是掃描不了的）掃一下圖中的二維碼，隨后手機上就出現(xiàn)了讓用戶點擊確認登錄的按鈕，當用戶點擊確認之后就會自動登錄到應用。整個流程如下圖所示：

    那么手機掃碼登錄是如何實現(xiàn)的呢？下面分析手機掃碼登錄的原理。

1、手機登錄和PC登錄的原理

1.1 手機登錄原理

（a）用戶在手機客戶端上輸入賬號和密碼并且攜帶設備信息一起請求服務器

（b）服務器接收到請求后，驗證用戶的賬號和密碼是否正確，如果不正確則給予異常的提示；如果正確就生成token給客戶端

（c）手機客戶端通過攜帶token和設備的信息的方式請求服務器，服務器驗證token是否有效，token有效的情況下驗證是否為之前申請登錄的客戶端設備，如果不是之前申請登錄的設備也不允許訪問服務器

    手機登錄中需要攜帶設備的信息是為了防止token泄露后，攻擊者使用其他的設備攜帶當前的token訪問服務器資源。

1.2 PC登錄原理

（a）PC端輸入賬號和密碼請求登錄服務器

（b）服務器接收到請求后，驗證用戶的賬號和密碼是否正確，如果不正確則給予異常的提示；如果正確就生成token給客戶端

（c）PC端攜帶token請求訪問服務器，服務器驗證token是否有效，token有效可以處理請求并返回響應

2、手機掃碼登錄的原理

    了解了手機登錄和PC端登錄的原理后，理解手機掃碼登錄的原理就很簡單了，手機掃碼登錄的實質(zhì)是通過已經(jīng)在APP上登錄的用戶幫助PC端的應用到服務器上申請pc-token，拿到pc-token后就和PC端登錄服務器的原理一樣了。手機掃碼登錄的完整流程如下：

2.1 生成二維碼

    用戶打開PC端的應用后PC端會向服務器申請二維碼id，服務器此時會生成一個唯一的二維碼id，然后服務器將二維碼id、二維碼過期時間等信息存放Redis中并且返回二維碼id給PC端。

    PC端獲取到二維碼id后利用其生成一個用戶可掃描的二維碼，當然PC端需要監(jiān)聽到二維碼的狀態(tài)變更信息（服務器上對二維碼的變更操作需要實時的通知PC端）。

2.2 用戶掃描二維碼

    生成二維碼之后，用戶使用手機上已登錄的APP掃描這個二維碼，掃描后會發(fā)送一個攜帶手機token、設備信息和二維碼id的請求訪問服務器。

    當服務器接收到登錄請求后會驗證手機token的有效性，如果手機token是有效的并且token也是當前的設備申請的，此時服務器會生成一個臨時的token并修改二維碼的狀態(tài)為等待用戶確認登錄的狀態(tài)，然后返回token信息給手機客戶端，手機客戶端此時會彈出用戶確認的按鈕。與其同時服務器會通知客戶端當前的二維碼狀態(tài)處于等待用戶確認登錄的狀態(tài)。

2.3 用戶手機上確認登錄

    用戶在手機上點擊確認登錄后會發(fā)送一個攜帶臨時token的請求到服務器上，服務器驗證臨時token是否有效，如果臨時token是有效的，服務器就會生成一個pc-token以及修改二維碼的狀態(tài)為登錄狀態(tài)的一系列操作。服務器將pc-token和二維碼狀態(tài)等信息緩存到Redis中，然后服務器還要推送pc-token和二維碼變更信息到PC端，PC端感知到二維碼狀態(tài)變更之后就隱藏二維碼和跳轉(zhuǎn)到主頁中。

    通過以上的步驟就是實現(xiàn)了一套完整的手機掃碼登錄流程，在這個過程中每次的二維碼信息變更都是服務器推送給PC客戶端的，那么服務器如何做到推送數(shù)據(jù)給PC客戶端呢？這里實現(xiàn)服務器和客戶端通信的方案有很多種，如常見有WebSocket、SSE和客戶端輪詢等方案，龍蝦之前也有過分享服務端和客戶端實時通信的文章，有興趣的朋友可以點擊看下：整理常見的實時消息推送方案

 總結(jié)：

（1）手機掃碼登錄中二維碼的狀態(tài)變更涉及到服務器和客戶端之間的通信問題，有多種實現(xiàn)方案；

（2）手機掃碼登錄中核心是已在APP上登錄的用戶使用APP幫助PC客戶端拿到服務器頒發(fā)的pc-token來實現(xiàn)PC端的登錄。