[C#]SignalR实现扫码登录(B/S,C/S)（二）——客户端搭建(Web版)

最新推荐文章于 2024-03-16 17:30:06 发布

YoungerXu

最新推荐文章于 2024-03-16 17:30:06 发布

阅读量1.2k

点赞数

分类专栏： SignalR 扫码登录 C# 文章标签： 1024程序员节 c# websocket webform winform

本文链接：https://blog.csdn.net/xy596356456/article/details/109260097

版权

C# 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

SignalR

4 篇文章 1 订阅

订阅专栏

扫码登录

4 篇文章 0 订阅

订阅专栏

直入主题

一、创建项目

在之前服务端的解决方案中新增一个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)（一）——服务端搭建

[C#]SignalR实现扫码登录(B/S,C/S)（二）——客户端搭建(Web版)

[C#]SignalR实现扫码登录(B/S,C/S)（三）——客户端搭建(WinForm版)

[C#]SignalR实现扫码登录(B/S,C/S)源码

YoungerXu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
[C#]SignalR实现扫码登录(B/S,C/S)（二）——客户端搭建(Web版)

直入主题一、创建项目在之前服务端的解决方案中新增一个Web项目 WebLogin二、安装Package使用Nuget安装以下PackageMicrosoft.AspNet.SignalR.JS以上包有依赖项(贴心的Nuget帮咱把jQuery都引用好了)，需要全部引入，引用完成后的packages.config文件如下：<?xml version="1.0" encoding="utf-8"?><packages> <package
复制链接

扫一扫