如何在没有 Microsoft 身份的情况下进行 jwt 身份验证 Blazor 服务器？

Question

我正在使用 blazor 服务器（不使用 webapi、httpclient 等）并且我想使用 jwt 进行身份验证

1. 我应该在哪里存储令牌？本地存储还是cookie？
2. 如何将jwt发送到服务器所有请求？

3. 我必须使用 AuthenticationStateProvider 吗？

   我使用了 httpContext 但出现了错误，除非它适合 cshtml 文件 我还在 AuthenticationStateProvider 中使用了 localstorage 但出现了错误

   另外，哪个更好？blazor 服务器（一个项目）还是带有 webapi 的 blazor 服务器？（两个项目，blazor 服务器和 api）

Answer 1

哪一个更好？blazor 服务器（一个项目）还是带有 webapi 的 blazor 服务器？（两个项目，blazor 服务器和 api）

没有比这更好的事情了。这一切都取决于您的要求。您需要或希望使用 Wep Api 吗？如果您不打算使用 Web Api，请不要使用 Jwt 身份验证。当您想要访问 Web Api 端点时，将使用 Jwt 访问令牌。您可以改用 Identity UI 系统来验证您的用户。您可能对此很熟悉，并且可以在短时间内进行设置和运行。

我应该在哪里存储令牌？本地存储还是cookie？

You may use the JavaScript local storage to store and retrieve Jwt tokens.

如何将jwt发送到服务器所有请求

您的意思是服务器 Wep Api 端点，对吗？

1. 从本地存储检索 Jwt 令牌（前提是您的应用程序已经对用户进行了身份验证，并将令牌存储在本地存储中），例如：

   @code {
   
    List<Hotel> hotels;
   
    protected override async Task OnInitializedAsync()
    {
       // Read the token from the store
       var token = await TokenProvider.GetTokenAsync();
   
       var httpClient = clientFactory.CreateClient();
       httpClient.BaseAddress = new Uri("https://localhost:44381/");
   
       // Perform HTTP call to your Web Api end point Hotels
       // Deserialized the response into a list of hotel objects.
       hotels = await httpClient.GetJsonAsync<List<Hotel>>("api/hotels",
                       new AuthenticationHeaderValue("Bearer", token));
   
    }
   }
   

请注意我如何将 Jwt 令牌传递到 Wep Api 端点。

我必须使用 AuthenticationStateProvider 吗？

您是否询问是否使用 AuthenticationStateProvider ？

通常，您不使用 AuthenticationStateProvider。它的子类 ServerAuthenticationStateProvider 会自动添加到 DI 容器中，因此您可以将其注入到组件中并使用它。在客户端 Blazor 中，您必须创建自定义 AuthenticationStateProvider。

但是，您必须使用 AuthorizeRouteView 和 AuthorizeView 等组件，它们需要 AuthenticationState 对象才能发挥作用，并且它由 AuthenticationStateProvider 提供。

在这里，在我的回答中，我如何使用它们......

更新：

我的意思是，哪个更好？带有 signalr 的 blazor 服务器还是带有 webapi 的 blazor 服务器？

Blazor Server App 是基于 SignalR 的 SPA，意味着应用程序的客户端（浏览器）和应用程序的服务器端（服务器）之间的通信是通过 SignalR 实现的。一般来说，SignalR 在当前上下文中是构成上述 Blazor 服务器应用程序的两个部分之间的传输和通信手段。

然而，在当前上下文中，Web Api 是可以使用 HTTP 调用访问的 Web 上的 API。更具体地说，它是一个添加到项目中的应用程序，其中的控制器公开了可以使用 HttpClient 服务调用的端点。

正如您所看到的，这不是 SignalR 与 Web Api 的对比，因为这些术语指的是两个完全不同的概念。您可能会问 SignalR 与 HTTP 协议之间的区别......

我会问正确的问题而不是您的问题：我应该如何使用服务器端 Blazor 应用程序访问数据以及我应该使用什么服务或 Web Api ？我在其他答案中详细回答了这个问题。您还可以查阅文档。

请注意，您应该创建一个希望从 Blazor 服务器应用程序使用它的 Web Api 项目。

以及如何使用 signalr 授权 blazor？

我想现在你已经知道答案了。Server Blazor 应用程序基于 SignalR。在这方面你什么也没做。只需创建此类项目，然后开始编码，学习 Blazor 组件模型，这是 Blazor 的核心。

最后，我只想提一下，Blazor 客户端或 Blazor WebAssembly 应用程序不使用 SignalR，而是使用 WebAssembly，以防您的困惑来自这里。