authentication - Blazor WebAssembly SignalR 身份验证

Question

我很想看到一个关于如何使用 Blazor 的 WebAssembly 风格向 SignalR 集线器连接添加身份验证的示例。我的 dotnet 版本是 3.1.300。

我可以按照以下步骤来获得一个开放的、未经身份验证的 SignalR 连接:https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr-blazor-webassembly?view=aspnetcore-3.1&tabs=visual-studio

我发现的所有教程似乎都较旧或用于服务器托管类型，并且不使用内置模板。

我已使用适当的模板和这些说明(包括数据库)向后端的其余部分添加了身份验证:
https://docs.microsoft.com/en-us/aspnet/core/security/blazor/?view=aspnetcore-3.1

但是每次我将 [Authenticate] 添加到聊天中心时，都会返回一个错误。有什么方法可以扩展第一个教程，我们可以验证那里创建的集线器？搭上内置的 ASP.NET 系统会很棒，但是如果最好的话，我只需将 token 作为附加参数传入并自己做就可以了。在这种情况下，我需要学习如何从 Blazor WebAssembly 中获取 token ，然后在服务器上的某个位置查找它。这似乎是错误的，但作为替代方案，它基本上可以满足我的需求。

那里有各种各样的半解决方案，或者是为旧版本设计的，但没有任何东西可以建立在 MS 提供的股票教程之上。

更新:
按照本新闻稿中的提示https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-preview-2-release-now-available/ ，我现在可以从 Razor 页面内部获取一个 token ，并将其注入(inject)到标题中。我想这很好？？但是，我如何获取它并在服务器上使用它呢？

这是 Razor 代码的片段:

protected override async Task OnInitializedAsync()
{
    var httpClient = new HttpClient();
    httpClient.BaseAddress = new Uri(UriHelper.BaseUri);

    var tokenResult = await AuthenticationService.RequestAccessToken();

    if (tokenResult.TryGetToken(out var token))
    {
        httpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {token.Value}");

        hubConnection = new HubConnectionBuilder()
            .WithUrl(UriHelper.ToAbsoluteUri("/chatHub"), options =>
            {
                options.AccessTokenProvider = () => Task.FromResult(token.Value);
            })
            .Build();
    }
}

更新 2:
我在这里尝试了提示: https://github.com/dotnet/aspnetcore/issues/18697

并将我的代码更改为:

        hubConnection = new HubConnectionBuilder()
            .WithUrl(NavigationManager.ToAbsoluteUri("/chatHub?access_token=" + token.Value))
            .Build();

但没有喜悦。

Answer 1

我遇到了同样的问题。
我的解决方案是双面的:我必须在前端和后端修复一些东西。
布雷泽
在您的连接构建器中，您应该添加 AccessTokenProvider:

string accessToken = "eyYourToken";
connection = new HubConnectionBuilder()
    .WithUrl("https://localhost:5001/hub/chat", options =>
    {
        options.AccessTokenProvider = () => Task.FromResult(token.Value);
    })
    .Build();

options.AccessTokenProvider是 Func<Task<string>> 类型，因此您也可以在此处执行异步操作。如果需要的话。
仅这样做，应该允许 SignalR 工作。
后端
然而! 当 SignalR 尝试创建 WebSocket 连接时，您可能仍会看到错误。这是因为您可能在后端使用 IdentityServer，而这不支持来自查询字符串的 Jwt token 。不幸的是，SignalR 试图通过一个名为 access_token 的查询字符串参数来授权 websocket 请求。 .
将此代码添加到您的启动中:

.AddJwtBearer("Bearer", options =>
{
    // other configurations omitted for brevity
    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("/hubs"))) // Ensure that this path is the same as yours!
            {
                // Read the token out of the query string
                context.Token = accessToken;
            }
            return Task.CompletedTask;
        }
    };
});

编辑 1:阐明了 Blazor SignalR 代码的用法