微信扫描二维码登入实现，网页端

2019独角兽企业重金招聘Python工程师标准>>>

服务器端要做得事很多，虽然逻辑不是很复杂，但是我们必须要分析清楚我们要做哪些事，请看下图：

通过这张图，我们看出，服务器端的接口一共有6个，分别处理：

手机客户端登录
首页
二维码图片流
long polling维持
接收手机客户端已扫描的通知
接收手机客户端已确认登录的通知

那么一个一个解决

首先是手机客户端登录，在上一篇我们介绍的手机客户端登录我们仅仅模拟一下，因此用户只需要提交一个用户名，服务器则通过SHA1对用户名加密，将密文返回作为token。为了将来验证这个密文是否OK，我们将用户名和密文保存在redis内供将来验证使。

需要引用的包：

[javascript] view plain copy

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
.createClient('10087', '192.168.111.122'), redisKey = 'QRCODE_LOGIN_TOKEN';

redis 的客户端也一并创建了，并设置了key

web服务的基础结构如下：

[javascript] view plain copy

http.createServer(function(req, res) {
// parse URL
var url_parts = url.parse(req.url);
var path = url_parts.pathname;
var uuid4 = UUID.create();
var _sessionID = uuid4.toString();
if (path == '/') {
//...
} else if (path == '/poll') {
// console.log('polling');
} else if (path == '/qrcodeimage') {
// 二维码的请求，参数为sessionID
} else if (path == '/moblogin') {
// 返回用户名对应的token，简单采用sha1加密
} else if (path == '/scanned') {
console.log('scanned');
} else if (path == '/confirmed') {
console.log('confirmed');
} else {
res.writeHead(200, {
'Content-Type' : 'text/html; charset=UTF-8'
});
res.end();
}
}).listen(9999, '192.168.111.109');
console.log('服务器已运行在端口9999.');

通过分析，我们无非就是为这6个分支添加逻辑。

这次案例是一个试验，因此我们代码编写的也比较简单，如果使用类似express等框架的话，会更加方便一些。

先看看第一个接口，登录，返回sha1的token

[javascript] view plain copy

if (path == '/moblogin') {
<span style="white-space:pre"> </span>// 返回用户名对应的token，简单采用sha1加密
var userName = urlDecode(url_parts.query);
var token = sha1(userName);
// userHash.set(token, userName);
// 保存token到redis
redisClient.hset(redisKey, token, userName);
res.writeHead(200, {
'Content-Type' : 'text/html; charset=UTF-8'
});
res.end(token);
<span style="white-space:pre"> </span>}

下面是首页，如果用户敲击的url是一个不带参数的地址，事实上，用户初次访问肯定不带任何参数，而我们这个页面的目的是必须要有sessionID，因为首页内包含的2个子请求是必须具备sessionID参数的。因此我们要做url做一个分析和强制跳转：

[javascript] view plain copy

if (path == '/') {
var sessionID = url_parts.query;
if (typeof (sessionID) == "undefined" || sessionID == "") {
// 访问首页没有参数，自动跳转
res.writeHead(200, {
'Refresh' : '0; url=/?' + _sessionID,
'Content-Type' : 'text/html; charset=UTF-8'
});
res.end();
} else {
// 处理首页，刷新一条sessionID和二维码
generateIndex(sessionID, req, res);
}
}

也就是说当直接访问/的时候，服务器强制将请求重定向并包含sessionID信息

[javascript] view plain copy

function generateIndex(sessionID, req, res) {
fs.readFile('./index.html', 'UTF-8', function(err, data) {
data = data.replace(/SESSIONID/g, sessionID);
res.writeHead(200, {
'Content-Type' : 'text/html; charset=UTF-8'
});
res.end(data);
});
}

当访问的地址符合/?sessionID的时候，服务器读取一个html页面，并将其中的二维码和long polling需要的参数替换为sessionID

[html] view plain copy

<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
var poll = function() {
$.getJSON('/poll?SESSIONID', function(response) {
var cmd = response.cmd;
if (cmd == 'scanned') {
scanned();
} else if (cmd == 'pclogin') {
var username=response.username;
pclogin(username);
}
poll();
});
}
var pclogin = function(username) {
$('#output').text('欢迎您：' + username + '，您已成功登录');
}
var scanned = function() {
$('#output').text('已成功扫描，等待手机确认登录');
}
poll();
</script>
</head>
<body>
<p align="center"><img src="/qrcodeimage?SESSIONID">
</p>
</body>
</html>

二维码的请求在我们第二篇就已经介绍过，这里不再重复。

那么维持long polling的接口

[javascript] view plain copy

if (path == '/poll') {
// console.log('polling');
var sessionID = url_parts.query;
var sessionObj = {
'sessionID' : sessionID,
'res' : res
};
clients.push(sessionObj);
console.log('client added' + sessionObj);
}

在处理接收客户端完成扫描和确认登录的时候，逻辑比较类似，都是先验证用户的token是否存在，商用的话可能还要有些更安全的考虑

然后根据sessionID找到维持long polling的客户端对象，并且返回相关的操作指令

[javascript] view plain copy

