authentication - 如何在没有微软身份的情况下进行 jwt 身份验证 blazor 服务器？

Question

我正在使用 blazor 服务器(不使用 webapi、httpclient 和 ...)
我想使用 jwt 进行身份验证

我应该在哪里存储 token ？ localStorage 还是 cookie？

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

我必须使用AuthenticationStateProvider？

我使用了 httpContext 但我得到了一个错误，除非它适合 cshtml
文件我也在 AuthenticationStateProvider 中使用了 localstorage 但是
刚刚出错

还有，哪个更好？ blazor 服务器(一个项目)或
带 webapi 的 blazor 服务器？(两个项目，blazor 服务器和 api)

Answer 1

which one is better? blazor server (one project) or blazor server with webapi?(two project, blazor server and api)

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

Where should I store token? localStorage or cookie?

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

how to send jwt to server all of the request

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

从您的本地存储中检索 Jwt token (前提是您的应用具有
已经对用户进行了身份验证，并将 token 存储在本地存储中)
例如:

@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 token 传递给 Wep Api 端点。

I had to use AuthenticationStateProvider?

你问是否使用 AuthenticationStateProvider ？

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

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

See here, in my answer, 我如何使用它们...

更新:

I mean, which is better? blazor server with signalr or blazor with webapi?

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

但是，在当前上下文中，Web Api 是 Web 上的 API，可以使用 HTTP 调用进行访问。更具体地说，它是一个应用程序，您添加到您的项目中，并带有 Controller ，这些 Controller 公开您可以使用 HttpClient 服务调用的端点。

如您所见，它不是 SignalR 与 Web Api，因为这两个术语指的是两个完全不同的概念。您可能会问 SignalR 与 HTTP 协议(protocol)之间的区别...

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

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

and how authorize blazor with signalr?

我想现在你知道答案了。服务器 Blazor 应用程序基于 SignalR。在这方面你什么都不做。只需创建此类项目，并开始编码，学习 Blazor 组件模型，这是 Blazor 的核心。

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