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

Posted 2023-03-10

【中文标题】如何在没有 Microsoft 身份的情况下对 blazor 服务器进行 jwt 身份验证？

【英文标题】：how to jwt authentication blazor server without microsoft identity?

【发布时间】：2020-05-12 07:22:28

【问题描述】：

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

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

我必须使用 AuthenticationStateProvider？

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

还有，哪个更好？ blazor 服务器（一个项目）或 blazor server with webapi？（两个项目，blazor server和api）

【问题讨论】：

我编写了一个需要进行身份验证的管理控制台。从 blazor 中我执行 CRUD 操作而不使用 WebApi

【参考方案1】：

哪个更好？ blazor server（一个项目）还是blazor server with webapi？（两个项目，blazor server和api）

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

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

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

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

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

从本地存储中检索 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 提供。

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

更新：

我的意思是，哪个更好？带有信号器的 blazor 服务器或带有 webapi 的 blazor？

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

但是，在当前上下文中，Web Api 是 Web 上的 API，可以使用 HTTP 调用进行访问。更具体地说，它是您添加到项目中的应用程序，其中包含可使用 HttpClient 服务调用的端点的控制器。

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

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

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

以及如何使用 signalr 授权 blazor？

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

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

【讨论】：

我的意思是，哪个更好？带有信号器的 blazor 服务器或带有 webapi 的 blazor？以及如何使用信号器授权 blazor？

非常感谢。我意识到，blazor 服务器无需 webapi（通过 SignalR）即可访问服务器。我认为必须使用 webapi 来访问像 React 这样的服务器。我的问题是如何使用 blazor 和 signalr 进行身份验证

@reza malekmohamadi，您在此处发布了一个问题作为答案。我看到了，但没有时间处理它。请发布一个新问题，我会尽力回答。

对于那些来这里想知道如何访问TokenProvider的人，我找到了一篇好文章here。基本上，将 @inject IAccessTokenProvider tokenProvider 放在 .razor 文件的顶部，然后您可以使用类似 (await tokenProvider.RequestAccessToken()).TryGetToken(out var accessToken) 的代码来获取访问令牌。