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

2023-11-06 19:58

本文主要是介绍基于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


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中,启动项目进行如下配置:

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

    两者必须都引用。

    调用接口如下:

   

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

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

4.1 二维码的生成   

    二维码类库选择https://github.com/jeromeetienne/jquery-qrcode 一个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标签,用来呈现二维码:


    呈现二维码:

                $("#divQRCode").html("");$('#divQRCode').qrcode({ width: 180, height: 180, correctLevel: 0, text: codeUUID });

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

4.2 二维码存储的是什么

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

    显然,扫描这两个图片上的二维码会得到不同的结果。

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

{"connectionid":"19c12e95-26d7-410c-8292-2a3afdd1a4da","uuid":"a04702df-6a52-4e1c-be8b-9b3dbeef4d72","islogin":0,"isvalid":1}
connectionid:客户端与SignalR联系的id,其格式为Guid

    • uuid:对应connectionid产生的一个唯一标识符,其格式为Guid

    • islogin:当前connectionid连接是否已登录,1—>表示登录,0—>未登录

    • isvalid:当前connectionid对应的uuid是否有效,1—>表示有效,0—>表示失效

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

5、扫描认证接口

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

5.1 输入参数


5.2 输出参数


5.3 API接口


6、总结与下载

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

    • 信息获取(名片、地图、WIFI密码、资料)

    • 网站跳转(跳转到微博、手机网站、网站)

    • 广告推送(用户扫码,直接浏览商家推送的视频、音频广告)

    • 手机电商(用户扫码、手机直接购物下单)

    • 防伪溯源(用户扫码、即可查看生产地;同时后台可以获取最终消费地)

    • 优惠促销(用户扫码,下载电子优惠券,抽奖)

    • 会员管理(用户手机上获取电子会员信息、VIP服务)

    • 手机支付(扫描商品二维码,通过银行或第三方支付提供的手机端通道完成支付)

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

    最后,上传《基于SignalR的消息推送与二维码描登录实现》主要文件下载:http://files.cnblogs.com/files/zsy/signalr%E4%B8%8Eqrcode.rar

相关文章:

  • ASP.NET SignalR 高可用设计

  • ASP.NET SignalR 2.0入门指南

  • SignalR SelfHost实时消息,集成到web中,实现服务器消息推送

  • ASP.NET WebHooks Receivers 介绍-WebHooks 让其变得便捷

  • Signalr系列之虚拟目录详解与应用中的CDN加速实战

  • 采用HTML5+SignalR2.0(.Net)实现原生Web视频

  • 基于.NET SingalR,LayIM2.0实现的web聊天室

原文地址:https://github.com/fanpan26/LayIM_NetClient/


.NET社区新闻,深度好文,微信中搜索dotNET跨平台或扫描二维码关注

原文地址:http://www.cnblogs.com/zsy/p/5882034.html


.NET社区新闻,深度好文,微信中搜索dotNET跨平台或扫描二维码关注

这篇关于基于SignalR的消息推送与二维码描登录实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/358740

相关文章

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、