Blazor WASM 应用程序未正确解释角色

Question

我正在使用 Blazor WASM（我是新手）构建一个应用程序。我使用 Auth0 来保证安全。 当我将角色声明放到前端 Razor 页面时，它没有正确解释角色，我几乎束手无策。

所以，从服务器开始。 我使用 JwtBearer，因此我们可以使用角色对几个 API 进行身份验证。 那部分有效。

在服务器的 Program.cs 中：

...
builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(JwtBearerDefaults.AuthenticationScheme, c =>
    {
        c.Authority = builder.Configuration["Auth0:Domain"];
        c.TokenValidationParameters = new Microsoft.IdentityModel.Tokens.TokenValidationParameters
        {
            ValidAudience = builder.Configuration["Auth0:Audience"],
            ValidIssuer = builder.Configuration["Auth0:Domain"]
        };
    });

var app = builder.Build();
...

接下来，客户显然想使用 OIDC？ 好吧，很奇怪，但是很好……

客户端程序.cs

builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("Auth0", options.ProviderOptions);
    options.ProviderOptions.ResponseType = "code";
    options.ProviderOptions.AdditionalProviderParameters.Add("audience", builder.Configuration["Auth0:Audience"]);
    // Without this setting, Blazor wants the role claim to be http://schemas.microsoft.com/ws/2008/06/identity/claims/role.
    options.UserOptions.RoleClaim = "https://thiscompany.com/roles";
});

await builder.Build().RunAsync();

最后是 Razor 页面。 在这个例子中，我想让它在用户未登录时显示登录提示（登录被检测为没有角色的授权），而只有管理员可以看到“hello world”消息； 它向具有任何其他角色的登录用户显示未经授权的消息。 我在该消息中添加了一些工具，因此我可以确切地看到它在做什么。

<AuthorizeView>
    <Authorized>
        <AuthorizeView Roles="Admin">
            <Authorized Context="loggedInUser">
                <PageTitle>Administration Center</PageTitle>
                <h1>Hello, world!</h1>
            </Authorized>
            <NotAuthorized Context="loggedInUser">
                <p>YOU ARE NOT WELCOME HERE</p>
                <p>Claims: <ul>
                    @for(int i = 0; i < Claims(context).Count; i++)
                    {
                        <li>@Claims(context)[i]</li>
                    }
                    </ul>
                </p>
                <p>Role claim: @RoleClaim(context)</p>
                <p>Is Admin in @GetRoleClaimType(context)? @context.User.IsInRole("Admin")</p>
            </NotAuthorized>
        </AuthorizeView>
    </Authorized>
    <NotAuthorized>
        <PageTitle>The Admin-Only App</PageTitle>
        <h1>The Admin-Only App</h1>
        Please log in to access this application.
    </NotAuthorized>
</AuthorizeView>

如果我登录并拥有管理员角色，我应该会看到“Hello world”。 相反，会发生以下情况：

你在这里不受欢迎

索赔：

• https://thiscompany.com/roles ：["Admin","SomeOtherRole"]

<...其他不相关的声明...>

角色声明： https://thiscompany.com/roles:["Admin","SomeOtherRole"]

管理员在https://thiscompany.com/roles吗？ 错误的

我的理解是它应该分解角色数组并授予我访问权限，但事实并非如此。 如果我修改 Auth0 以便获得索赔：

https://thiscompany.com/roles: Admin

然后它工作正常，所以我有一个偷偷摸摸的怀疑 JSON 数组正在被编码，以便它解码为文本字符串。 但是，使用提供的角色数组是一项要求。 我真的迷失了这里的杂草，不知道在哪里或如何调整它，以便 Blazor 可以理解角色声明。

Answer 1

我找到了解决方案。 问题是 Blazor 不分解角色数组，它只是获取原始文本并将其解释为角色的名称，而不是它需要处理的 JSON object。 Blazor 期望具有相同类型的多个角色声明，每个声明一个角色。

要为其分解角色声明，您必须创建一个自定义工厂。

using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication.Internal;
using System.Security.Claims;
using System.Text.Json;

public class CustomUserFactory : AccountClaimsPrincipalFactory<RemoteUserAccount>
{
    public CustomUserFactory(IAccessTokenProviderAccessor accessor)
        : base(accessor)
    {
    }

    public async override ValueTask<ClaimsPrincipal> CreateUserAsync(
        RemoteUserAccount account,
        RemoteAuthenticationUserOptions options)
    {
        var user = await base.CreateUserAsync(account, options);
        var claimsIdentity = (ClaimsIdentity?)user.Identity;

        if (account != null && claimsIdentity != null)
        {
            MapArrayClaimsToMultipleSeparateClaims(account, claimsIdentity);
        }

        return user;
    }

    private void MapArrayClaimsToMultipleSeparateClaims(RemoteUserAccount account, ClaimsIdentity claimsIdentity)
    {
        foreach (var prop in account.AdditionalProperties)
        {
            var key = prop.Key;
            var value = prop.Value;
            if (value != null && (value is JsonElement element && element.ValueKind == JsonValueKind.Array))
            {
                // Remove the Roles claim with an array value and create a separate one for each role.
                claimsIdentity.RemoveClaim(claimsIdentity.FindFirst(prop.Key));
                var claims = element.EnumerateArray().Select(x => new Claim(prop.Key, x.ToString()));
                claimsIdentity.AddClaims(claims);
            }
        }
    }
}

然后在调用 AddOidcAuthentication 之后立即将其添加到服务中。

builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("Auth0", options.ProviderOptions);
    options.ProviderOptions.ResponseType = "code";
    options.ProviderOptions.AdditionalProviderParameters.Add("audience", builder.Configuration["Auth0:Audience"]);
    // Without this setting, Blazor wants the role claim to be http://schemas.microsoft.com/ws/2008/06/identity/claims/role.
    options.UserOptions.RoleClaim = "https://thiscompany.com/roles";
});
builder.Services.AddApiAuthorization().AddAccountClaimsPrincipalFactory<CustomUserFactory>();

await builder.Build().RunAsync();

感谢 Marinko Spasojevic 在他关于 Code Maze 的文章（在“支持多个角色”部分）中提出问题和解决方案。 https://code-maze.com/using-roles-in-blazor-webassembly-hosted-applications/