在不需要的 OIDC 授权上禁用 Blazor“授权”初始屏幕

Question

我有一个 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>

这里的问题是我不能简单地删除授权标签。如果我这样做，无论如何都会显示默认页面。如果我可以让它仅在页面具有“@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>();

Answer 1

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

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

我的 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 传递给组件。我希望最终根据父页面的授权属性自动执行此操作，但目前可行。

Answer 2

我想你会在另一个帖子here 中找到你想要的答案。

我也去搜索，只是为了发现解决方案是多么容易：

<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>
<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <Authorizing>
                    @* YOUR CODE HERE *@
                </Authorizing>
                <NotAuthorized>
                    @if (!context.User.Identity.IsAuthenticated)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p>You know, I have no idea how you got here but this is not a place I let people into!</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address, well, yet anyway!</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>