具有身份的 Blazor WebAssembly 的 SignalR Hub 授权

SignalR Hub Authorization for Blazor WebAssembly with Identity

我已经设置了一个带有 JWT 身份验证的 SignalR Blazor WebAssembly 应用程序,配置为通过查询字段发送令牌 access_token。

在服务器上,我看到它正在根据此值分配 context.Token。

但是,对于带有 [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)] 注释的集线器,我收到 401。

为什么没有授权?

这是集线器的代码:https://github.com/jonasarcangel/SignalRAuthTest/blob/master/SignalRAuthTest/Server/SignalR/MessagesHub.cs

这是我在 Startup.cs 中的内容:https://github.com/jonasarcangel/SignalRAuthTest/blob/master/SignalRAuthTest/Server/Startup.cs

这是客户: https://github.com/jonasarcangel/SignalRAuthTest/blob/master/SignalRAuthTest/Client/Pages/SignalR.razor.cs

这适用于集线器上具有 [Authorize] 属性的 WebAssembly 自托管身份服务器(使用不记名令牌...)。

重要的是配置一个函数以在集线器启动时获取令牌。集线器连接可以使用发送访问令牌所需的任何传输机制。

 hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"), options =>
            {
                options.AccessTokenProvider = async () =>
                {
                    var accessTokenResult = await AccessTokenProvider.RequestAccessToken();
                    accessTokenResult.TryGetToken(out var accessToken);
                    return accessToken.Value;
                };
            })
            .Build();

整页改编自 3.1 SignalR 教程。

@using Microsoft.AspNetCore.SignalR.Client
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using Microsoft.AspNetCore.Authorization

@page "/chat"
@attribute [Authorize]
@implements IDisposable

<div class="form-group">
    <label>
        User:
        <input @bind="userInput" />
    </label>
</div>
<div class="form-group">
    <label>
        Message:
        <input @bind="messageInput" size="50" />
    </label>
</div>
<button @onclick="Send" disabled="@(!IsConnected)">Send</button>

<hr>

<ul id="messagesList">
    @foreach (var message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private HubConnection hubConnection;
    private List<string> messages = new List<string>();
    private string userInput;
    private string messageInput;

    [Inject]
    public NavigationManager NavigationManager { get; set; }

    [Inject]
    public IAccessTokenProvider AccessTokenProvider { get; set; }

    protected override async Task OnInitializedAsync()
    {

        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chathub"), options =>
            {
                options.AccessTokenProvider = async () =>
                {
                    var accessTokenResult = await AccessTokenProvider.RequestAccessToken();
                    accessTokenResult.TryGetToken(out var accessToken);
                    return accessToken.Value;
                };
            })
            .Build();

        hubConnection.On<string, string>("ReceiveMessage", (user, message) =>
        {
            var encodedMsg = $"{user}: {message}";
            messages.Add(encodedMsg);
            StateHasChanged();
        });

        await hubConnection.StartAsync();
    }

    Task Send() =>
        hubConnection.SendAsync("SendMessage", userInput, messageInput);

    public bool IsConnected =>
        hubConnection.State == HubConnectionState.Connected;

    public void Dispose()
    {
        _ = hubConnection.DisposeAsync();
    }
}

这是一个有效的 repo

这是changes I made to the standard WebAssembly with Identity project. Other than the page I posted I basically followed the WebAssembly Signalr tutorial

在您的解决方案中: SignalR.razor

 hubConnection = new HubConnectionBuilder()
             .WithUrl(NavigationManager.ToAbsoluteUri("/messageshub"), options =>
             {
                 options.AccessTokenProvider = async () =>
                 {
                     var accessTokenResult = await tokenProvider.RequestAccessToken();
                     accessTokenResult.TryGetToken(out var accessToken);
                     return accessToken.Value;
                 };
             })
            .Build();

在 Startup.cs 中将其改回模板。

services.AddAuthentication()
                  .AddIdentityServerJwt();

然后在您的集线器上 [授权]。

您的代码working