我一直有用微信讀書閱讀的習慣,最近發現微信閱讀還有網頁版。登錄微信閱讀的網頁版,須要咱們用App掃碼進行登錄。以下面的界面所示:前端
使用你的微信閱讀App掃描完上面的二維碼並點擊確認登錄後,網頁版就能自動登錄。登錄後會展現你的閱讀記錄,書架信息等。web
我忽然很好奇,這個掃碼登錄究竟是怎麼實現的,因此就去網上查了下相關的博客資料。這邊記錄下其中的一種比較簡單好理解的實現方案。瀏覽器
掃碼登錄的實現須要手機端的服務器和Web端的服務器配合實現。大體分爲如下幾步:安全
step1:網頁端請求登錄二維碼服務器
直接先上圖吧微信
要實現網頁版的掃碼登錄,用戶必須先要請求一個登錄的二維碼。Web端的服務器收到用戶申請登錄二維碼的請求後,會隨機生成一個uuid(這個uuid做爲頁面的惟一標識符),而且會將這個uuid當作一個鍵值對的key存入後臺Redis。
存入Redis的這個鍵值對的value是什麼咱們待會再說。ui
須要注意的是存入Redis的鍵值對必須設置一個過時時間,否則的話拿着這個uuid登錄一次後就一直處於登錄狀態了。blog
當瀏覽器端拿到Web服務端返回的二維碼信息後,解析其中的uuid,並拿這個uuid不斷去後臺輪詢是否已經登錄成功。若是後臺已經登錄成功,Web端就自動跳轉到登錄成功頁面。否則的話會一直輪詢,直到二維碼失效(這裏咱們發現給二維碼設置有效時間
真的頗有必要,若是二維碼沒有有效時間的話,會不斷的輪詢後臺,給後臺形成很大的壓力)。token
那麼上面的關鍵點是Web端服務器是怎麼判斷用戶是否已經掃碼登錄成功過的呢? 請看下面的步驟。開發
step2:手機端將用戶id存入Redis
用戶請求到二維碼後,就開始拿出手機,打開相應的App掃描二維碼。掃描過程當中手機會將uuid和手機端登錄後得到的token信息一塊兒提交到手機端服務器。
手機端服務器會先拿token信息判斷這個用戶是否合法,是否已經正常登錄。若是判斷已經正常登錄,那麼會將這個用戶的userId和提交過來的uuid當作一個鍵值對(uudi-userId)存入Redis。這邊回答了步驟一種留下的問題。
簡單來說手機端作的工做就這麼多。讓咱們繼續回到Web端。
step3:web端輪詢成功
步驟一中講到:二維碼登錄頁會不停的輪詢是否登錄成功。這邊的依據就是Redis中存在uuid-userId鍵值對。若是這個鍵值對已經存在,說明手機端已經掃碼登錄過。
Web端服務器一旦判斷到手機端已經掃碼登錄過,就能夠拿着userId進行登錄。並將必要的用戶信息和token信息返回Web前端。至此Web端登錄成功。
本文記錄了一個掃碼登錄的簡單版本,可是也能描述掃碼登錄的大體原理。實際開發過程當中應該仍是有許多細節須要考慮。好比安全問題等。具體的仍是須要咱們進行實戰了。
歡迎你們一塊兒討論~