前言
隨著wx的普及對(duì)開發(fā)同學(xué)來(lái)說(shuō)一些業(yè)務(wù)場(chǎng)景會(huì)使用到“掃碼登錄”功能，特別是PC網(wǎng)頁(yè)端，在此之前沒(méi)有這方面的開發(fā)經(jīng)歷，所以接到這個(gè)需求的時(shí)候還是有點(diǎn)慌的，最終通過(guò)查閱網(wǎng)上的資料以及老大的指導(dǎo)下實(shí)現(xiàn)了這個(gè)功能，目前已經(jīng)投入使用，實(shí)現(xiàn)之后還是蠻興奮的。特此記錄一下實(shí)現(xiàn)的過(guò)程。
原理解析
掃碼登陸的實(shí)現(xiàn)需要手機(jī)端的服務(wù)器和Web端的服務(wù)器配合實(shí)現(xiàn)。大致分為以下幾步：
step1：網(wǎng)頁(yè)端請(qǐng)求登陸二維碼
要實(shí)現(xiàn)網(wǎng)頁(yè)版的掃碼登陸，用戶必須先要請(qǐng)求一個(gè)登陸的二維碼。Web端的服務(wù)器收到用戶申請(qǐng)登陸二維碼的請(qǐng)求后，會(huì)隨機(jī)生成一個(gè)uuid（這個(gè)uuid作為頁(yè)面的唯一標(biāo)識(shí)符），并且會(huì)將這個(gè)uuid當(dāng)做一個(gè)鍵值對(duì)的key存入后臺(tái)redis。存入Redis的這個(gè)鍵值對(duì)的value是什么我們待會(huì)再說(shuō)。
需要注意的是存入Redis的鍵值對(duì)必須設(shè)置一個(gè)過(guò)期時(shí)間，不然的話拿著這個(gè)uuid登陸一次后就一直處于登陸狀態(tài)了。
當(dāng)瀏覽器端拿到Web服務(wù)端返回的二維碼信息后，解析其中的uuid，并拿這個(gè)uuid不斷去后臺(tái)輪詢是否已經(jīng)登陸成功。如果后臺(tái)已經(jīng)登陸成功，Web端就自動(dòng)跳轉(zhuǎn)到登陸成功頁(yè)面。不然的話會(huì)一直輪詢，直到二維碼失效（這里我們發(fā)現(xiàn)給二維碼設(shè)置有效時(shí)間真的很有必要，如果二維碼沒(méi)有有效時(shí)間的話，會(huì)不斷的輪詢后臺(tái)，給后臺(tái)造成很大的壓力）。
那么上面的關(guān)鍵點(diǎn)是Web端服務(wù)器是怎么判斷用戶是否已經(jīng)掃碼登陸成功過(guò)的呢？ 請(qǐng)看下面的步驟。
step2：手機(jī)端將用戶id存入Redis
用戶請(qǐng)求到二維碼后，就開始拿出手機(jī)，打開相應(yīng)的App掃描二維碼。掃描過(guò)程中手機(jī)會(huì)將uuid和手機(jī)端登陸后獲得的token信息一起提交到手機(jī)端服務(wù)器。
手機(jī)端服務(wù)器會(huì)先拿token信息判斷這個(gè)用戶是否合法，是否已經(jīng)正常登陸。如果判斷已經(jīng)正常登陸，那么會(huì)將這個(gè)用戶的userId和提交過(guò)來(lái)的uuid當(dāng)做一個(gè)鍵值對(duì)（uudi-userId）存入Redis。這邊回答了步驟一種留下的問(wèn)題。
簡(jiǎn)單來(lái)講手機(jī)端做的工作就這么多。讓我們繼續(xù)回到Web端。
step3：web端輪詢成功
步驟一中講到：二維碼登陸頁(yè)會(huì)不停的輪詢是否登陸成功。這邊的依據(jù)就是Redis中存在uuid-userId鍵值對(duì)。如果這個(gè)鍵值對(duì)已經(jīng)存在，說(shuō)明手機(jī)端已經(jīng)掃碼登陸過(guò)。
Web端服務(wù)器一旦判斷到手機(jī)端已經(jīng)掃碼登陸過(guò)，就可以拿著userId進(jìn)行登陸。并將必要的用戶信息和token信息返回Web前端。至此Web端登陸成功。
簡(jiǎn)單總結(jié)
本文記錄了一個(gè)掃碼登陸的簡(jiǎn)單版本，但是也能描述掃碼登陸的大致原理。實(shí)際開發(fā)過(guò)程中應(yīng)該還是有許多細(xì)節(jié)需要考慮。比如安全問(wèn)題等。具體的還是需要我們進(jìn)行實(shí)戰(zhàn)了。
歡迎大家一起討論~
作者： 寫代碼的木公
出處：https://www.cnblogs.com/54chensongxia/p/12530268.html
