ASP.NET Core 3.1 SignalR：方法未被調用

Question

我有一個應用程序，前端是 React，后端是 nodejs。 我決定使用 SignalR 在 ASP.NET Core 3.1 中重寫后端。 我是 ASP.NET Core 3.1 和 SignalR 的新手，所以我在確定我遇到的問題的原因時有點困難。

問題是我從前端調用的集線器方法沒有被命中。 幾天前我按照這個例子成功地調用了集線器方法，但是由於引入了一些特性，例如這里描述的JWT 身份驗證和 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類的頂部。 如果在啟動時沒有配置任何默認授權方案，則需要包含這樣的授權方案

    [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 中的令牌在查詢中發送，因此您需要從查詢中讀取它們並將它們放在標頭上。

  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;
                }
            };
        });

如果您有任何問題，請告訴我。 希望它有效！