最近在做一個掃碼登入功能，為此我還在網上搜了一下關於微信的掃描登入的實現方式。當這個功能完成了後，我決定將整個實現思路整理出來，方便自己以後檢視也方便其他有類似需求的程式猿些。

要實現掃碼登入我們需要解決兩個問題：

1.  在沒有輸入使用者名稱及密碼的情況下，如何解決許可權安全問題？換句話講，如何讓伺服器知道掃碼二維碼的客戶端是一個合法的使用者？

2.  伺服器根據使用者在客戶端的選擇如何實時在網頁上作出相應的響應？

首先我們先理一下微信的實現思路，來方便我們理解解決這一難題的思路方向。微信登入的二維碼實際上是將一個URL轉換成二維碼的形式，而通過微信客戶端掃碼後，無非就是開啟了這個url, 我捕捉到的微信二維碼的url為https://login.weixin.qq.com/l/YdmTu30I5A== ，這個url裡的YdmTu30I5A==代表的是本次會話的唯一ID, 這個有點兒類似瀏覽器裡的session id，通過這個ID,微信就能定向將確認結果反饋到網頁上。使用微信二維碼登入功能，需要有兩個前提：一是客戶端上需要安裝微信app。 二是使用者需要登入到到微信app。https://wx.qq.com/

 WebsocketWeb實時訊息後臺伺服器推送技術

為什麼要有這兩個條件呢？那是因為微信在確認是否允許登入到網頁版的時候，微信需要提取當前app的登入資訊並將上面的session ID一併發給伺服器，這樣伺服器收到了登入資訊和sessionID後就可以確認兩件事：一是用來確認登入的客戶端的使用者是驗證過的；二是通過session ID伺服器知道將反饋結果推送到哪個網頁。

   所以針對第一點，我們的關鍵在於，在掃描前要確保使用者是已經被驗證過且合法的使用者（驗證方式可以是使用者名稱+密碼，也可以是一個secure key），在選擇是否登入時將這個結果一併推送到伺服器端，就好了。如果使用者沒有驗證是否合法，可以像微信的處理方式一樣直接告訴使用者二維碼不可識別或提示請先登入到app。

  有了身份驗證，那麼現在就解決第二個問題，如何將反饋結果實時地顯示在網頁上呢？有朋友可能會說，客戶端這邊很簡單發一個請求到後臺就好了，而網頁上用ajax定時傳送到伺服器端看是否有反饋。我不贊成這種做法，因為ajax輪詢方式十分消耗客戶端和伺服器端資源！這裡涉及到另一個技術-web實時推送技術，使用推送技術可以節約伺服器端和客戶端的資源，可以穩定地推送和接收任何訊息。我在實現的過程中我採用了第三方推送服務-GoEasy推送，用它是實現非常簡單，我們專案裡的其他功能也用到了GoEasy web實時推送服務，所以在此我直接就用的GoEasy推送來將登入反饋結果推送到伺服器。我的實現步驟非常簡單，將傳送的session ID作為客戶端與網頁端的通訊channel，網頁端訂閱用session ID作為值得channel，客戶端將驗證結果和session ID傳送到伺服器端，伺服器端可以通過這個channel主動將結果推送給網頁版！如果客戶端也需要做相應的反饋的話，那麼客戶端也只需要訂閱這個channel,然後伺服器端會同時將結果推送給網頁版和客戶端，收到訊息後，就可以根據需求在goeasy的回撥函式裡做你想做的事情了。關於goeasy推送的使用，大家可以參考這篇部落格： http://www.cnblogs.com/jishaochengduo/articles/5552645.html， 另外GoEasy推送官網上也有一個demo：GoEasy二維碼掃碼登入demo,大家可以去看看效果.

話不多說，直接上程式碼，上程式碼，上程式碼。專案整起！！！！！

後臺框架採用SpringMVC，不同的框架可根據邏輯更改即可：

【思路】- PC端生成二維碼，二維碼包含uuid（全域性唯一識別符號），且打通websocket通道，等待伺服器返回登入成功資訊；APP掃描二維碼，獲取uuid及登入資訊，推送給服務端，處理後的登入資訊通過websocket返回給PC端，PC端得到登入資訊後儲存即登入成功。APP掃描確認登入的資訊可以採用ActiveMQ進行推送。

生成二維碼部分引入依賴檔案

二維碼登入後臺控制層Controller

websocket實現（本案例採用Spring自帶的websocket）

JMS實現

Server = require('ws').Server

wss = new Server port: 3000

wss.on 'connection', (ws) ->
  console.log 'a connection'
  ws.send 'started'

console.log 'server started'

server {
  listen 80;
  server_name ws.repo;

  location / {
    proxy_pass http://127.0.0.1:3000/;
    proxy_redirect off;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}

new WebSocket('ws://ws.repo/')

upstream ws_server {
  server 127.0.0.1:3000;
}

server {
  listen 80;
  server_name ws.repo;

  location / {
    proxy_pass http://ws_server/;
    proxy_redirect off;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
}