当前位置: 移动技术网 > IT编程>开发语言>.net > 基于SignalR的消息推送与二维码扫描登录实现代码

基于SignalR的消息推送与二维码扫描登录实现代码

2017年12月08日  | 移动技术网IT编程  | 我要评论

qq飞车变态加速,福安年轻人的生活,beyond反目内幕

1 概要说明

使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛。为了满足ios、android客户端与web短信平台的结合,特开发了基于singlarr消息推送机制的扫描登录。本系统涉及到以下知识点:

signalr: 这官网,asp.net signalr 是为 asp.net 开发人员提供的一个库,可以简化开发人员将实时 web 功能添加到应用程序的过程。实时 web 功能是指这样一种功能:当所连接的客户端变得可用时服务器代码可以立即向其推送内容,而不是让服务器等待客户端请求新的数据。

二维码:使用的qrcode类库,

mvc5:开发环境是基于mvc5

2、系统关系图

在实现本功能前,有点不是太确定能否拿下。

所谓万事开头难,通过查询想资料及自己归纳分析:系统涉及到手机客户端、浏览者、服务端,实现扫描登录也就是三者之间是如何协调工作的。通过axure画出如下关系图:

移动客户端、浏览者、服务端三者协作关系图

【m】:表示移动端 【b】:表示浏览者(浏览器客户端) 【s】:服务端,消息推送者及扫描认证接口发布者

步骤说明:

step(步骤)1 ,【b】浏览登录页面,step2【s】产生一个标识符uuid,并推送给b,生成登录二维码;

step3,【m】扫描二维码,前提条件是【m】已登录,step4【m】解析二维码信息获取uuid;

step5,【m】向服务端发送uuid+登录信息,step6【s】对uuid+登录信息进行相关解析认证,step6 uuid认证,不通过认证,则到step6-1 重新生成uuid循环step 2与并step6-2 返回给【m】uuid认证失败原因,step6 通过认证,step6-2转到登录信息认证,step 7登录信息认证,失败step7-3重新生成uuid循环step 2,成功则step7-1推送给【b】跳转到首页。

3、signalr循环消息推送

3.1 引用signalr

由于本人用的是vs15preview4,可以直接使用nuget可视化管理工具进行安装:tools—>nuget package manager—>manage nuget packages for solution…,打开以下界面:

在browser 标签下输入signalr,查询到microsoft.aspnet.signalr

/p>

找到对应的项目,点击“install”安装按钮即可引用相关类库,同时应用下载相关js库。

关于signalr的知识点,可以到官网 进行深入学习。

3.2 服务端signalr实现

服务端要向客户端推送uuid,对于uuid唯一标识符,具有重要特性:(1)有时间限制,120秒之内扫码有效;(2)具有一定的状态。对应的声明周期就是:生成—>推送—>状态判断—>手机端扫描—>验证uuid—>状态判断—>销毁等系列过程。

服务端的核心代码将单独建立一个项目去实现:

3.2.1 nofifier.cs通知类

本类将连接qrcodehub与sessiontimer

using microsoft.aspnet.signalr;namespace txsms.singalr
{
public static class notifier 
{ 
private static readonly ihubcontext context = globalhost.connectionmanager.gethubcontext<qrcodehub>(); 
public static void sessiontimeout(string connectionid, int time) 
{ 
context.clients.client(connectionid).alertclient(time); 
} 
public static void sendelapsedtime(string connectionid, int time) 
{
context.clients.client(connectionid).sendelapsedtime(time); 
} 
public static void sendqrcodeuuid(string connectionid, string uuid)
{ context.clients.client(connectionid).sendqrcodeuuid(uuid);
} 
}
}

3.2.2 qrcodehub.cs signalr核心实现

signalr的核心代码:

