碼上快樂

相關內容    簡體    繁體

實現手機掃描二維碼頁面登錄，類似web微信-第四篇，服務器端

本文轉載自   查看原文   2016-09-06 14:42   1903    用戶安全登錄

轉自：http://blog.csdn.net/otangba/article/details/8273952

終於到了服務器端，第三篇的手機客戶端如果已經下載了的話，沒有服務器是不能正常運行的。

服務器端要做得事很多，雖然邏輯不是很復雜，但是我們必須要分析清楚我們要做哪些事，請看下圖：

通過這張圖，我們看出，服務器端的接口一共有6個，分別處理：

 

  1. 手機客戶端登錄
  2. 首頁
  3. 二維碼圖片流
  4. long polling維持
  5. 接收手機客戶端已掃描的通知
  6. 接收手機客戶端已確認登錄的通知
那么一個一個解決
 
首先是手機客戶端登錄，在上一篇我們介紹的手機客戶端登錄我們僅僅模擬一下，因此用戶只需要提交一個用戶名，服務器則通過SHA1對用戶名加密，將密文返回作為token。為了將來驗證這個密文是否OK，我們將用戶名和密文保存在redis內供將來驗證使。
需要引用的包：
[javascript]  view plain  copy
 
  1. var http = require('http'), url = require('url'), fs = require('fs'), querystring = require('querystring'),qrcode = require('qrcode'), UUID = require('uuid-js'), sha1 = require('sha1'), redis = require('redis'), redisClient = redis  
  2.         .createClient('10087', '192.168.111.122'), redisKey = 'QRCODE_LOGIN_TOKEN';  

redis 的客戶端也一並創建了，並設置了key
web服務的基礎結構如下：
[javascript]  view plain  copy
 
  1. http.createServer(function(req, res) {  
  2.     // parse URL  
  3.     var url_parts = url.parse(req.url);  
  4.     var path = url_parts.pathname;  
  5.     var uuid4 = UUID.create();  
  6.     var _sessionID = uuid4.toString();  
  7.     if (path == '/') {  
  8.         //...  
  9.     } else if (path == '/poll') {  
  10.         // console.log('polling');  
  11.           
  12.     } else if (path == '/qrcodeimage') {  
  13.         // 二維碼的請求，參數為sessionID  
  14.   
  15.     } else if (path == '/moblogin') {  
  16.         // 返回用戶名對應的token，簡單采用sha1加密  
  17.           
  18.     } else if (path == '/scanned') {  
  19.         console.log('scanned');  
  20.           
  21.     } else if (path == '/confirmed') {  
  22.         console.log('confirmed');  
  23.           
  24.     } else {  
  25.         res.writeHead(200, {  
  26.             'Content-Type' : 'text/html; charset=UTF-8'  
  27.         });  
  28.         res.end();  
  29.     }  
  30. }).listen(9999, '192.168.111.109');  
  31. console.log('服務器已運行在端口9999.');  

通過分析，我們無非就是為這6個分支添加邏輯。
這次案例是一個試驗，因此我們代碼編寫的也比較簡單，如果使用類似express等框架的話，會更加方便一些。
 
先看看第一個接口，登錄，返回sha1的token
[javascript]  view plain  copy
 
  1. if (path == '/moblogin') {  
  2. <span style="white-space:pre">      </span>// 返回用戶名對應的token，簡單采用sha1加密  
  3.         var userName = urlDecode(url_parts.query);  
  4.         var token = sha1(userName);  
  5.         // userHash.set(token, userName);  
  6.         // 保存token到redis  
  7.         redisClient.hset(redisKey, token, userName);  
  8.         res.writeHead(200, {  
  9.             'Content-Type' : 'text/html; charset=UTF-8'  
  10.         });  
  11.         res.end(token);  
  12. <span style="white-space:pre">  </span>}  

