目录
直入主题
一、创建项目
在之前服务端的解决方案中新增一个Web项目 WebLogin
二、安装Package
使用Nuget安装以下Package
Microsoft.AspNet.SignalR.JS
以上包有依赖项(贴心的Nuget帮咱把jQuery都引用好了),需要全部引入,引用完成后的packages.config文件如下:
<?xml version="1.0" encoding="utf-8"?>
<packages>
<package id="jQuery" version="1.6.4" targetFramework="net452" />
<package id="Microsoft.AspNet.SignalR.JS" version="2.4.1" targetFramework="net452" />
<package id="Microsoft.CodeDom.Providers.DotNetCompilerPlatform" version="1.0.0" targetFramework="net452" />
<package id="Microsoft.Net.Compilers" version="1.0.0" targetFramework="net452" developmentDependency="true" />
</packages>
三、完成登录界面
3.1创建登陆界面
在项目中新增一个WebForm页面 Login.aspx
其实我们这里登陆就是纯前端的了,所以用html更合适。不过这里用VS写的代码了,尊重一下它
页面引用 jQuery.js和SignalR的JS
还要引用服务端生成的Hub类 http://localhost:9999/signalr/hubs
贴代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebLogin.Login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>扫码登录页面</title>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.4.1.min.js"></script>
<script src="http://localhost:9999/signalr/hubs"></script>
<script>
$(function () {
var uuid, timer, hub = $.connection.myHub;
$.connection.hub.url = "http://localhost:9999/signalr";
//客户端注册getUserInfo 事件
hub.client.getUserInfo = function (n) {
window.clearInterval(timer);
$("#lblUserInfo").text(n);
}
//客户端注册getUUID事件
hub.client.getUUID = function (n) {
$("#lblUUID").text(n);
}
//初始化连接
hubInit = function (refreshInterval) {
refreshInterval == null && (refreshInterval = 30000);
//它封装了 webSockets、foreverFrame、serverSentEvents、longPolling四种主要的传输协议。
//① webSockets:它是HTML5提供的一种在单个 TCP 连接上进行全双工通讯的协议。
//② foreverFrame(永久帧):它适用于IE浏览器,是在页面中插入一个隐藏的iframe,利用其src属性在服务器和客户端之间创建一条长链接,服务器向iframe传输数据(通常是HTML,内有负责插入信息的javascript),来实时更新页面。
//③ severSentEvents(服务器发送事件,也成EventSourse):顾名思义。
//④ longPolling(Ajax长轮询):长轮询是对轮询的改进,客户端通过请求连接到服务器,并保持一段时间的连接状态,直到消息更新或超时才返回Response并中止连接,可以有效减少无效请求的次数。
//$.connection.hub.start({ transport: ['webSockets'] }).done(function () {
$.connection.hub.start().done(function () {
//调用服务端注册事件
hub.server.register();
});
//指定时间刷新二维码 默认30000,0为永不刷新
window.clearInterval(timer);
refreshInterval == 0 || (timer = window.setInterval(function () {
hub.server.register();
}, refreshInterval));
}
//停止二維碼刷新
stopRefresh = function () {
window.clearInterval(timer);
}
//启动喽
hubInit(0);
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>这是一个扫码登录页面</h1>
<br />
<span>我是一个二维码:</span><label id="lblUUID"></label>
<br />
<span>这里是登录结果:</span><label id="lblUserInfo"></label>
</div>
</form>
</body>
</html>
可以啦!
3.2验证结果
因为我们把代码写在了同一个解决方案中,就没法同时调试了。
我们进入服务端项目的生成目录中ScanQRCodeToLogin\SignalRService\bin\Debug 直接启动SignalRService.exe
然后将 WebLogin设置为启动项目,Login.aspx设置为启动页面
启动项目 进入Login页面,进入后注册成功,获取到UUID
这时我们新开个窗口,调用服务端扫码登陆的API模拟扫码登陆成功
可以看到我们登陆成功的同时,客户端收到了用户的登陆信息
好的,鼓掌,我们B/S版的扫码登陆就完成了
如果你想把它应用到你的项目中,你还需要把UUID在客户组转变成一个真正的二维码,用APP去读取二维码中的UUID,然后去调用 服务端登陆成功的接口
四、相关文章
[C#]SignalR实现扫码登录(B/S,C/S)(一)——服务端搭建
[C#]SignalR实现扫码登录(B/S,C/S)(二)——客户端搭建(Web版)
[C#]SignalR实现扫码登录(B/S,C/S)(三)——客户端搭建(WinForm版)
[C#]SignalR实现扫码登录(B/S,C/S)源码