.net - Blazor WebAssembly + Amazon Cognito

Question

我想设置一个西装外套 通过 进行身份验证的客户端应用程序AWS Cognito .

当我运行应用程序时，我没有重定向到登录页面，而是页面显示“正在授权...”几秒钟，而我在控制台中收到此错误:

The loading of “https://blazorapp.auth.eu-central-1.amazoncognito.com/login?…Q&code_challenge_method=S256&prompt=none&response_mode=query” in a frame is denied by “X-Frame-Options“ directive set to “DENY“.
This error page has no error code in its security info
info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]
      Authorization failed.

然后，默认“你好，世界!”显示索引页 (尽管据我所知，根据 App.razor 定义，未经身份验证的用户不应该看到它？) .如果我点击“登录”，我会在控制台中收到同样的错误，但几秒钟后 Cognito 托管的登录页面打开，我可以登录，我被重定向回我的应用程序，并且应用程序显示右上角是经过身份验证的用户信息，但控制台又有点奇怪:

info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]
      Authorization failed.
info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[1]
      Authorization was successful.

问题 1

如何摆脱这些错误并使我的应用程序重定向到 Cognito 登录页面而不会延迟约 10 秒？

问题 2

为什么无论我是否通过身份验证，我的应用程序中的所有内容始终可见？就好像 NotAuthorized下节点 AuthorizeRouteView在 App.razor根本没有影响，除非我在这里混淆了一些东西

代码:

程序.cs

builder.Services.AddOidcAuthentication(options =>
{
    options.ProviderOptions.Authority = "https://cognito-idp.{aws-region}.amazonaws.com/{cognito-userpoolid}";
    options.ProviderOptions.ClientId = "{cognito-clientid}";
    options.ProviderOptions.ResponseType = "code";
    options.ProviderOptions.RedirectUri = "https://localhost:44306/authentication/login-callback";
    options.ProviderOptions.PostLogoutRedirectUri = "https://localhost:44306/authentication/logout-callback";
});

App.razor(从模板创建，无修改)

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    @if (!context.User.Identity.IsAuthenticated)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p>You are not authorized to access this resource.</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

我只修改了对 AddOidcAuthentication 的调用在 Program.cs我自己，在使用个人用户帐户创建 Blazor WebAssembly 应用程序时，所有其他文件都由 Visual Studio 填充。

我正在努力使其工作，并非常感谢有关此主题的任何帮助

编辑:

按照@aguafrommars 的回答，我使用静态网站托管和 Amazon CloudFront 作为 CDN 将网站发布到 Amazon S3，但是，发布的应用程序的行为与描述的本地行为完全相同

扩展问题:

问题 1 扩展:

当页面显示“正在授权...”时，我只在控制台中收到所描述的错误，不会呈现 Cognito 托管的 UI，只有当我单击“登录”时，我才会被重定向(有重大延迟)到 Cognito 托管的 UI ，或者在没有重定向的情况下进行身份验证(如果我之前登录过)，也许这个 GIF 可以解决问题:



我可能是错的，但问题不是 Cognito 托管的 UI 拒绝在 iframe 中呈现 ?我的应用程序可以首先重定向到托管的 UI，就像它最终所做的那样吗？现在我得等一会儿 X-Frame-Options抛出错误，点击“登录”，等待另一个 X-Frame-Options抛出错误，然后最后我被重定向并且流程成功(在 gif 中，UI 没有显示，因为我之前在 session 中进行了身份验证)

问题 2 扩展:

我想要实现的行为是，如果用户未通过身份验证，他们将看不到应用程序的任何部分，而是将他们重定向到 Cognito 托管的 UI，并且只有在他们通过身份验证后才能看到任何内容。我试着玩弄 Authorize MainLayout.razor 中的属性，但结果总是一个空白屏幕，我想提供一些代码和细节，但我相信行为受到 中描述的错误的影响问题 1 ，这就是为什么我想先整理一下

Answer 1

我最终从 Cognito 切换到 Auth0，并从 Api Gateway 的 RestApi 升级到 HttpApi，其中包括内置的 JWT 授权器，我对更改感到非常满意。 Cognito 最终遇到了太多问题，但如果有人决心让它工作，请查看@aguafrommars 在已接受答案下的评论。