微信、淘寶類掃碼登錄是怎麼實現的?

Java技術棧

www.javastack.cn

打開網站看更多優質文章

尊重原創,轉載請標明出處,作者:精品唯居

出處:https://www.cnblogs.com/liyasong

今天說一說現在比較流行的掃碼登錄的實現原理。

需求介紹

首先,介紹下什麼是掃碼登錄。現在,大部分同學手機上都裝有qq和淘寶,天貓等這一類的軟件。而開發這些app的企業,都有他們相對應的網站。

爲了讓用戶在使用他們的網站時,登錄更加方便和安全。這些企業提供了, 使用手機,掃一掃,就可以登錄的服務。網頁登錄時的效果如下:

有很多小夥伴可能會感到很神奇,網頁上只是顯示了個二維碼,它怎麼就知道是哪個手機掃到了二維碼,並且進行登錄的呢?而且,登錄完成以後,還能直接把用戶信息顯示給用戶,真的是很神奇啊。

原理解釋

網頁端+服務器

接下來就是對於這個服務的詳細實現。首先,大概說一下原理:用戶打開網站的登錄頁面的時候,向瀏覽器的服務器發送獲取登錄二維碼的請求。服務器收到請求後,隨機生成一個uuid,將這個id作爲key值存入redis服務器,同時設置一個過期時間,再過期後,用戶登錄二維碼需要進行刷新重新獲取。

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

瀏覽器拿到二維碼和uuid後,會每隔一秒向瀏覽器發送一次,登錄是否成功的請求。請求中攜帶有uuid作爲當前頁面的標識符。這裏有的同學就會奇怪了,服務器只存了個uuid在redis中作爲key值,怎麼會有用戶的id信息呢? 

這裏確實會有用戶的id信息,這個id信息是由手機服務器存入redis中的。具體操作如下:

手機端+服務器

話說,瀏覽器拿到二維碼後,將二維碼展示到網頁上,並給用戶一個提示:請掏出您的手機,打開掃一掃進行登錄。用戶拿出手機掃描二維碼,就可以得到一個驗證信息和一個uuid(掃描二維碼獲取字符串的功能在網上同樣有很多demo,這裏就不詳細介紹了)。

由於手機端已經進行過了登錄,在訪問手機端的服務器的時候,參數中都回攜帶一個用戶的token,手機端服務器可以從中解析到用戶的userId(這裏從token中取值而不是手機端直接傳userid是爲了安全,直接傳userid可能會被截獲和修改,token是加密的,被修改的風險會小很多)。

手機端將解析到的數據和用戶token一起作爲參數,向服務器發送驗證登錄請求(這裏的服務器是手機服務器,手機端的服務器跟網頁端服務器不是同一臺服務器)。服務器收到請求後,首先對比參數中的驗證信息,確定是否爲用戶登錄請求接口。如果是,返回一個確認信息給手機端。

手機端收到返回後,將登錄確認框顯示給用戶(防止用戶誤操作,同時使登錄更加人性化)。

用戶確認是進行的登錄操作後,手機再次發送請求。服務器拿到uuId和userId後,將用戶的userid作爲value值存入redis中以uuid作爲key的鍵值對中。

登錄成功

然後,瀏覽器再次發送請求的時候,瀏覽器端的服務器就可以得到一個用戶Id,並調用登錄的方法,聲成一個瀏覽器端的token,再瀏覽器再次發送請求的時候,將用戶信息返回給瀏覽器,登錄成功。

這裏存儲用戶id而不是直接存儲用戶信息是因爲,手機端的用戶信息,不一定是和瀏覽器端的用戶信息完全一致。

登錄原理圖如下:

最近熱文:

1、Java 14 祭出神器,Lombok 被幹掉了?

2、一週面試了 30 人,面到我心態爆炸…

3、用 float 存儲金額,老闆說損失從工資扣!

4、阿里發佈《Java開發手冊(泰山版)》

5、推薦一款 IDEA 代碼神器,再也不加班了!

6、Spring Boot Banner 換成了美女背景後…

7、Spring Boot 2.3 優雅關閉新姿勢,真香!

8、Redis 到底是單線程還是多線程?

9、我天!xx.equals(null) 是什麼騷操作??

10、Struts2 爲什麼被淘汰?自己作死!

掃碼關注Java技術棧公衆號閱讀更多幹貨。

點擊「閱讀原文」帶你飛~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章