Blazor WebAssembly + Amazon Cognito

Question

我想设置一个Blazor客户端应用程序，通过AWS Cognito进行身份验证。

\n\n

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

\n\n

The loading of \xe2\x80\x9chttps://blazorapp.auth.eu-central-1.amazoncognito.com/login?\xe2\x80\xa6Q&code_challenge_method=S256&prompt=none&response_mode=query\xe2\x80\x9d in a frame is denied by \xe2\x80\x9cX-Frame-Options\xe2\x80\x9c directive set to \xe2\x80\x9cDENY\xe2\x80\x9c.\nThis error page has no error code in its security info\ninfo: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]\n      Authorization failed.\n

\n\n

然后，默认“Hello, world!” 显示索引页面（尽管据我了解，根据 App.razor 定义，未经身份验证的用户不应该看到它？）。如果我单击“登录”，我会在控制台中收到相同的错误，但几秒钟后，Cognito 托管的登录页面打开，我能够登录，我会被重定向回我的应用程序，并且应用程序显示经过身份验证的用户信息位于右上角，但控制台又有点奇怪：

\n\n

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

\n\n

问题1

\n\n

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

\n\n

问题2

\n\n

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

\n\n

代码：

\n\n

程序.cs

\n\n

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

\n\n

App.razor（从模板创建，没有修改）

\n\n

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

\n\n

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

\n\n

我正在努力让它发挥作用，非常感谢有关此主题的任何帮助

\n\n

编辑：

\n\n

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

\n\n

扩展问题：

\n\n

问题 1 扩展：

\n\n

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

\n\n

\n\n

我可能是错的，但这不是Cognito 托管 UI 拒绝在 iframe 中渲染的问题吗？我的应用程序能否像最终那样重定向到托管 UI？现在我必须等待X-Frame-Options抛出错误，单击“登录”，等待X-Frame-Options抛出另一个错误，最后我被重定向并且流程成功（在 gif 中，UI 没有显示，因为我之前在会话中进行了身份验证）

\n\n

问题2扩展：

\n\n

我想要实现的行为是，如果用户未经身份验证，他们将无法看到应用程序的任何部分，而是被重定向到 Cognito 托管的 UI，只有在经过身份验证后，他们才能看到任何内容。我尝试使用 中的Authorize属性MainLayout.razor，但结果始终是空白屏幕，我想提供一些代码和详细信息，但我相信该行为受到问题 1中描述的错误的影响，这就是为什么我想对其进行排序先出去

\n

Answer 1

回应1：

显示授权消息时，应用程序会检查有效的身份验证并设置自动更新令牌 iframe。如果您在浏览器上查看网络日志，您将看到此时发出的请求。
当应用程序在发布版本中运行时，速度会更快。

回应2：

Authorize您需要通过添加属性来对要保护的页面添加授权。

@page "/"
@attribute [Authorize]