.NET 5 Blazor wasm Standalone with authentication library 注销问题

Question

如 Microsoft 文档所述，我已通过 Google 遵循身份验证的安全设置。

我可以登录，但在尝试注销时一直出现错误：

我的 URL 被重定向到：

https://localhost:5001/authentication/logout-failed?message=The%20logout%20was%20not%20initiated%20from%20within%20the%20page.

我收到以下错误：

There was an error trying to log you out: ''

我的注销代码非常基础：

注销按钮和导航：

<AuthorizeView>
            <Authorized>
                <button class="nav-link" @onclick="(e) => SignOut(e)">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none" /><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z" /></svg>
                </button>
            </Authorized>
        </AuthorizeView>

private async Task SignOut(MouseEventArgs args)
    {
        await SignOutManager.SetSignOutState();
        NavManager.NavigateTo("/authentication/logout", true);
    }

认证页面

@page "/authentication/{action}"

@code {
    [Parameter]
    public string Action { get; set; }

如果我没理解错，这应该足以注销。

我做错了什么？

感谢您的宝贵时间。

编辑

我的 AppSettings 配置为：

"Authentication": {
    "Google": {
      "Authority": "https://accounts.google.com/",
      "ClientId": "XXXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com",
      "ClientSecret": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
      "PostLogoutRedirectUri": "https://localhost:5001/authentication/logout-callback",
      "RedirectUri": "https://localhost:5001/authentication/login-callback",
      "ResponseType": "id_token",
    }
}

我的 program.cs 文件将其称为：

builder.Services.AddOidcAuthentication(options =>
            {
                builder.Configuration.Bind("Authentication:Google", options.ProviderOptions);
            });

我修改了我的代码：

NavManager.NavigateTo("/authentication/logout", true);

到

Navigation.NavigateTo("authentication/logout");

这并没有改变任何东西。 但您仍然必须像那样使用它。

我的控制台日志正在打印以下信息消息：

info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] Authorization failed. These requirements were not met: DenyAnonymousAuthorizationRequirement: Requires an authenticated user.

编辑 2

重要信息缺失

My MainLayout.razor is configured as:

@inherits LayoutComponentBase

@using DoIt.ComponentLibrary.Modal;

<AuthorizeView>
    <Authorized>
        <Modal />
        <NavMenu />
        <main>
            @Body
        </main>
    </Authorized>
    <NotAuthorized>
        <RedirectToLogin></RedirectToLogin>
        @Body
    </NotAuthorized>
</AuthorizeView>

Answer 1

我的MainLayout.razor配置为：

@inherits LayoutComponentBase

@using DoIt.ComponentLibrary.Modal;

<AuthorizeView>
    <Authorized>
        <Modal />
        <NavMenu />
        <main>
            @Body
        </main>
    </Authorized>
    <NotAuthorized>
        <RedirectToLogin></RedirectToLogin>
        @Body
    </NotAuthorized>
</AuthorizeView>

在我的 NavMenu 组件下，我配置了注销功能，如前所述：

    <AuthorizeView>
            <Authorized>
                <button class="nav-link" @onclick="(e) => SignOut(e)">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none" /><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z" /></svg>
                </button>
            </Authorized>
        </AuthorizeView>

private async Task SignOut(MouseEventArgs args)
    {
        await SignOutManager.SetSignOutState();
        NavManager.NavigateTo("/authentication/logout", true);
    }

这里的问题是：

我按注销
页面导航到 /authorization/logout
应用程序注销 -> 在此过程中将被删除，因为我不再具有查看此组件的权限。
注销功能未完全完成，因调用组件从UI中移除而中断。
出现上述错误

-> 在我看来这就是正在发生的事情。我找不到证实这一点的文档，因为与此流程相关的文档非常有限。

我通过从 AuthorizeView 组件中获取 NavMenu AND Body 组件来解决这个问题。

希望对您有所帮助。

编辑

真正的解决方案可以在@enet解释的描述中找到

Answer 2

@inherits LayoutComponentBase

@using DoIt.ComponentLibrary.Modal;

<AuthorizeView>
    <Authorized>
        <Modal />
        <NavMenu />
        <main>
            @Body
        </main>
    </Authorized>
    <NotAuthorized>
        <RedirectToLogin></RedirectToLogin>
        @Body
    </NotAuthorized>
</AuthorizeView>

我在您的代码中看到的唯一问题是在 NotAuthorized 委托中使用 @Body。它一开始就不应该在那里。问题是，在您注销后，执行了 NotAuthorized 委托，重定向到登录组件，之后渲染系统立即尝试渲染 Index 组件，因为它看到了 @Body 属性，但是，唉，你不是授权查看索引页面...我不知道是什么让你在那里使用它，但你当然应该删除它。至于导航菜单；这没有问题，它应该作为 MainLayout

渲染的一部分保留在那里

.NET 5 Blazor wasm Standalone with authentication library 注销问题

.NET 5 Blazor wasm Standalone with authentication library log out issue

blazor

.net-5

blazor-client-side

blazor-webassembly