function handleScanned(res, token, sessionID) {
// console.log(">>>" + token + "," + sessionID);
var success = false;
if (typeof (token) != "undefined") {
// 验证是否包含用户信息已确认是登录的用户
var userName;
redisClient.hget(redisKey, token, function(err, reply) {
userName = reply;
// console.log("username=" + userName);
if (typeof (userName) != "undefined") {
// 用户存在
for ( var int = 0; int < clients.length; int++) {
var clientobj = clients[int];
var savedSession = clientobj.sessionID;
var client = clientobj.res;
if (savedSession == sessionID) {
// 页面存在
client.end(JSON.stringify({
cmd : 'scanned'
}));
clients.splice(int, 1);
success = true;
break;
}
}
}
res.writeHead(200, {
'Content-Type' : 'text/html; charset=UTF-8'
});
if (success) {
res.end("scanned");
} else {
res.end("error");
}
});
}
}

至此，我们的完整的二维码扫描登录的流程就已经走完了。

放在服务器上运行一下，完全OK，如果想作为daemon的话可以使用forever包。

经过这几篇的介绍，我们不难发现其实这个效果的实现并不是很复杂，关键在于你要把整个逻辑理顺和想清楚。

同时由于这个案例涉及的技术也较多，技术不全面的话也很难形成完成的解决方案。

思考：

这个案例中还存在哪些问题

微信27秒是事出有因的，考虑到http请求有可能在客户端因为长时间无响应而被终止，因此27秒自动刷新long polling可以有效的防治连接断掉，而在我们这个案例里，并没有去实现这个功能。首先我觉得实现起来没有问题，不难，另外，这些点应该由你们自己去实现，我更加关注的是分析业务。
关于页面session的内涵，应该可以附加一些加密的信息，对于客户端只是传递这些信息，因此不涉及解密操作，而服务器端就可以验证sessionID的合法性，目前如果你访问/?的时候自己宿便敲sessionID也是可以的，服务器没有做任何验证和限制。
关于long polling客户端的response对象的维持和清理，在本例中我们直接采用了js的数组进行存储，因此每次都是遍历。如果商用，必然用采用哈希的方式来存储，同时可能还必须存储在数据库内。
本例只是在客户端确认登录之后在页面上显示确认登录，并没有跳转到某页面，但是实际应用的时候，可能会携带某个服务器生成的钥匙去redirect到某个url，只有目标地址确认这个钥匙是登录确认信息之后才会以某用户方式登录，这个还是希望大家能实现，逻辑很简单，只是本例略掉。

原文连接：http://blog.csdn.net/otangba/article/details/8273952

转载于:https://my.oschina.net/jeffzhao/blog/107934

微信扫描二维码登入实现，网页端相关推荐

【转】扫描二维码登入安全吗？
转载自 https://abcdabcd987.com/qrcode-login/ 昨天在知乎上看到了一个问题微信淘宝设计扫码登录的理由是什么,牺牲人性化来加强安全性?,本以为这是一个送分题,可是点开 ...
扫描二维码登入PC的工作原理
不知道从哪里看的了,有侵权找我删,我只是想记录一下
Day212.OAuth2、微信二维码登入注册功能、用户登录信息前后端供、讲师列表前后端 -谷粒学院
谷粒学院 OAuth2的使用场景一.OAuth2解决什么问题 1.OAuth2提出的背景照片拥有者想要在云冲印服务上打印照片,云冲印服务需要访问云存储服务上的资源 2.图例资源拥有者:照片拥有者 ...
微信扫描二维码快速登录网站
在近期的一个项目中用到了微信扫描注册.登录网站功能所以整理了下希望对读者有帮助. 首先,你需要有一个没有绑定微信.微信公众平台的邮箱注册成为微信开放平台开发者,在管理中心创建移动应用.或者网站应用获得 ...
微信扫描二维码和浏览器扫描二维码 ios和Android 分别进入不用的提示页面
实现微信扫描二维码和浏览器扫描二维码 ios和Android 分别进入不用的提示页面而进入商城下载该项目详情地址:gitee.com/DuJiaHui123- 1.创建完之后替换文件里面的ios ...
微信扫描二维码在内置浏览器打不开文件的下载链接怎么办？哪些api接口可以解决...
有哪些api接口可以实现微信扫描二维码在内置浏览器打开文件的下载链接? 经常看到贴吧上有人吐槽微信的检测系统太严格了,动不动就拦截第三方链接.怎么才能解决,怎么才能避免等等一系列的问题.因为平时我也会 ...
微信扫描二维码-电脑上网
展视网北京科技有限公司--cuidc 由于 wifi 成为人们生活中不可或缺的一部分,店家 wifi 免费上网的招数也就日益增多. 今天我们介绍一种破解<微信扫描二维码上网>的招数,此招数 ...
使用电脑微信扫描二维码
使用电脑微信扫描二维码将二维码图片发送至文件传输助手在与文件传输助手的聊天界面点开图片,右键,点击识别图中二维码即可扫描完成.
微信扫描二维码跳转至浏览器打开 jsp
微信扫描二维码总是用默认浏览器打开,无法下载任何东西.怎么办呢? 微信识别到打开为pdf 时,会自动给跳转至浏览器,所以解决方法就是服务器判断请求端为微信时,返回头部添加 Content-type:a ...

微信扫描二维码登入实现，网页端

微信扫描二维码登入实现，网页端相关推荐

最新文章

热门文章