基于SignalR的消息推送与二维码描登录实现
1 概要说明
使用微信扫描登录相信大家都不会陌生吧，二维码与手机结合产生了不同应用场景，基于二维码的应用更是比较广泛。为了满足ios、android客户端与web短信平台的结合，特开发了基于SinglarR消息推送机制的扫描登录。本系统涉及到以下知识点：
SignalR：http://signalr.net/ 这官网，ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库，可以简化开发人员将实时 Web 功能添加到应用程序的过程。实时 Web 功能是指这样一种功能：当所连接的客户端变得可用时服务器代码可以立即向其推送内容，而不是让服务器等待客户端请求新的数据。
二维码：使用的QRCode类库，https://github.com/jeromeetienne/jquery-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
找到对应的项目，点击“Install”安装按钮即可引用相关类库，同时应用下载相关js库。
关于SignalR的知识点，可以到官网 http://www.asp.net/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实体
所有文件，可在《6、相关文件》中下载。
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、二维码生成
二维码类库选择https://github.com/jeromeetienne/jquery-qrcode
添加script标签：
<script type="text/javascript" src="~/Scripts/qrcode.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.min.js"></script>
定义div标签，用来呈现二维码：
<!--二维码登录开始--> <div class="ewmcode_login" id="ewmcode_login"> <div class="codeText">安全登录 防止被盗</div> <div id="divQRCode" class="codebox" style="background:none;"></div> <div class="coderemindText">扫一扫登录</div> </div> <!--二维码登录结束-->
呈现二维码：
$("#divQRCode").html("");
$('#divQRCode').qrcode({ width: 180, height: 180, correctLevel: 0, text: codeUUID });
通过3与4，可实现具有120秒生命周期二维码的生成，对于不同的浏览者，生成的二维码是不同的，效果如下：
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、总结与下载
二维码应用比较广泛，记得去北京的故宫旁边的中山公园，里面的古树也有二维码，扫描可查看相关联信息。紧紧对于二维码而言就是存储有限信息，但就是这有限的信息，可以将庞大的信息系统连接一起，所用的应用不是前沿技术的突破，而是我们思考问题方式的转变、思维角度的变化。
主要文件下载：https://files.cnblogs.com/files/zsy/signalr%E4%B8%8Eqrcode.rar
文章转自：http://www.cnblogs.com/zsy/p/5882034.html
