我一直有用微信讀書閱讀的習慣，最近發現微信閱讀還有網頁版，登陸微信閱讀的網頁版，需要我們用App掃碼進行登陸，如下面的界面所示：
使用你的微信閱讀App掃描完上面的二維碼并點擊確認登陸后，網頁版就能自動登陸，登陸后會展示你的閱讀記錄，書架資訊等，
我突然很好奇，這個掃碼登陸到底是怎么實作的，所以就去網上查了下相關的博客資料，這邊記錄下其中的一種比較簡單好理解的實作方案，
實作細節
掃碼登陸的實作需要手機端的服務器和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.uj5u.com/ruanti/8450.html
標籤：架構設計