Blazor 添加 HttpClientHandler 以将 Jwt 添加到请求的 HTTP 标头

Question

我将Visual Studio 2019和.Net Core 3.0.0-preview-7与标准 Blazor 客户端、服务器和共享模板一起使用。

在应用程序中，我们的服务器端 WebApi 应用程序将始终要求标头中存在 JWT 令牌以进行授权。

从以下内容来看

在 ASP.NET Core 中使用 IHttpClientFactory 发出 HTTP 请求

我创建了以下处理程序；

public class JwtTokenHeaderHandler : DelegatingHandler

{

    private readonly ILocalStorageService _localStorage;

    public JwtTokenHeaderHandler(ILocalStorageService localStorage)

    {

        _localStorage = localStorage;

    }

    protected override async Task<HttpResponseMessage> SendAsync(

        HttpRequestMessage request,

        CancellationToken cancellationToken)

    {

        if (!request.Headers.Contains("bearer"))

        {

            var savedToken = await _localStorage.GetItemAsync<string>("authToken");

            if (!string.IsNullOrWhiteSpace(savedToken))

            {

                request.Headers.Add("bearer", savedToken);

            }

        }

        return await base.SendAsync(request, cancellationToken);

    }

}

我用来Blazored.LocalStorage从本地存储获取保存的令牌并将其添加到标头。

现在，此时我不确定该怎么做，就好像我将以下内容添加到Blazor.Client Startup.cs;

services.AddTransient<JwtTokenHeaderHandler>();

services.AddHttpClient("JwtTokenHandler")

    .AddHttpMessageHandler<JwtTokenHeaderHandler>();

我收到错误消息；

“IServiceCollection”不包含“AddHttpClient”的定义，并且找不到接受“IServiceCollection”类型的第一个参数的可访问扩展方法“AddHttpClient”（您是否缺少 using 指令或程序集引用？）

谁能指导我在这里做错了什么？

Answer 1

下面是一个摘录，在默认 http 客户端上设置默认请求标头（通过 DI）。然后，对您的 Web api 的所有调用都将包含不记名令牌：public class ApiAuthenticationStateProvider : AuthenticationStateProvider{    private readonly HttpClient _httpClient;    private readonly ILocalStorageService _localStorage;    public ApiAuthenticationStateProvider(HttpClient httpClient, ILocalStorageService localStorage)    {        _httpClient = httpClient;        _localStorage = localStorage;    }    public override async Task<AuthenticationState> GetAuthenticationStateAsync()    {        var savedToken = await _localStorage.GetItemAsync<string>("authToken");        if (string.IsNullOrWhiteSpace(savedToken))        {            return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));        }        // **************    Set JWT header       ****************        _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", savedToken);        // *******************************************************        return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(ParseClaimsFromJwt(savedToken), "jwt")));    }    // ...}

Answer 2

目前您无法在客户端 Blazor 上使用 IHttpClientFactory。而且您不必从 HttpMessageHandler (DelegatingHandler) 派生。Blazor 已经做到了。以下是扩展 HttpClient 服务功能的扩展类，以启用将 Jwt 令牌添加到请求消息标头的功能...服务扩展.cs&nbsp; &nbsp; using System;&nbsp; &nbsp; using System.Collections.Generic;&nbsp; &nbsp; using System.Linq;&nbsp; &nbsp; using System.Net.Http;&nbsp; &nbsp; using System.Net.Http.Headers;&nbsp; &nbsp; using System.Security.Claims;&nbsp; &nbsp; using System.Text;&nbsp; &nbsp; using System.Text.Json.Serialization;&nbsp; &nbsp; using System.Threading.Tasks;&nbsp; &nbsp; using Microsoft.AspNetCore.Components;&nbsp; &nbsp; using Microsoft.Extensions.DependencyInjection;&nbsp;public static class ServiceExtensions&nbsp; &nbsp; {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;public static async Task<T> GetJsonAsync<T>(this HttpClient httpClient, string url, AuthenticationHeaderValue authorization)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var request = new HttpRequestMessage(HttpMethod.Get, url);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; request.Headers.Authorization = authorization;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var response = await httpClient.SendAsync(request);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var responseBytes = await response.Content.ReadAsByteArrayAsync();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return JsonSerializer.Parse<T>(responseBytes, new JsonSerializerOptions { PropertyNamingPolicy = JsonNamingPolicy.CamelCase });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}下面展示了如何调用 Web Api 上的端点，传递从 localStorage 读取的 Jwt 令牌。（顺便说一句，这些版本都没有数据保护）索引剃刀@page "/"@inject ILocalStorageService localStorage@inject HttpClient Http<div class="mdc-card main-content-card">&nbsp; &nbsp; <h1 class="@MdcTypography.H4">Hello, world!</h1>&nbsp; &nbsp; Welcome to your new app.</div>// Razor content to display emloyees come here.....@code {Employee[] employees;&nbsp; &nbsp; protected override async Task OnInitAsync()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var token = await localStorage.GetTokenAsync();&nbsp; &nbsp; &nbsp; &nbsp; employees = await Http.GetJsonAsync<Employee[]>(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "api/employees",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new AuthenticationHeaderValue("Bearer", token));&nbsp; &nbsp; }}希望这有效...如果没有，并且您无法解决错误，请来这里告诉社区...

Answer 3

以下将 X-CSRF-TOKEN 标头添加到 http 请求中：public class CustomHttpMessageHandler : DelegatingHandler{&nbsp; &nbsp; private readonly IJSRuntime _js;&nbsp; &nbsp; public CustomHttpMessageHandler(IJSRuntime js)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; _js = js;&nbsp; &nbsp; }&nbsp; &nbsp; protected override async Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var afrt = await _js.InvokeAsync<string>("getCookie", ".AFRT");&nbsp; &nbsp; &nbsp; &nbsp; request.Headers.Add("X-CSRF-TOKEN", afrt);&nbsp; &nbsp; &nbsp; &nbsp; return await base.SendAsync(request, cancellationToken);&nbsp; &nbsp; }}在 Program.cs 中配置如下：builder.Services.AddScoped<CustomHttpMessageHandler>();builder.Services.AddHttpClient("ApiClient", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))&nbsp; &nbsp; .AddHttpMessageHandler<CustomHttpMessageHandler>();builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("ApiClient"));您需要将 Microsoft.Extensions.Http 包安装到 Blazor WebAssembly 客户端。

Answer 4

Microsoft.Extensions.Http您需要包含 AddHttpClient 方法的NuGet 包。使用以下命令安装它：Install-Package Microsoft.Extensions.Http -Version 3.0.0-preview7.19362.4看起来，这个 NuGet 包是在服务器端 blazor 中自动提供的，但必须在客户端 blazor 中单独安装。