仿扫码登录公众号:使用微信扫码登录管理后台(基于websocket)

前端需要引用qrcode.js

<script src="js/qrcode.min.js" type="text/javascript" charset="utf-8"></script>
<div id="qrcode" style="width:200px;height: 200px;"></div>

页面加载后,前端执行函数getQrcode()获取并画出二维码

getQrcode(){
    //创建唯一对应码,此处生成毫秒数
    this.nowid=new Date().getTime();
    //新建二维码对象
	this.qrcode = new QRCode(document.getElementById("qrcode"), {width : 200,height : 200});
    //二维码数据
	var qcodetext="https://www.shennongfucha.cn/test/#/pages/adminlogin/adminlogin?id="+this.nowid;
    绘制、显示二维码
	this.qrcode.makeCode(qcodetext);
	var src=$("#qrcode img").attr("src");	
},

前端执行函数connect(),向服务器端发送对应码,建立webSocket连接,随时等待接收服务器端返回端数据。

connect(){
    var that=this;
    this.ws = new WebSocket("wss://www.shennongfucha.cn:8080");
    this.ws.onopen = function(){
    //向后端传递对应码nowid,手机扫码后识别来源    that.ws.send(JSON.stringify([{"froms":"logincheck","type":"service","id":that.nowid}]));
};
    //随时等待接收服务器端发回端数据,判断是否为许可账户
    this.ws.onmessage = function (evt){ 
	    var msg = JSON.parse(evt.data);
	    that.canlogin=msg.canlogin;
	    if(that.canlogin=="true"){
		    that.tip('欢迎-'+msg.data.account_text+'-'+msg.data.username);
		    that.logindata=msg.data;
		    that.atype=msg.data.account_type;
		    sessionStorage.setItem("logindata",JSON.stringify(msg.data));
		    setTimeout(function(){that.logined=true;that.qrcode.clear();},2500);
	    }else if(that.canlogin=="false"){that.tip("您的账号不是管理员");}
	
    };
    this.ws.onclose = function(){ console.log("连接已关闭...");};
}

服务器端node.js

首先要确保8080端口没有被占用,域名证书和秘钥可用;

var cfg = {
	port: 8080,
	ssl_key: '././keys/11111_www.example.cn.key',
	ssl_cert: '././keys/11111_www.example.cn.pem'
};
var httpServ = require('https');
var WebSocketServer = require('ws').Server; // 引用Server类
// 创建request请求监听器
var processRequest = (req, res) => {
	res.writeHead(200);
	res.end('厉害了,我的WebSockets!\n');
};
var app = httpServ.createServer({
	// 向server传递key和cert参数
	key: fs.readFileSync(cfg.ssl_key),
	cert: fs.readFileSync(cfg.ssl_cert)
}, processRequest).listen(cfg.port);
// 实例化WebSocket服务器
var wss = new WebSocketServer({
	server: app
});
// 如果有WebSocket请求接入,wss对象可以响应connection事件来处理
wss.on('connection', (wsConnect) => {
	// console.log('服务器已启动,监听中~');
	wsConnect.on('message', (message) => {
		var data=JSON.parse(message);
        //判断请求类型
		if(data[0].froms=="logincheck"){
            //判断请求来源为管理后台端
			if(data[0].type=="service"){
				userlist["id"+data[0].id]=wsConnect;
            //判断请求来源为用户扫码端
			}else if(data[0].type=="user"){
                //将扫码用户id与服务器端管理员库中端管理员id列表进行核对
				db.find("otherset",{"id":"admin"},function(err,result){
					var admin=result[0].data;
					var adminarr=[];
					for(let i=0;i<admin.length;i++){adminarr.push(admin[i].unionid);}
					var adminindex=adminarr.indexOf(data[0].unionid);
					var canlogin=adminindex>=0?"true":"false";
                    //sendto为发送目标,此处为管理后台
					var sendto=userlist["id"+data[0].id];
					var admindata=adminindex>=0?admin[adminindex]:{};
					var sendinfo=JSON.stringify({"canlogin":canlogin,"data":admindata});
					if(sendto){
						sendto.send(sendinfo, (err) => {if (err) {console.log(JSON.stringify(err));}});
						
					}
				});
			}
		}
		
	});
	wsConnect.on('close', (err) => {
		// console.log(data);
		// console.log(wsConnect)
		if (err) {
			// console.log(JSON.stringify(err));
		}
	});
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tx10765

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值