ASP.NET Core 3.1 SignalR：未调用方法

Question

我有一个应用程序，前端是 React，后端是 nodejs。我决定使用 SignalR 在 ASP.NET Core 3.1 中重写后端。我是 ASP.NET Core 3.1 和 SignalR 的新手，所以我很难确定我遇到的问题的原因。

问题是我从前端调用的集线器方法没有被命中。几天前我关注了the example，并设法让hub方法被调用，但是由于引入了一些功能，例如JWT身份验证as described here和MongoDB，现在该方法没有被调用。我不知道为什么！

考虑到浏览器中的日志输出，连接似乎是成功的。

我的startup.cs 看起来像这样：

namespace MpApp.API
{
  public class Startup
  {
    public Startup(IConfiguration configuration)
    {
      Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
      services.AddCors(options =>
      {
        options.AddPolicy("AllowSpecificOrigin",
          builder =>
          {
            builder
              .WithOrigins("http://localhost:3000", "http://localhost:3010")
              .AllowAnyMethod()
              .AllowAnyHeader()
              .AllowCredentials();
          });
      });

      var domain = $"https://{Configuration["Auth0:Domain"]}/";
      services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
        .AddJwtBearer(options =>
        {
          options.Authority = domain;
          options.Audience = Configuration["Auth0:Audience"];

          options.Events = new JwtBearerEvents
          {
            OnMessageReceived = context =>
            {
              var accessToken = context.Request.Query["access_token"];

              // If the request is for our hub...
              var path = context.HttpContext.Request.Path;
              if (!string.IsNullOrEmpty(accessToken) &&
                  (path.StartsWithSegments("/chathub")))
              {
                // Read the token out of the query string
                context.Token = accessToken;
              }

              return Task.CompletedTask;
            }
          };
        });

      services.AddAuthorization(options =>
      {
        options.AddPolicy("read:messages",
          policy => policy.Requirements.Add(new HasScopeRequirement("read:messages", domain)));
      });

      services.AddControllers();

      services.AddSignalR();

      // Register the scope authorization handler
      services.AddSingleton<IAuthorizationHandler, HasScopeHandler>();

      Debug.WriteLine("===== about to init config =====");
      services.Configure<DatabaseSettings>(
        Configuration.GetSection(nameof(DatabaseSettings)));

      services.AddSingleton<IDatabaseSettings>(sp =>
        sp.GetRequiredService<IOptions<DatabaseSettings>>().Value);

      services.AddSingleton<IBaseService, BaseService>();

      services.AddSingleton<CollectionService<Profile>>();
      services.AddSingleton<CollectionService<User>>();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      if (env.IsDevelopment())
      {
        app.UseDeveloperExceptionPage();
      }
      else
      {
        app.UseHsts();
      }

      app.UseHttpsRedirection();

      app.UseRouting();

      app.UseCors("AllowSpecificOrigin");

      app.UseAuthentication();
      app.UseAuthorization();

      app.UseEndpoints(endpoints =>
      {
        endpoints.MapControllers();
        endpoints.MapHub<ChatHub>("/chathub");
      });
    }
  }
}

而我的ChatHub.cs 看起来像这样：

namespace MyApp.API.Hubs
{
  public class ChatHub : Hub
  {
    protected CollectionService<Profile> _profileService;
    protected CollectionService<User> _userService;

    public ChatHub(CollectionService<Profile> profileService, CollectionService<User> userService)
    {
     // This constructor is being called
      _profileService = profileService;
      _userService = userService;
    }

    [Authorize]
    public async Task UpdateProfile()
    {
      // I have put a breakpoint here but it is not being hit
      await Clients.All.SendAsync("Test");
    }
  }
}

React 前端似乎正在正确等待连接，以及正确调用方法，但它不起作用！

我的 React 提供者的相关代码如下所示：

useEffect(() => {
  (async () => {
    if (isAuthenticated) {
      const accessToken = await getAccessTokenSilently();

      const connection = new signalR.HubConnectionBuilder()
        .configureLogging(signalR.LogLevel.Debug)
        .withUrl('http://localhost:3010/chathub', {accessTokenFactory: () => accessToken})
        .build();

      await connection.start();
      setConnected(true);
    }
    // eslint-disable-next-line
  })()
}, [isAuthenticated]);

useEffect(() => {
  (async () => {
    if(connected && user) {
      // this code is being hit, but the method on the back end is not
      await connection?.send('UpdateProfile');
    }
  })()
}, [connected, user])

有人知道为什么会这样吗？我在调用中尝试了一个小写的方法名称，但这没有帮助。

Answer 1

将[Authorize] 属性放在ChatHub 类的顶部。如果你没有在 Startup 上配置任何默认的授权方案，你需要包括一个这样的授权方案

    [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
    public class ChatHub: Hub 
    {
          //...
    }

*注意：当我使用 SignalR 时，我将我的 DTO 转换为 JSON 字符串并将它们传递给服务器，也许您需要为具有参数的函数执行此操作。 像这样：

     public void FunctionName(string  dtoString)
     {
        
        var dto = JsonConvert.DeserializeObject<MyObjectDto>(dtoString);
        //Do something with my DTO
        
      }

并且还像这样将对象作为 JSON 字符串传回给客户端

    var resultString = JsonConvert.SerializeObject(ResultObject, new 
    JsonSerializerSettings
            {
                ContractResolver = new CamelCasePropertyNamesContractResolver()
            });
    Clients.Caller.SendAsync("ClientFunction", resultString  );

SignalR中的token是在query中发送的，所以你需要从query中读取它们并放在header中。

  services.AddAuthentication()
        .AddJwtBearer(options =>
        {
            options.RequireHttpsMetadata = false;
            options.SaveToken = true;
            options.TokenValidationParameters = new TokenValidationParameters
            {
                ValidateAudience = false,
                ValidIssuer = [Issuer Site],
                IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes([YOUR SECRET KEY STRING]))
            };
            options.Events = new JwtBearerEvents
            {
                OnMessageReceived = context =>
                {
                    var path = context.Request.Path;
                    var accessToken = context.Request.Query["access_token"];
                    if (!string.IsNullOrEmpty(accessToken) && path.StartsWithSegments("/chathub"))
                    {
                        
                        context.Request.Headers.Add("Authorization", new[] { $"Bearer {accessToken}" });
                    }
                    return Task.CompletedTask;
                }
            };
        });

如果您有任何问题，请告诉我。 希望它有效！