去年做的功能,整理一下分享出來

如淘寶,騰訊等網站登入頁面,都有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.