using microsoft.aspnet.signalr;
using system.threading.tasks;
namespace txsms.singalr
{ 
/// <summary> 
/// 二维码推送
/// 
</summary> 
//[hubname("qrcode")] public class qrcodehub : hub {
/// <summary> /// 给客户端发送时间间隔 /// 
</summary> /// <param name="time">
</param>
public void sendtimeoutnotice(int time) 
{
clients.client(context.connectionid).alertclient(time);
}
public void checkelapsedtime(int time) 
{
clients.client(context.connectionid).sendelapsedtime(time); } 
/// <summary> 
/// 发送二维码uuid内容
///
</summary>
/// <param name="uuid">
</param> 
public void sendqrcodeuuid(string uuid) 
{ 
clients.client(context.connectionid).sendqrcodeuuid(uuid); }
///
<summary>
/// called when the connection connects to this hub instance.
/// </summary> ///
<returns>a <see cref="t:system.threading.tasks.task" />
</returns> public override task onconnected() 
{
sessiontimer.starttimer(context.connectionid); return base.onconnected();
}
/// <summary> 
/// called when a connection disconnects from this hub gracefully or due to a timeout. 
///
</summary> 
/// 
<param name="stopcalled">
/// true, if stop was called on the client closing the connection gracefully;
/// false, if the connection has been lost for longer than the /// <see cref="p:microsoft.aspnet.signalr.configuration.iconfigurationmanager.disconnecttimeout" />. 
/// timeouts can be caused by clients reconnecting to another signalr server in scaleout. /// </param> /// <returns>a <see cref="t:system.threading.tasks.task" />
</returns> public override task ondisconnected(bool stopcalled) { sessiontimer.stoptimer(context.connectionid); return base.ondisconnected(stopcalled);
} 
/// <summary> /// 
called when the connection reconnects to this hub instance. /// </summary> ///
<returns>a <see cref="t:system.threading.tasks.task" />
</returns> public override task onreconnected()
{
if (!sessiontimer.timers.containskey(context.connectionid)) 
{ 
sessiontimer.starttimer(context.connectionid);
} 
return base.onreconnected(); }
///
<summary> /// 重置时钟 /// 
</summary> public void resettimer() 
{ sessiontimer timer;
if (sessiontimer.timers.trygetvalue(context.connectionid, out timer))
{ timer.resettimer(); 
} 
else
{
sessiontimer.starttimer(context.connectionid);
}
} /// 
<summary> /// 
发送普通消息 /// 
</summary> ///
<param name="name">
</param> /// <param name="message">
</param>
public void send(string name, string message) 
{ 
clients.all.addnewmessagetopage(name, message); 
} 
}
}

3.2.3 sessiontimer.cs 对应客户端时钟

对【b】来说,产生一个独立的timer,进行按1s间隔发送消息。

