专业网站建设品牌，十四年专业建站经验，服务6000+客户--广州京杭网络

免费热线：400-683-0016      微信咨询  |  联系我们

• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

C#中SignalR实现基于ASP.NET扫描二维码登录PC网站

当前位置：网站建设 > 技术支持

扫描二维码登录 PC 网站，在这里只是简单的做了个例子。借助于 ASP.NET SignalR，我们可以轻松实现。具体的步骤如下：

   首先，通过 Nuget 来引用 ASP.NET SignalR

 在这里，我简单的创建了一个 MVC 项目，结构如下：

我创建了名为 Account 的控制器。里面分别创建了 2 个 Action (Index、Auth)。

/Account/Index 负责生成扫描的二维码。

/Account/Auth 负责完成登录授权。

两个页面都需要实现引用 jquery 和

jquery.signalR-2.2.1.min.js

通过 nuget 引用的时候，scripts 文件夹中就有。

在 / Account/Index 下，后台 Action 不需要什么写什么代码，主要看看视图。

   <div id="container">

   </div>

   <script src="~/Scripts/jquery-1.6.4.min.js"></script>

   <script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>

   <script src="~/signalr/hubs"></script>

   <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

   <script type="text/javascript">

       $(function () {

           var $container = $("#container");

           var _LoginHub = $.connection.LoginHub;

           $.connection.hub.start().then(init); //开始

           /*

           *

           * 初始化

           *

           */

           function init() {

               _LoginHub.server.getConnectionId().done(function (serverNode) { });

           }

           /*

           *

           *client

           *

           */

           $.extend(_LoginHub.client, {

               showQRCode: function (id) {

                   console.log(id);

                   jQuery('#container').qrcode(document.location.origin + "/account/auth?id=" + id);

               },

               gotoUrl: function () { alert("登录成功！");  }

           });

       }());

   </script>

就这就简单。$.extend () 方法，是为了给 client 对象增加扩展函数，方便服务端调用。

来，看看 Hub 的实现：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Microsoft.AspNet.SignalR;

using Microsoft.AspNet.SignalR.Hubs;

namespace SignalRLogin.Hubs

{

   /// <summary>

   /// LoginHub

   /// </summary>

   [HubName("LoginHub")]

   public class LoginHub : Hub

   {

       /// <summary>

       ///<![CDATA[获取客户端ID]]>

       /// </summary>

       public void GetConnectionId()

       {

           try

           {

               string connectionId = Context.ConnectionId;//客户端ID

               Clients.Client(connectionId).showQRCode(connectionId);//调用客户端方法，显示二维码

           }

           catch (Exception exception)

           {

           }

       }

       /// <summary>

       /// 登录

       /// </summary>

       public void Login(string connectionId)

       {

           try

           {

               //登录成功后，跳转到指定页

               Clients.Client(connectionId).gotoUrl(connectionId);//调用客户端方法，显示二维码

           }

           catch (Exception exception)

           {

           }

       }

   }

}

里面订阅 2 个方法，GetConnectionId 是为了给客户端提供一个获取连接标示的方法。Login 方法，就是来是来实现登录逻辑，这里省去登录的具体细节。

场景是这样的：当用户 A 访问我们的网站 W 的登录页面时，我们给他提供了一个扫描二维码实现登录的地方。

当用户用手机，扫描我们给他们的二维码时，二维码这里其实就是一个带有 connectionId 的连接，通过 connectionId 来保持客户端与服务器的连接。用户 A 通过扫描指定的二维码，就会打开我们生成二维码的连接地址，这里指的就是 (/Account/Auth)。

用户 A 点击登录按钮后，我们通过 js，调用服务器对象的 login 方法，同时把传递过来的 connectionId 再传给服务器，这样，服务器就通过 connectionId 找到对应的客户端，来实现服务器和客户端的交互。

来看看效果吧：

这里需要注意的地方是，connectionid 每次刷新页面的时候，都会改变，切记。于是，我们在生成二维码的页面上，定义了登录成功后回调函数。这里是 gotoUrl。用户扫描打开 / Account/Auth 页面后，点击确定按钮，这个过程，PC 端网页是没有刷新的，也就是说，PC 端的 connectionId 是没有改变的。我们通过，Account/Auth 页面，完成登录授权后，再调用客户端的回调函数 gotoUrl，这个过程就完成了。

SignalR 的用法非常好了解。说白了，就是客户端和服务端相互调用，来达到交互的目的。我们在后台声明一个类，让它继承 Hub 类后，在类中定义我们需要的方法，然后客户端通过 $.connection.HubName，就能获取到服务端定义的对象在客户端的映射。服务端 Hub 派生类中定义的方法，在客户端，都转变成开头字母小写的 js 方法，服务端和 js 可以相互调用传参。

好了，关于 ASP.NET SignalR 的用法，今天就简单的给大家介绍到这里了，下一次，向大家介绍一下，SignalR 聊天室。