掃碼登錄實(shí)現(xiàn)原理

作者 | 精品唯居

來(lái)源 |?https://www.cnblogs.com/liyasong

需求介紹

首先，介紹下什么是掃碼登錄。現(xiàn)在，大部分同學(xué)手機(jī)上都裝有qq和淘寶，天貓等這一類的軟件。而開(kāi)發(fā)這些app的企業(yè)，都有他們相對(duì)應(yīng)的網(wǎng)站。為了讓用戶在使用他們的網(wǎng)站時(shí)，登錄更加方便和安全。這些企業(yè)提供了，?使用手機(jī)，掃一掃，就可以登錄的服務(wù)。網(wǎng)頁(yè)登錄時(shí)的效果如下：

有很多小伙伴可能會(huì)感到很神奇，網(wǎng)頁(yè)上只是顯示了個(gè)二維碼，它怎么就知道是哪個(gè)手機(jī)掃到了二維碼，并且進(jìn)行登錄的呢？而且，登錄完成以后，還能直接把用戶信息顯示給用戶，真的是很神奇啊。

原理解釋

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

接下來(lái)就是對(duì)于這個(gè)服務(wù)的詳細(xì)實(shí)現(xiàn)。首先，大概說(shuō)一下原理：用戶打開(kāi)網(wǎng)站的登錄頁(yè)面的時(shí)候，向?yàn)g覽器的服務(wù)器發(fā)送獲取登錄二維碼的請(qǐng)求。服務(wù)器收到請(qǐng)求后，隨機(jī)生成一個(gè)uuid，將這個(gè)id作為key值存入redis服務(wù)器，同時(shí)設(shè)置一個(gè)過(guò)期時(shí)間，再過(guò)期后，用戶登錄二維碼需要進(jìn)行刷新重新獲取。同時(shí)，將這個(gè)key值和本公司的驗(yàn)證字符串合在一起，通過(guò)二維碼生成接口，生成一個(gè)二維碼的圖片（二維碼生成，網(wǎng)上有很多現(xiàn)成的接口和源碼，這里不再介紹。）然后，將二維碼圖片和uuid一起返回給用戶瀏覽器。

瀏覽器拿到二維碼和uuid后，會(huì)每隔一秒向?yàn)g覽器發(fā)送一次，登錄是否成功的請(qǐng)求。請(qǐng)求中攜帶有uuid作為當(dāng)前頁(yè)面的標(biāo)識(shí)符。這里有的同學(xué)就會(huì)奇怪了，服務(wù)器只存了個(gè)uuid在redis中作為key值，怎么會(huì)有用戶的id信息呢？?

這里確實(shí)會(huì)有用戶的id信息，這個(gè)id信息是由手機(jī)服務(wù)器存入redis中的。具體操作如下：

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

話說(shuō)，瀏覽器拿到二維碼后，將二維碼展示到網(wǎng)頁(yè)上，并給用戶一個(gè)提示：請(qǐng)?zhí)统瞿氖謾C(jī)，打開(kāi)掃一掃進(jìn)行登錄。用戶拿出手機(jī)掃描二維碼，就可以得到一個(gè)驗(yàn)證信息和一個(gè)uuid（掃描二維碼獲取字符串的功能在網(wǎng)上同樣有很多demo，這里就不詳細(xì)介紹了）。由于手機(jī)端已經(jīng)進(jìn)行過(guò)了登錄，在訪問(wèn)手機(jī)端的服務(wù)器的時(shí)候，參數(shù)中都回?cái)y帶一個(gè)用戶的token，手機(jī)端服務(wù)器可以從中解析到用戶的userId（這里從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í)使登錄更加人性化）。用戶確認(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)椋謾C(jī)端的用戶信息，不一定是和瀏覽器端的用戶信息完全一致。

登錄原理圖如下：

- 推薦閱讀 -

《架構(gòu)師離職后，成為自由開(kāi)發(fā)者的第 100 天》

往期推薦

Chrome 插件分享！

中間件開(kāi)發(fā)如何操作？

MySQL：互聯(lián)網(wǎng)公司常用分庫(kù)分表方案匯總！

程序員一定要改的 10 個(gè)壞習(xí)慣！

CPU 基本知識(shí)

下方二維碼關(guān)注我

互聯(lián)網(wǎng)草根，堅(jiān)持分享技術(shù)、創(chuàng)業(yè)、產(chǎn)品等心得和總結(jié)~

點(diǎn)擊“閱讀原文”，領(lǐng)取 2020 年最新免費(fèi)技術(shù)資料大全

↓↓↓