瀏覽器的掃碼登錄實現(xiàn)原理是什么

瀏覽器的掃碼登錄實現(xiàn)原理是什么，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

需求介紹

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

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

原理解釋

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

接下來就是對于這個服務(wù)的詳細(xì)實現(xiàn)。首先，大概說一下原理：用戶打開網(wǎng)站的登錄頁面的時候，向瀏覽器的服務(wù)器發(fā)送獲取登錄二維碼的請求。

服務(wù)器收到請求后，隨機(jī)生成一個uuid，將這個id作為key值存入redis服務(wù)器，同時設(shè)置一個過期時間，再過期后，用戶登錄二維碼需要進(jìn)行刷新重新獲取。

同時，將這個key值和本公司的驗證字符串合在一起，通過二維碼生成接口，生成一個二維碼的圖片（二維碼生成，網(wǎng)上有很多現(xiàn)成的接口和源碼，這里不再介紹。）然后，將二維碼圖片和uuid一起返回給用戶瀏覽器。

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

這里確實會有用戶的id信息，這個id信息是由手機(jī)服務(wù)器存入redis中的。

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

話說，瀏覽器拿到二維碼后，將二維碼展示到網(wǎng)頁上，并給用戶一個提示：請?zhí)统瞿氖謾C(jī)，打開掃一掃進(jìn)行登錄。用戶拿出手機(jī)掃描二維碼，就可以得到一個驗證信息和一個uuid（掃描二維碼獲取字符串的功能在網(wǎng)上同樣有很多demo，這里就不詳細(xì)介紹了）。

由于手機(jī)端已經(jīng)進(jìn)行過了登錄，在訪問手機(jī)端的服務(wù)器的時候，參數(shù)中都回攜帶一個用戶的token，手機(jī)端服務(wù)器可以從中解析到用戶的userId（這里從token中取值而不是手機(jī)端直接傳userid是為了安全，直接傳userid可能會被截獲和修改，token是加密的，被修改的風(fēng)險會小很多）。

手機(jī)端將解析到的數(shù)據(jù)和用戶token一起作為參數(shù)，向服務(wù)器發(fā)送驗證登錄請求（這里的服務(wù)器是手機(jī)服務(wù)器，手機(jī)端的服務(wù)器跟網(wǎng)頁端服務(wù)器不是同一臺服務(wù)器）。

服務(wù)器收到請求后，首先對比參數(shù)中的驗證信息，確定是否為用戶登錄請求接口。如果是，返回一個確認(rèn)信息給手機(jī)端。

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

登錄成功

然后，瀏覽器再次發(fā)送請求的時候，瀏覽器端的服務(wù)器就可以得到一個用戶Id，并調(diào)用登錄的方法，聲成一個瀏覽器端的token，再瀏覽器再次發(fā)送請求的時候，將用戶信息返回給瀏覽器，登錄成功。

這里存儲用戶id而不是直接存儲用戶信息是因為，手機(jī)端的用戶信息，不一定是和瀏覽器端的用戶信息完全一致。

登錄原理圖如下：

看完上述內(nèi)容，你們掌握瀏覽器的掃碼登錄實現(xiàn)原理是什么的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！