去年做的功能,整理一下分享出來
如淘寶,騰訊等網站登入頁面,都有APP掃碼登入這個功能,去年也做了一個,基于自己的APP實作, 并非第三方登陸.
思路:1. 生成一個二維碼, 二維碼連結帶有密鑰. 2. 用資料庫表記錄這次的密鑰, 友善APP傳回使用者ID時比對. 3. 前端頁面需要進行ajax輪詢,去擷取使用者ID是否登陸的狀态
1. 點選右上角時, 要ajax生成一個二維碼. 不要一開始就生成, 或許别人不用掃碼登入呢
2. 二維碼生成方法.
前端, 切換二維碼登入時觸發, 是以要用ajax,去填充iframe, 當然你可以直接給iframe的src上加二維碼的方法路徑,
2.生成二維碼後, sign的密鑰就寫入了資料庫, 前端ajax開始輪詢,如果輪詢為1,則說明已經登入
3. 我是統一寫的一個apilogin控制器, 這個是二維碼生成方法. 方法裡帶有sign,主要就是這個. sign方法是oauth2.0協定
二維碼生成的隻是個連結, url的話, 是一個回調的接口位址, 為了安全,其實可以略去, 隻用網址加參數
簽名方法:
4. 這時 APP端需要實作, 掃碼功能, 掃碼後,手機app端就讀取到了這個網址連結, 獲得了參數, APP端點選确認登入按鈕,
5.APP端确認時,驗證sign密鑰, 如果正确 就跳轉到接收到的url接口位址, 并且帶上sign簽名(token), addtime目前時間,userid.
token和url 是 掃碼獲得的, 再傳回給接口. addtime是确認時間, 可以做過期驗證. userid是手機端使用者id, 可以進行加密保護, 也可以直接明文, 反正别人看不到
6. 回調方法, 接收APP傳回的接口,根據token去查詢二維碼登入表.
7.資料庫字段
id, username 使用者ID, token 簽名, add_time生成時間, 還可以加 回調時間
當PC端生成時, 是沒有使用者ID的, APP掃碼後,回調給了使用者ID, 需要更新記錄
8. 最後PC端的輪詢. 輪詢前端探查是否掃碼登入狀态, 我加了個 計數變量, 避免長時間輪詢消耗資源,
上面點選二維碼時, 生成二維碼 , 有個開始輪詢, 3秒執行一次輪詢, 輪詢方法裡面還加了一個計算, 執行一次+1, 達到20次時, 20*3=60秒.重新整理一次頁面.
9.ajax輪詢的請求方法, 根據目前session記錄的sign進行查詢, 這是為了避免用戶端開多個視窗同時掃碼,
10.查詢到以後, 寫入session, 傳回1 ,告訴前端, 登入成功進行跳轉到index.