using system;using system.collections.concurrent;using system.timers;namespace txsms.singalr{ public class sessiontimer : idisposable 
{ 
///
<summary> /// 存储客户端对应的timer /// 
</summary> 
public static readonly concurrentdictionary<string, sessiontimer> timers; private readonly timer _timer; static sessiontimer() 
{ timers = new concurrentdictionary<string, sessiontimer>(); 
}
/// <summary> /// 构造函数 /// </summary> /// 
<param name="connectionid"></param> private sessiontimer(string connectionid)
{
connectionid = connectionid; _timer = new timer { interval = utility.activitytimerinterval() }; _timer.elapsed += (s, e) => monitorelapsedtime(); _timer.start(); 
}
public int timecount { get; set; } /// <summary> /// 客户端连接id ///
</summary> public string connectionid { get; set; } /// <summary> /// 启动timer /// 
</summary> ///
<param name="connectionid">
</param>
public static void starttimer(string connectionid) 
{ 
var newtimer = new sessiontimer(connectionid);
if (!timers.tryadd(connectionid, newtimer)) 
{ newtimer.dispose();
}
} 
/// <summary>
/// 停止timer /// </summary> ///
<param name="connectionid">
</param> public static void stoptimer(string connectionid) 
{
sessiontimer oldtimer; 
if (timers.tryremove(connectionid, out oldtimer))
{ 
oldtimer.dispose();
} 
} 
/// <summary> /// 
重置timer /// 
</summary> public void resettimer() { timecount = 0; _timer.stop();
_timer.start(); 
} 
public void dispose()
{ 
// stop might not be necessary since we call dispose _timer.stop(); _timer.dispose(); 
} ///

<summary> ///
给客户端发送消息 /// 
</summary> private void monitorelapsedtime() 
{ utility.clearexpireduuid(); var uuid = utility.getuuid(connectionid); 
//if (timecount >= utility.timervalue()) 
//{ // stoptimer(connectionid);
// notifier.sendqrcodeuuid(connectionid, uuid); // notifier.sessiontimeout(connectionid, timecount); 
//} 
//else //
{ notifier.sendqrcodeuuid(connectionid, uuid);
notifier.sendelapsedtime(connectionid, timecount); 
//}
timecount++;
if (timecount > 1000) 
{ 
timecount = 0;
} } }}

3.2.4 utility.cs 基础配置

满足时钟、获取qrcode等

using txsms.actions;namespace txsms.singalr
{
internal class utility { public static int intnum = 0; /// 
<summary> /// 时间间隔 /// 
</summary> ///
<returns></returns> 
public static int timervalue() 
{ return 1000;
} 
public static double activitytimerinterval()
{ return 1000.0;
}
/// <summary> /// 获取当前uuid
/// </summary>
/// <returns></returns> public static string getuuid(string connectionid)
{
try 
{ 
var model = new qrcodeaction().getvalidmodel(connectionid); 
return model.tojson(connectionid); 
} 
catch 
{ return "error"; 
} } /// <summary> /// 删除过期uuid /// 
</summary> public static void clearexpireduuid() { intnum++; 
if (intnum <= 1000) return; 
new qrcodeaction().clearexpireduuid();
intnum = 0; } }}

3.2.5 signalr在mvc中启动配置

在mvc中,启动项目进行如下配置:

using microsoft.owin;using owin;
[assembly: owinstartup(typeof(txsms.web.startup))]namespace txsms.web{ public partial class startup 
{ 
public void configuration(iappbuilder app) 
{ //启动signalr app.mapsignalr(); configureauth(app); 
} }}

3.2.6 其他类库说明

qrcodeaction.cs:维护uuid,创建、保存、状态更改、删除等。

qrmodel.cs:uuid实体

所有文件,可在《7、总结与下载》中下载。

3.3 客户端signalr实现

添加signalr js库:

<script type="text/javascript" src="~/scripts/jquery.signalr-2.2.1.min.js">
</script> 
<script type="text/javascript" src="~/signalr/hubs">
</script

两者必须都引用。

调用接口如下:

 var codeuuid = "";
 $(function () {
 // reference the auto-generated proxy for the hub. var qrcode = $.connection.qrcodehub;
 // create a function that the hub can call back to display messages. qrcode.client.addnewmessagetopage = function (name, message)
 { // add the message to the page. console.log(message); //jquery('#divqrcode').qrcode({ width: 180, height: 180, correctlevel: 0, text: message }); 
 }; 
 qrcode.client.sendelapsedtime = function (time) { console.log(time); 
 }; 
 qrcode.client.sendqrcodeuuid = function (uuid) { console.log("sendqrcodeuuid");
 console.log(codeuuid); if (codeuuid === uuid) { return; } codeuuid = uuid; if (codeuuid !== "error") { var jsonuuid = $.parsejson(codeuuid);
 if (jsonuuid.islogin === 1) { //判断是否登录 window.location.href = "/home/index/@model.name"; } } $("#divqrcode").html("");
 $('#divqrcode').qrcode({ width: 180, height: 180, correctlevel: 0, text: codeuuid });
 };
 // start the connection. $.connection.hub.start().done(function () { //qrcode.server.updateconnectionid($.connection.hub.id); qrcode.server.send("qrcode", math.random());
 });
 });

以上代码包括相关二维码的生成。

4、二维码的生成与存储数据解析

4.1 二维码的生成

二维码类库选择 一个qrcode原生态js类库,jquery对其进行了扩展。

添加script标签:

<script type="text/javascript" src="~/scripts/qrcode.min.js">
</script> 
<script type="text/javascript" src="~/scripts/jquery.qrcode.min.js">
</script>

定义div标签,用来呈现二维码:

 <!--二维码登录开始--> 
<div> 
<div>安全登录 防止被盗</div>
 <div>
</div> 
<div>扫一扫登录</div> 
</div> 
<!--二维码登录结束-->

呈现二维码:

$("#divqrcode").html(""); 
$('#divqrcode').qrcode({ width: 180, height: 180, correctlevel: 0, text: codeuuid });

通过3与4,可实现具有180秒生命周期二维码的生成,对于不同的浏览者,生成的二维码是不同的,效果如下:

4.2 二维码存储的是什么

二维码生成了,但是存储的是什么呢?首先我们看下以下的二维:

hbuilder官网

千牛电脑客户端二维码登录界面

显然,扫描这两个图片上的二维码会得到不同的结果。对某些二维码的解码要对应配套的客户端才能起到作用,否则用其他工具解析出来也就是字符串。

在本系统中,二维码存储的是一个json对象,格式为:

{"connectionid":"19c12e95-26d7-410c-8292-2a3afdd1a4da","uuid":"a04702df-6a52-4e1c-be8b-9b3dbeef4d72","islogin":0,"isvalid":1}

connectionid:客户端与signalr联系的id,其格式为guid

uuid:对应connectionid产生的一个唯一标识符,其格式为guidislogin:当前connectionid连接是否已登录,1—>表示登录,0—>未登录isvalid:当前connectionid对应的uuid是否有效,1—>表示有效,0—>表示失效

手机客户端扫描之后,可根据这些参数情况进行判断,是否向服务端发送请求。在做扫描应用(比如扫描登录)时,要依据业务场景进行消息传递,生成对应二维码,并不局限于json对象、url地址等。

总结下来,二维码应用场景,如下图:

5、扫描认证接口

为了满足【m】端扫描之后,提交uuid+用户信息进行认证,建立qrcode api接口。接口任务比较简单,就是对uuid合法性进行判断,然后判断用户信息登录情况,更改uuid的登录状态。

5.1 输入参数

using abp.application.services.dto;using system;using system.componentmodel.dataannotations;
namespace txsms.inputs{ /// <summary> /// 二维码登录认证 /// </summary> [serializable]
public class qrcodeverifyinput : iinputdto { /// <summary> /// 构造函数 /// </summary>
public qrcodeverifyinput() { connectionid = guid.empty.tostring();
uuid = guid.empty; username = password = ""; } /// <summary> /// 当前回话id /// </summary> 
[displayformat(convertemptystringtonull = false)] public string connectionid { get; set;
} /// <summary> /// 唯一标识符号 /// </summary> 
public guid uuid { get; set; } /// <summary> /// 用户账号 /// </summary>
[displayformat(convertemptystringtonull = false)]
public string username { get; set; } /// <summary> /// 登录密码 /// </summary>
[displayformat(convertemptystringtonull = false)] 
public string password { get; set; } /// <summary> /// 平台 /// </summary>
[displayformat(convertemptystringtonull = false)] 
public string platform { get; set; 
} }}

5.2 输出参数

using abp.application.services.dto;
using newtonsoft.json;using system.componentmodel.dataannotations;using system.web.mvc;using txsms.mvc;namespace txsms.outputs{ /// <summary> /// 输出基类 /// </summary> [modelbinder(typeof(emptystringmodelbinder))] public class txsmsoutputdto : ioutputdto { /// <summary> /// 构造函数 /// 
</summary> public txsmsoutputdto() 
{ result = 0; //默认为0,表示初始值或正确 message = ""; 
} /// <summary> /// 错误代码 ///
</summary> [jsonproperty("result")] public int result { get; set; } /// <summary> /// 错误信息 /// </summary>
[displayformat(convertemptystringtonull = false)] [jsonproperty("message")] 
public string message { get; set; } }}

