我一直有用微信讀書閱讀的習(xí)慣,最近發(fā)現(xiàn)微信閱讀還有網(wǎng)頁版。登陸微信閱讀的網(wǎng)頁版,需要我們用App掃碼進(jìn)行登陸。如下面的界面所示:
使用你的微信閱讀App掃描完上面的二維碼并點(diǎn)擊確認(rèn)登陸后,網(wǎng)頁版就能自動(dòng)登陸。登陸后會(huì)展示你的閱讀記錄,書架信息等。
我突然很好奇,這個(gè)掃碼登陸到底是怎么實(shí)現(xiàn)的,所以就去網(wǎng)上查了下相關(guān)的博客資料。這邊記錄下其中的一種比較簡單好理解的實(shí)現(xiàn)方案。
實(shí)現(xiàn)細(xì)節(jié)
掃碼登陸的實(shí)現(xiàn)需要手機(jī)端的服務(wù)器和Web端的服務(wù)器配合實(shí)現(xiàn)。大致分為以下幾步:
step1:網(wǎng)頁端請求登陸二維碼
直接先上圖吧
要實(shí)現(xiàn)網(wǎng)頁版的掃碼登陸,用戶必須先要請求一個(gè)登陸的二維碼。Web端的服務(wù)器收到用戶申請登陸二維碼的請求后,會(huì)隨機(jī)生成一個(gè)uuid(這個(gè)uuid作為頁面的唯一標(biāo)識符),并且會(huì)將這個(gè)uuid當(dāng)做一個(gè)鍵值對的key存入后臺Redis。
存入Redis的這個(gè)鍵值對的value是什么我們待會(huì)再說。
需要注意的是存入Redis的鍵值對必須設(shè)置一個(gè)過期時(shí)間,不然的話拿著這個(gè)uuid登陸一次后就一直處于登陸狀態(tài)了。
當(dāng)瀏覽器端拿到Web服務(wù)端返回的二維碼信息后,解析其中的uuid,并拿這個(gè)uuid不斷去后臺輪詢是否已經(jīng)登陸成功。如果后臺已經(jīng)登陸成功,Web端就自動(dòng)跳轉(zhuǎn)到登陸成功頁面。不然的話會(huì)一直輪詢,直到二維碼失效(這里我們發(fā)現(xiàn)給二維碼設(shè)置有效時(shí)間
真的很有必要,如果二維碼沒有有效時(shí)間的話,會(huì)不斷的輪詢后臺,給后臺造成很大的壓力)。
那么上面的關(guān)鍵點(diǎn)是Web端服務(wù)器是怎么判斷用戶是否已經(jīng)掃碼登陸成功過的呢? 請看下面的步驟。
step2:手機(jī)端將用戶id存入Redis
用戶請求到二維碼后,就開始拿出手機(jī),打開相應(yīng)的App掃描二維碼。掃描過程中手機(jī)會(huì)將uuid和手機(jī)端登陸后獲得的token信息一起提交到手機(jī)端服務(wù)器。
手機(jī)端服務(wù)器會(huì)先拿token信息判斷這個(gè)用戶是否合法,是否已經(jīng)正常登陸。如果判斷已經(jīng)正常登陸,那么會(huì)將這個(gè)用戶的userId和提交過來的uuid當(dāng)做一個(gè)鍵值對(uudi-userId)存入Redis。這邊回答了步驟一種留下的問題。
簡單來講手機(jī)端做的工作就這么多。讓我們繼續(xù)回到Web端。
step3:web端輪詢成功
步驟一中講到:二維碼登陸頁會(huì)不停的輪詢是否登陸成功。這邊的依據(jù)就是Redis中存在uuid-userId鍵值對。如果這個(gè)鍵值對已經(jīng)存在,說明手機(jī)端已經(jīng)掃碼登陸過。
Web端服務(wù)器一旦判斷到手機(jī)端已經(jīng)掃碼登陸過,就可以拿著userId進(jìn)行登陸。并將必要的用戶信息和token信息返回Web前端。至此Web端登陸成功。
簡單總結(jié)
本文記錄了一個(gè)掃碼登陸的簡單版本,但是也能描述掃碼登陸的大致原理。實(shí)際開發(fā)過程中應(yīng)該還是有許多細(xì)節(jié)需要考慮。比如安全問題等。具體的還是需要我們進(jìn)行實(shí)戰(zhàn)了。
歡迎大家一起討論~
熱門工具 換一換