今天給大家介紹下掃碼登錄功能是怎麼設計的。 掃碼登錄功能主要分為三個階段:待掃描、已掃描待確認、已確認。 整體流程圖如圖。 下麵分階段來看看設計原理。 1、待掃描階段 首先是待掃描階段,這個階段是 PC 端跟服務端的交互過程。 每次用戶打開PC端登陸請求,系統返回一個唯一的二維碼ID,並將二維碼ID ...
今天給大家介紹下掃碼登錄功能是怎麼設計的。
掃碼登錄功能主要分為三個階段:待掃描、已掃描待確認、已確認。
整體流程圖如圖。
下麵分階段來看看設計原理。
1、待掃描階段
首先是待掃描階段,這個階段是 PC 端跟服務端的交互過程。
每次用戶打開PC端登陸請求,系統返回一個唯一的二維碼ID,並將二維碼ID的信息繪製成二維碼返回給用戶。
這裡的二維碼ID一定是唯一的,後續流程會將二維碼ID跟身份信息綁定,不唯一的話就會造成你登陸了其他用戶的賬號或者其他用戶登陸你的賬號。
此時在 PC 端會啟動一個定時器,輪詢查詢二維碼是否被掃描。
如果移動端未掃描的話,那麼一段時間後二維碼將會失效。
這個階段的交互過程如下圖所示。
2、已掃描待確認階段
第二個階段是已掃描待確認階段,主要是移動端跟服務端交互的過程。
首先移動端掃描二維碼,獲取二維碼 ID,然後將手機端登錄的憑證(token)和 二維碼 ID 作為參數發送給服務端
此時的手機在之前已經是登錄的,不存在沒登錄的情況。
服務端接受請求後,會將 token 與二維碼 ID 關聯,然後會生成一個臨時token,這個 token 會返回給移動端,臨時 token 用作確認登錄的憑證。
PC 端的定時器,會輪詢到二維碼的狀態已經發生變化,會將 PC 端的二維碼更新為已掃描,請在手機端確認。
這裡為什麼要有手機端確認的操作?
假設沒有確認這個環節,很容易就會被壞人攔截token去冒充登錄。所以二維碼掃描一定要有這個確認的頁面,讓用戶去確認是否進行登錄。
另外,二維碼掃描確認之後,再往用戶app或手機等發送登錄提醒的通知,告知如果不是本人登錄的,則建議用戶立即修改密碼。
這個階段是交互過程如下圖所示。
3、已確認
掃碼登錄的最後階段,用戶點擊確認登錄,移動端攜帶上一步驟中獲取的臨時 token訪問服務端。
服務端校對完成後,會更新二維碼狀態,並且給 PC 端生成一個正式的 token。
後續 PC 端就是持有這個 token 訪問服務端。
這個階段是交互過程如下圖所示。
以上就是整個掃碼登錄功能的詳細設計!
作者|架構工具棧
本文來自博客園,作者:古道輕風,轉載請註明原文鏈接:https://www.cnblogs.com/88223100/p/On-the-Principle-of-Scan-Code-Login.html