c# - Blazor WebAssembly 401 未经授权，即使我已获得授权

Question

我正在使用 Blazor WebAssembly Asp.Net Core 托管 PWA 并将 AspNetCore.Identity 集成到其中。我在客户端创建了 AuthenticationStateProvider，现在我想允许用户访问他需要获得授权的 Controller 。

我已经通过 postman 进行了测试，用户已创建并作为 aspnetusers 使用正确的凭据存储在数据库中。登录/帐户 Controller 按照我的意愿工作。

当用户获得授权时，它会在访问授权 Controller 请求时在浏览器中告知此异常:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]Unhandled exception rendering component: Response status code does not indicate success: 401 (Unauthorized).System.Net.Http.HttpRequestException: Response status code does notindicate success: 401 (Unauthorized).

Startup.cs(ConfigureServices-方法):

...
    serviceCollection.AddDbContext<SQLiteTestDbContext>(options =>
                {
                    options.UseSqlite(config["ConnectionStrings:SQLiteTestConnection"]);
                });
                serviceCollection.AddDefaultIdentity<IdentityUser>()
                    .AddEntityFrameworkStores<SQLiteTestDbContext>()
                    .AddDefaultTokenProviders();

    services.AddAuthentication(x =>
                    {
                        x.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
                    })
                    .AddJwtBearer(options =>
                    {
                        options.TokenValidationParameters = new TokenValidationParameters
                        {
                            ValidateIssuer = true,
                            ValidateAudience = true,
                            ValidateLifetime = true,
                            ValidateIssuerSigningKey = true,
                            ValidIssuer = Configuration["JwtIssuer"],
                            ValidAudience = Configuration["JwtAudience"],
                            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["JwtSecurityKey"]))
                        };
                    });

    services.AddHttpContextAccessor();
                services.Configure<IdentityOptions>(options =>
                    options.ClaimsIdentity.UserIdClaimType = ClaimTypes.NameIdentifier);
...

 

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      
    ...
        app.UseAuthentication();
        app.UseAuthorization();
    ...
    }

Program.cs 客户端

    public static async Task Main(string[] args)
            {
                var builder = WebAssemblyHostBuilder.CreateDefault(args);
                builder.RootComponents.Add<App>("app");
                builder.Logging.SetMinimumLevel(LogLevel.Warning);
    
                //Registering Shared-Library models
                builder.Services.AddScoped<ObjectModel>();

                builder.Services.AddBlazoredLocalStorage();
                builder.Services.AddAuthorizationCore();
                builder.Services.AddScoped<AuthenticationStateProvider, ApiAuthenticationStateProvider>();
                builder.Services.AddScoped<IAuthService, AuthService>();
    
                //Registered BlazorContextMenu Service
                builder.Services.AddBlazorContextMenu();
    
                //Registering FileReader service, for image upload -> Azure
                builder.Services.AddFileReaderService(options => options.UseWasmSharedBuffer = true);
                builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
    
                await builder.Build().RunAsync();
            }

我的具有授权属性的 Controller :

    [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
        [Route("api/[controller]")]
        [ApiController]
        public class ObjectController : ControllerBase
        {
....
    

Answer 1

注意:

1. 当您的用户尝试访问客户端上的 protected (使用 Authorize 属性注释)页面时，他应该先登录或注册。

2. 为了注册，他应该被重定向到一个帐户 Controller ，您应该在其中创建一个新用户，并将其添加到数据库中(您说您“将 AspNetCore.Identity 集成到其中”)，这是很好......并且应该用于验证和验证用户的身份。您的帐户 Controller 还应生成一个 Jwt token ，该 token 应传递给客户端应用程序并存储在本地存储中。

3. 现在，每当您的用户尝试访问您的 Web Api 端点上的 protected 资源时，您应该从本地存储中检索 Jwt token ，并将其添加到请求 header 中。如果您这样做，未经授权的响应将成为过去。

4. 自定义 AuthenticationStateProvider 是一个很好的地方，您可以从中管理将 Jwt token 存储在本地存储中并检索它以进行出站 HTTP 请求调用。

这里有一些示例代码来阐明您应该做什么:

@code {
    WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        var token = await TokenProvider.GetTokenAsync();
        forecasts = await Http.GetJsonAsync<WeatherForecast[]>(
            "api/WeatherForecast",
            new AuthenticationHeaderValue("Bearer", token));
    }
}

注意:TokenProvider 是一个自定义的 AuthenticationStateProvider，它定义了一个名为 GetTokenAsync 的方法，该方法提供(从本地存储读取 Jwt Token 并将其传递给调用代码)Jwt Token

希望这有助于...