前言

隨著wx的普及對開發同學來說一些業務場景會使用到“掃碼登錄”功能，特別是PC網頁端，在此之前沒有這方面的開發經歷，所以接到這個需求的時候還是有點慌的，最終通過查閱網上的資料以及老大的指導下實現了這個功能，目前已經投入使用，實現之后還是蠻興奮的。特此記錄一下實現的過程。

原理解析

掃碼登陸的實現需要手機端的服務器和Web端的服務器配合實現。大致分為以下幾步：

step1：網頁端請求登陸二維碼

要實現網頁版的掃碼登陸，用戶必須先要請求一個登陸的二維碼。Web端的服務器收到用戶申請登陸二維碼的請求后，會隨機生成一個uuid（這個uuid作為頁面的唯一標識符），并且會將這個uuid當做一個鍵值對的key存入后臺redis。存入Redis的這個鍵值對的value是什么我們待會再說。

需要注意的是存入Redis的鍵值對必須設置一個過期時間，不然的話拿著這個uuid登陸一次后就一直處于登陸狀態了。

當瀏覽器端拿到Web服務端返回的二維碼信息后，解析其中的uuid，并拿這個uuid不斷去后臺輪詢是否已經登陸成功。如果后臺已經登陸成功，Web端就自動跳轉到登陸成功頁面。不然的話會一直輪詢，直到二維碼失效（這里我們發現給二維碼設置有效時間真的很有必要，如果二維碼沒有有效時間的話，會不斷的輪詢后臺，給后臺造成很大的壓力）。

那么上面的關鍵點是Web端服務器是怎么判斷用戶是否已經掃碼登陸成功過的呢？ 請看下面的步驟。

step2：手機端將用戶id存入Redis

用戶請求到二維碼后，就開始拿出手機，打開相應的App掃描二維碼。掃描過程中手機會將uuid和手機端登陸后獲得的token信息一起提交到手機端服務器。

手機端服務器會先拿token信息判斷這個用戶是否合法，是否已經正常登陸。如果判斷已經正常登陸，那么會將這個用戶的userId和提交過來的uuid當做一個鍵值對（uudi-userId）存入Redis。這邊回答了步驟一種留下的問題。

簡單來講手機端做的工作就這么多。讓我們繼續回到Web端。

step3：web端輪詢成功

步驟一中講到：二維碼登陸頁會不停的輪詢是否登陸成功。這邊的依據就是Redis中存在uuid-userId鍵值對。如果這個鍵值對已經存在，說明手機端已經掃碼登陸過。

Web端服務器一旦判斷到手機端已經掃碼登陸過，就可以拿著userId進行登陸。并將必要的用戶信息和token信息返回Web前端。至此Web端登陸成功。

簡單總結

本文記錄了一個掃碼登陸的簡單版本，但是也能描述掃碼登陸的大致原理。實際開發過程中應該還是有許多細節需要考慮。比如安全問題等。具體的還是需要我們進行實戰了。

歡迎大家一起討論~

作者： 寫代碼的木公

出處：https://www.cnblogs.com/54chensongxia/p/12530268.html