首页 > 解决方案 > 在不需要的 OIDC 授权上禁用 Blazor“授权”初始屏幕

问题描述

我有一个 blazor wasm 应用程序,通过 IdentityServer4 通过 oidc 进行预渲染和身份验证。我几乎已经完成了所有设置,并且一切看起来都不错。我遇到的问题是来自 Microsoft.AspNetCore.Components.WebAssembly.Authentication 的 oidc 包,似乎有一个我无法禁用的强制“授权”初始屏幕。在不需要身份验证的页面上进行预呈现意味着用户将看到页面上的数据,然后在一两秒后它将被全屏身份验证屏幕替换,然后页面上的数据将返回。这方面的用户体验太糟糕了,我想我一定是设置错误了,这不是它工作的唯一方式,但对于我的生活,我无法靠自己或通过谷歌找到解决方案......

App.razor

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <p>Not authorized.</p>
                </NotAuthorized>
                <Authorizing>
                    <p>Authorizing</p>
                </Authorizing>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

这里的问题是我不能简单地删除 Authorizing 标签。如果我这样做,无论如何都会显示默认页面。如果我可以让它仅在页面具有“@attribute [Authorize]”属性或至少没有“@attribute [AllowAnonymous]”时才显示启动屏幕,我真的很喜欢它。

我是否遇到了包装的限制?

感谢您对此的任何指导。

也可能有用,但可能没有。该服务是这样设置的。

builder.Services.AddOidcAuthentication<RemoteAuthenticationState, MyRemoteUserAccount>(options =>
{
    builder.Configuration.Bind("OidcProviderOptions", options.ProviderOptions);

    options.UserOptions.ScopeClaim = JwtClaimTypes.Scope;
    options.UserOptions.RoleClaim = JwtClaimTypes.Role;
})
.AddAccountClaimsPrincipalFactory<RemoteAuthenticationState, MyRemoteUserAccount, MyUserFactory>();

标签: c#.netauthenticationauthorizationblazor

解决方案


好的,我想我已经想出了一个可以接受的解决方案。这有点繁琐,但可以完成工作。

我已经放弃了在根级别显示身份验证状态的任何尝试。

我的 App.razor 现在看起来像这样

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

然后在应用程序的根模板中我有这样的东西

@if(AllowAnonymous)
{
    @RootBody
}
else
{
    <AuthorizeView>
        <NotAuthorized>
            <p>Not authorized to read page contents.</p>
        </NotAuthorized>
        <Authorizing>
            <p>Authorizing.</p>
        </Authorizing>
        <Authorized>
            @RootBody
        </Authorized>
    </AuthorizeView>
}

如果我需要禁用身份验证状态,我将 AllowAnonymous=true 传递给组件。我希望最终根据父页面的授权属性自动执行此操作,但这目前有效。


推荐阅读