5.3 api接口

using system;using system.threading.tasks;using system.web.http;using txsms.actions;using txsms.inputs;using txsms.outputs;namespace txsms{ /// <summary> /// 二维码接口 /// </summary> public class qrcodecontroller : txsmsapicontroller { /// <summary> /// 二维码登录认证 /// </summary> /// <returns> /// 0:登录成功;-1:参数错误 -2:connectionid、uuid、username、password不允许为空-3:connectionid回话id不存在-4:uuid输入错误-5:uuid已过期 /// -6:本uuid已登录-7:登录账号已停用-8:登录账号已删除-9:登录密码输入错误-10:登录账号不存在 /// </returns> [allowanonymous] [httppost] public async task<txsmsoutputdto> qrcodeverify([frombody]qrcodeverifyinput model) { txsmsoutputdto result = new txsmsoutputdto(); #region 参数验证 if (model.isnull()) { result.result = -1; result.message = "参数错误"; return result; } if (model.connectionid.isnullorempty() || model.uuid.equals(guid.empty) || model.username.isnullorempty() || model.password.isnullorempty()) { result.result = -2; result.message = "connectionid、uuid、username、password不允许为空"; return result; } #endregion 参数验证 #region 有效性判断 //验证connectionid合法性 if (qrcodeaction.qrcodelists.containskey(model.connectionid)) { result.result = -3; result.message = "connectionid回话id不存在"; return result; } //验证uuid有效性 var findcode = qrcodeaction.qrcodelists[model.connectionid]; if (!model.uuid.equals(findcode.uuid)) { result.result = -4; result.message = "uuid输入错误"; return result; } if (!findcode.isvalid()) { result.result = -5; result.message = "uuid已过期"; return result; } if (findcode.islogin) { result.result = -6; result.message = "本uuid已登录"; return result; } #endregion 有效性判断 loginusernameinput loginparam = new loginusernameinput { username = model.username, password = model.password, platform = model.platform }; loginoutput loginresult = await new sessioncontroller().loginusername(loginparam); switch (loginresult.result) { case -1: result.result = -7; result.message = "登录账号已停用"; break; case -2: result.result = -8; result.message = "登录账号已删除"; break; case -3: result.result = -9; result.message = "登录密码输入错误"; break; case -4: result.result = -10; result.message = "登录账号不存在"; break; } if (loginresult.result > 0) //登录成功,值为accid { result.result = 0; findcode.islogin = true; //更改登录状态 result.message = "成功登录"; } return result; } }}

6、疑难解答

6.1 #16解答

二维码中可以加入图片吗?文中二维码 有个图片上面有 m 字母是怎么处理的?

第一个问题:是把存储图片信息存储到二维码中,手机扫码可以识别吧?这个问题涉及到二维码的存储容量,理论上如果二维码的存储容量足够大,可把图片序列化成01的字符进行存储,扫描就可以识别。但二维码有不同的标准,不同标准下数据容量是不同的。建议不要存储图片,详情可查看知乎,了解一下:

m字母是一个图片,来自,只需要把想放的图放到已生成的二维码中间即可,但图片不宜过大,调试一下,用手机识别一下。有兴趣的朋友可以查看草榴二维码:

6.2 #17解答

疑问: 输入参数有 用户名和密码,那个是每次都需要用户输入的?还是通过扫描二维码获得的? 还是哪种方式来给 输入参数的用户名和密码赋值的。我想了解楼主是按哪种方式实现的呢?

首先要理解一下扫描登录的流程,【m】扫描二维码只获取相关【b】的唯一标识符信息,扫码之后,【m】(前提是【m】必须已经登录成功)发送用户名\密码\uuid到【s】进行一系列的验证;为了提高安全性,在【m】提交数据时,对密码进行md5时间戳加密。

6.3 #23解答

可以这样不 在手机端随机生成码 加密存在手机上并上传服务器 后端生成带有该码加时间的二维码 网页扫的时候对比登陆

要实现扫描登录,弄懂一个问题:为什么扫描二维码之后,提交给服务器的数据就是当前页面所需的呢?在本项目中,是通过signalr的固有通信connectionid来确认的。你所说的流程应该如下:

在本流程图中,比方案中的步骤延长了;在step2中,会出现问题,如何将【m】推送过来的uuid推送到你看到的【b】端?显然缺少纽带。本方法是不可行的。

7、总结与下载

二维码应用比较广泛,记得去北京的故宫旁边的中山公园,里面的古树也有二维码,扫描可查看相关联信息。紧紧对于二维码而言就是存储有限信息,但就是这有限的信息,可以将庞大的信息系统连接一起,所用的应用不是前沿技术的突破,而是我们思考问题方式的转变、思维角度的变化。由于二维码具有信息存储的独特性,可在以下方面应用:

  • 信息获取(名片、地图、wifi密码、资料)
  • 网站跳转(跳转到微博、手机网站、网站)
  • 广告推送(用户扫码,直接浏览商家推送的视频、音频广告)
  • 手机电商(用户扫码、手机直接购物下单)
  • 防伪溯源(用户扫码、即可查看生产地;同时后台可以获取最终消费地)优惠促销(用户扫码,下载电子优惠券,抽奖)
  • 会员管理(用户手机上获取电子会员信息、vip服务)
  • 手机支付(扫描商品二维码,通过银行或第三方支付提供的手机端通道完成支付)

由于最近在做短信业务平台,将二维码应用到营销管理中,每个业务人员具有独立的推广二维码,客户扫码可进行短信测试,若注册成为会员则就是本业务人员的直属客户,可查看《》。

最后,上传《基于signalr的消息推送与二维码描登录实现》主要文件下载:

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网