掃描二維碼登陸思路

前言：最近想在個人我的網站上面加上一個掃二維碼登陸後臺的一個功能，以前寫過websocket在線聊天，知道掃碼成功以後，須要用到websocket來實現pc同步登陸，百度了一下掃碼登陸思路，很無賴，都只是隨便的談了一下大概的思路，看完以後仍是一臉萌逼，最後仍是決定本身去研究一下QQ的掃碼登陸如何實現的，分享一下我是如何實現掃碼登陸。。

思路這東西還真得靠本身熬呀！

我是研究的qq郵箱掃碼登陸，因此後面的都以qq郵箱爲例，先看一下這張圖：

結合以前百度的掃碼登陸思路，這個appid應該就是客戶端的id，而後每次刷新的時候這個t都在變化，不知道他是當前的時間戳，仍是每次刷新會生成一個隨機數（後面叫他時間戳）。只看懂了這兩個參數，其餘的沒看懂，先無論，先記錄下這兩個參數。經過這張圖我們能夠知道我們第一步須要作什麼：

1. 首先須要生成一個二維碼，而且二維碼須要有一個客戶端id。(讓客戶端id每次刷新的時候隨機生成)

每次進入該頁面，由後臺生成一個帶有隨機客戶端id的二維碼。到了這兒，pc端就先告一段落。

2.手機端實現登陸功能，登陸成功以後，由後臺生成並返回登陸憑證（後面叫token）

token:登陸成功以後的憑證，這個登陸憑證最好使用數據庫來存，以前我本身使用session，忽略了一個問題，session的本質是cookie，因此不能跨平臺，在移動端保存的session，在pc端獲取不到。

3.實現掃一掃的功能（必定要移動端拿到後臺生成的token以後才能使用掃一掃的功能）

4.掃pc端的二維碼而且獲取到客戶端id(client_id)

當咱們拿到這個client_id以後，這個掃碼登陸就算完成了一大半了，如今要作的，就是想辦法將手機端的token，拿給pc端，pc登陸成功，而後將這個token保存下來，每次操做須要登陸驗證的時候，將token發給後臺進行驗證就ok了。

5.pc端和移動端實時通訊（websocket）

我在移動端是使用的html原生的websocket，沒有使用插件，後臺是使用的ws模塊。

6.將移動端的token推送給對應的客戶端（client_id排上用場）

後臺推送消息的時候，同過client_id能夠判斷出，把這個token應該推送給哪個客戶端(client_id)

在以前，我是沒有發現client_id有什麼做用，pc端和移動端實時通訊以後，直接將這個token推送給全部人。pc端收到，和後臺token作一個驗證(看token是否有問題),直接就提示登陸成功。結果pc同時開幾個登陸網頁出來的時候，手機一掃，全部打開的網頁所有都登陸了，仍是登陸的同一個帳號，很尷尬！！！！！

完成這6步，簡單的二維碼登陸就算完成了。