最近接到一個(gè)需求，要求用手機(jī)掃碼實(shí)現(xiàn)用戶登錄，這是近幾年比較流行的登錄方式。這樣確實(shí)是實(shí)現(xiàn)用戶體驗(yàn)至上，操作簡(jiǎn)單，方便實(shí)用。拿到需求之后，我與后端大哥商量后，敲定了具體的實(shí)施方案。其實(shí)重要的還是要弄懂他實(shí)現(xiàn)的原理。

需求：用戶至上的體驗(yàn)效果，手機(jī)掃碼同步登錄狀態(tài)

很多企業(yè)在開發(fā)自己app的同時(shí)會(huì)推出網(wǎng)頁(yè)版，為了登錄操作更方便、更安全。企業(yè)會(huì)選用手機(jī)掃一掃，實(shí)現(xiàn)用戶登錄。神奇的是。為什么網(wǎng)頁(yè)只顯示一個(gè)二維碼就可以實(shí)現(xiàn)用戶登錄？這個(gè)二維碼是固定的嗎？怎么給用戶分配的id？怎么能把手機(jī)上的登錄信息同步到網(wǎng)頁(yè)上？
例如：淘寶、京東這些，如何做到掃一掃授權(quán)就能登錄成功，并實(shí)現(xiàn)用戶信息同步的。

下面我們介紹一下手機(jī)掃碼登錄的實(shí)現(xiàn)原理，用到的服務(wù)器要有2臺(tái)，手機(jī)端服務(wù)器和網(wǎng)頁(yè)端服務(wù)器不是同一臺(tái)服務(wù)器。

網(wǎng)頁(yè)端與服務(wù)器

用戶打開一個(gè)網(wǎng)站的登錄頁(yè)面==>此時(shí)瀏覽器會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，這個(gè)請(qǐng)求用來(lái)獲取登錄的二維碼==>服務(wù)器收到請(qǐng)求后,隨機(jī)生成一個(gè)uuid，并將這個(gè)uuid作為key值存儲(chǔ)在redis中，同時(shí)設(shè)置一個(gè)過期時(shí)間，過期后，用戶的界面就會(huì)顯示“需要重新獲取二維碼”。同時(shí)也將這個(gè)key值與本公司的驗(yàn)證字符串綁定在一起，然后將這些生成一個(gè)隨機(jī)的二維碼（網(wǎng)上有很多二維碼生成器的接口和源碼，可以直接調(diào)用）==>將二維碼和用戶的uuid一起返回給瀏覽器。

前端開發(fā)獲取到這個(gè)這個(gè)二維碼和uuid==>每隔一秒向?yàn)g覽器發(fā)送一次登錄是否成功的請(qǐng)求，請(qǐng)求中攜帶有uuid作為當(dāng)前頁(yè)面的標(biāo)識(shí)符。

這里有一個(gè)問題：服務(wù)器只存了一個(gè)隨機(jī)的uuid在redis中，那么用戶的id的信息怎么會(huì)顯示出來(lái)。其實(shí)這個(gè)用戶的id信息是由手機(jī)服務(wù)器存在redis中的。這也就為什么要倆臺(tái)服務(wù)器的原因。

手機(jī)端與服務(wù)器

剛剛我們說(shuō)了，瀏覽拿到二維碼并且展示在頁(yè)面上。這個(gè)時(shí)候前端可以給定一個(gè)提示信息。請(qǐng)用手機(jī)掃一掃登錄。用戶拿到手機(jī)掃描二維碼，就可以得到一個(gè)驗(yàn)證信息和一個(gè)uuid(掃描二維碼獲取字符串的這個(gè)案例網(wǎng)上也能找到很多)，由于手機(jī)端已經(jīng)進(jìn)行過登錄操作，后端也記錄了用戶信息，所以在訪問手機(jī)端服務(wù)器的時(shí)候，參數(shù)中已經(jīng)攜帶用戶的token，手機(jī)端服務(wù)器就可以解析用戶的uesrid（注意：這里從token中取值而不是手機(jī)端直接傳userid是為了安全，直接傳userid可能會(huì)被截獲和修改，token是加密的，被修改的風(fēng)險(xiǎn)會(huì)小很多）。手機(jī)端將解析到的數(shù)據(jù)和用戶token一起作為參數(shù)，向服務(wù)器發(fā)送驗(yàn)證登錄請(qǐng)求（這里的服務(wù)器是手機(jī)服務(wù)器，手機(jī)端的服務(wù)器跟網(wǎng)頁(yè)端服務(wù)器不是同一臺(tái)服務(wù)器）。服務(wù)器收到請(qǐng)求后，首先對(duì)比參數(shù)中的驗(yàn)證信息，確定是否為用戶登錄請(qǐng)求接口。如果是，返回一個(gè)確認(rèn)信息給手機(jī)端。

手機(jī)端收到返回后，將登錄確認(rèn)框顯示給用戶（防止用戶誤操作，同時(shí)使登錄更加人性化）。用戶在手機(jī)上確認(rèn)是進(jìn)行的登錄操作后，手機(jī)再次發(fā)送請(qǐng)求。服務(wù)器拿到uuId和userId后，將用戶的userid作為value值存入redis中以u(píng)uid作為key的鍵值對(duì)中。

登錄成功

然后，瀏覽器再次發(fā)送請(qǐng)求的時(shí)候，瀏覽器端的服務(wù)器就可以得到一個(gè)用戶Id，并調(diào)用登錄的方法，生成一個(gè)瀏覽器端的token，然后瀏覽器再次發(fā)送請(qǐng)求的時(shí)候，將用戶信息返回給瀏覽器，登錄成功。這里存儲(chǔ)用戶id而不是直接存儲(chǔ)用戶信息是因?yàn)?#xff0c;手機(jī)端的用戶信息，不一定是和瀏覽器端的用戶信息完全一致。

如果你是前端小可愛，那么只需發(fā)送請(qǐng)求，接收消息就可以。重要的邏輯部分和解析工作還是由后端大佬們挑大梁，希望可以幫助到大家。

總結(jié)

以上是生活随笔為你收集整理的手机扫码登录实现原理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。