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="https://www.jb51.net/~/Scripts/jquery.signalR-2.2.1.min.js"> </script> <script type="text/javascript" src="https://www.jb51.net/~/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 二维码的生成
二维码类库选择https://github.com/jeromeetienne/jquery-qrcode 一个QRCode原生态js类库，jquery对其进行了扩展。
添加script标签：
<script type="text/javascript" src="https://www.jb51.net/~/Scripts/qrcode.min.js"> </script> <script type="text/javascript" src="https://www.jb51.net/~/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—>表示失效