下面是首頁，如果用戶敲擊的url是一個不帶參數的地址，事實上，用戶初次訪問肯定不帶任何參數，而我們這個頁面的目的是必須要有sessionID，因為首頁內包含的2個子請求是必須具備sessionID參數的。因此我們要做url做一個分析和強制跳轉：
[javascript]  view plain  copy
 
  1. if (path == '/') {  
  2.         var sessionID = url_parts.query;  
  3.         if (typeof (sessionID) == "undefined" || sessionID == "") {  
  4.             // 訪問首頁沒有參數，自動跳轉  
  5.             res.writeHead(200, {  
  6.                 'Refresh' : '0; url=/?' + _sessionID,  
  7.                 'Content-Type' : 'text/html; charset=UTF-8'  
  8.             });  
  9.             res.end();  
  10.         } else {  
  11.             // 處理首頁，刷新一條sessionID和二維碼  
  12.             generateIndex(sessionID, req, res);  
  13.         }  
  14.     }  

也就是說當直接訪問/的時候，服務器強制將請求重定向並包含sessionID信息
[javascript]  view plain  copy
 
  1. function generateIndex(sessionID, req, res) {  
  2.   
  3.     fs.readFile('./index.html', 'UTF-8', function(err, data) {  
  4.         data = data.replace(/SESSIONID/g, sessionID);  
  5.         res.writeHead(200, {  
  6.             'Content-Type' : 'text/html; charset=UTF-8'  
  7.         });  
  8.         res.end(data);  
  9.     });  
  10.   
  11. }  

當訪問的地址符合/?sessionID的時候，服務器讀取一個html頁面，並將其中的二維碼和long polling需要的參數替換為sessionID
[html]  view plain  copy
 
  1. <html>  
  2.     <head>  
  3.         <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
  4.         <script>  
  5.               
  6.             var poll = function() {  
  7.                 $.getJSON('/poll?SESSIONID', function(response) {  
  8.                     var cmd = response.cmd;  
  9.                     if (cmd == 'scanned') {  
  10.                         scanned();  
  11.                     } else if (cmd == 'pclogin') {  
  12.                         var username=response.username;  
  13.                         pclogin(username);  
  14.                     }  
  15.                     poll();  
  16.                 });  
  17.             }  
  18.             var pclogin = function(username) {  
  19.                 $('#output').text('歡迎您：' + username + '，您已成功登錄');  
  20.             }  
  21.             var scanned = function() {  
  22.                 $('#output').text('已成功掃描，等待手機確認登錄');  
  23.             }  
  24.             poll();  
  25.         </script>  
  26.     </head>  
  27.     <body>  
  28.         <p align="center"><img src="/qrcodeimage?SESSIONID">  
  29.         </p>  
  30.           
  31.     </body>  
  32. </html>  
二維碼的請求在我們第二篇就已經介紹過，這里不再重復。
那么維持long polling的接口
[javascript]  view plain  copy
 
  1. if (path == '/poll') {  
  2.         // console.log('polling');  
  3.         var sessionID = url_parts.query;  
  4.         var sessionObj = {  
  5.             'sessionID' : sessionID,  
  6.             'res' : res  
  7.         };  
  8.         clients.push(sessionObj);  
  9.         console.log('client added' + sessionObj);  
  10.     }  

在處理接收客戶端完成掃描和確認登錄的時候，邏輯比較類似，都是先驗證用戶的token是否存在，商用的話可能還要有些更安全的考慮
然后根據sessionID找到維持long polling的客戶端對象，並且返回相關的操作指令
[javascript]  view plain  copy
 
  1. function handleScanned(res, token, sessionID) {  
  2.     // console.log(">>>" + token + "," + sessionID);  
  3.     var success = false;  
  4.     if (typeof (token) != "undefined") {  
  5.         // 驗證是否包含用戶信息已確認是登錄的用戶  
  6.         var userName;  
  7.         redisClient.hget(redisKey, token, function(err, reply) {  
  8.             userName = reply;  
  9.             // console.log("username=" + userName);  
  10.             if (typeof (userName) != "undefined") {  
  11.                 // 用戶存在  
  12.                 for ( var int = 0; int < clients.length; int++) {  
  13.                     var clientobj = clients[int];  
  14.                     var savedSession = clientobj.sessionID;  
  15.                     var client = clientobj.res;  
  16.                     if (savedSession == sessionID) {  
  17.                         // 頁面存在  
  18.                         client.end(JSON.stringify({  
  19.                             cmd : 'scanned'  
  20.                         }));  
  21.                         clients.splice(int, 1);  
  22.                         success = true;  
  23.                         break;  
  24.                     }  
  25.                 }  
  26.             }  
  27.             res.writeHead(200, {  
  28.                 'Content-Type' : 'text/html; charset=UTF-8'  
  29.             });  
  30.             if (success) {  
  31.                 res.end("scanned");  
  32.             } else {  
  33.                 res.end("error");  
  34.             }  
  35.         });  
  36.   
  37.     }  
  38.   
  39. }  

至此，我們的完整的二維碼掃描登錄的流程就已經走完了。
放在服務器上運行一下，完全OK，如果想作為daemon的話可以使用forever包。
 
經過這幾篇的介紹，我們不難發現其實這個效果的實現並不是很復雜，關鍵在於你要把整個邏輯理順和想清楚。
同時由於這個案例涉及的技術也較多，技術不全面的話也很難形成完成的解決方案。
 
思考：
這個案例中還存在哪些問題
  1. 微信27秒是事出有因的，考慮到http請求有可能在客戶端因為長時間無響應而被終止，因此27秒自動刷新long polling可以有效的防治連接斷掉，而在我們這個案例里，並沒有去實現這個功能。首先我覺得實現起來沒有問題，不難，另外，這些點應該由你們自己去實現，我更加關注的是分析業務。
  2. 關於頁面session的內涵，應該可以附加一些加密的信息，對於客戶端只是傳遞這些信息，因此不涉及解密操作，而服務器端就可以驗證sessionID的合法性，目前如果你訪問/?的時候自己宿便敲sessionID也是可以的，服務器沒有做任何驗證和限制。
  3. 關於long polling客戶端的response對象的維持和清理，在本例中我們直接采用了js的數組進行存儲，因此每次都是遍歷。如果商用，必然用采用哈希的方式來存儲，同時可能還必須存儲在數據庫內。
  4. 本例只是在客戶端確認登錄之后在頁面上顯示確認登錄，並沒有跳轉到某頁面，但是實際應用的時候，可能會攜帶某個服務器生成的鑰匙去redirect到某個url，只有目標地址確認這個鑰匙是登錄確認信息之后才會以某用戶方式登錄，這個還是希望大家能實現，邏輯很簡單，只是本例略掉。
 
后續的文章，就不再就這個話題討論了，我們會回到XMPP上，但是可能會把XMPP和我們這個案例做些結合。
例如客戶端登錄的不是web系統，而是XMPP
客戶端確認登錄以及提交掃描成功不是通過http，而是通過XMPP
web頁面要實現BOSH連XMPP
這些話題我們會在后面的內容里不斷收入的研究。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 實現手機掃描二維碼頁面登錄，類似web微信-第二篇，關於二維碼的自動生成 實現手機掃描二維碼頁面登錄，類似web微信-第二篇，關於二維碼的自動生成 實現手機掃描二維碼頁面登錄，類似web微信-第一篇，業務分析 java實現手機掃描二維碼進行登錄 實現手機掃描二維碼進行登錄 通過二維碼上傳手機文件到服務器 微信掃描二維碼跳轉瀏覽器 直接打開手機外部瀏覽器打開HTML指定網頁 vue中，使用手機釘釘掃描二維碼登錄 手機掃描電腦二維碼登錄原理 H5掃描微信二維碼登錄
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM