Blazor WebAssembly + Amazon Cognito [英] Blazor WebAssembly + Amazon Cognito
问题描述
我想设置一个 Blazor 客户端应用程序，通过 AWS Cognito 进行身份验证.
I would like to set up a Blazor client-side app with authentication through AWS Cognito.
当我运行应用程序时，我没有重定向到登录页面，而是页面显示正在授权..."几秒钟，而我在控制台中收到此错误:
When I run the app I'm not redirected to a login page, instead the page says "Authorizing..." for a few seconds, while I get this error in the console:
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 托管的登录页面打开，我可以登录，我被重定向回我的应用程序，并且应用程序显示右上角是经过身份验证的用户信息，但控制台又有点奇怪:
Then, the default "Hello, world!" index page is shown (even though as I understand it, it should not be visible to an unauthenticated user based on App.razor definition?). If I click on "Log in", I get the same error in console, but then after a few seconds the Cognito-hosted login page opens, I am able to log in, I am redirected back to my app, and the app shows the authenticated user's info in top right corner, but the console is a little weird again:
info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2]
Authorization failed.
info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[1]
Authorization was successful.
问题 1
如何消除这些错误并使我的应用程序重定向到 Cognito 登录页面而不会延迟约 10 秒?
How can I get rid of these errors and have my app redirect to Cognito login page without ~10s delay?
问题 2
为什么无论我是否通过身份验证，我的应用中的所有内容始终可见?就好像 App.razor 中 AuthorizeRouteView 下的 NotAuthorized 节点根本没有效果，除非我在这里混淆了一些东西
Why is all content in my app visible at all times regardless of whether I'm authenticated or not? It's as if the NotAuthorized node under AuthorizeRouteView in App.razor had no effect at all, unless I am confusing something here
代码:
Program.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(从模板创建，没有修改)
App.razor (as created from template, no modifications)
<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>
我自己只修改了 Program.cs 中对 AddOidcAuthentication 的调用，所有其他文件都是在使用个人用户帐户创建 Blazor WebAssembly 应用程序时由 Visual Studio 填充的.
I have only modified the call to AddOidcAuthentication in Program.cs myself, all other files were populated by Visual Studio when creating a Blazor WebAssembly App with Individual User Accounts.
我正在努力使其正常工作，非常感谢有关此主题的任何帮助
I am struggling to get this to work and would greatly appreciate any help on this topic
根据@aguafrommars 的回答，我使用静态网站托管和 Amazon CloudFront 作为 CDN 将网站发布到 Amazon S3，但是，发布的应用程序的行为与描述的本地行为完全相同
Following @aguafrommars's answer I have published the website to Amazon S3 using static website hosting with Amazon CloudFront as CDN, however, the behavior of the published app is exactly the same as described local behavior
扩展问题:
问题 1 扩展:
当页面显示正在授权..."时，我只在控制台中收到所描述的错误，不会呈现 Cognito 托管的 UI，只有当我单击登录"时，我才会被重定向(有重大延迟)到Cognito 托管用户界面，或者在没有重定向的情况下进行身份验证(如果我之前登录过)，也许这个 GIF 可以解决问题:
When the page says "Authorizing..." I only get the described error in the console, the Cognito hosted UI is not rendered, only when I click on "Log in" I am either redirected (with major delay) to Cognito hosted UI, or authenticated without redirection (if I signed in before), perhaps this GIF will clear things up:
我可能是错的，但是 Cognito 托管的 UI 拒绝在 iframe 中呈现的问题难道不是问题?我的应用程序可以像最终那样重定向到托管 UI 吗?现在我必须等待 X-Frame-Options 错误被抛出，点击登录"，等待另一个 X-Frame-Options 错误被抛出，然后然后最后我被重定向并且流程成功(在 gif 中，UI 没有显示，因为我之前在会话中进行了身份验证)
I might be wrong, but isn't the problem that the Cognito hosted UI is rejecting to be rendered in an iframe? Can my app redirect to the hosted UI in the first place, like it eventually does? Right now I have to wait while X-Frame-Options error is thrown, click on "Log in", wait while another X-Frame-Options error is thrown, and then finally I'm redirected and the flow succeeds (in the gif the UI doesn't show up because I authenticated before in the session)
问题 2 扩展:
我想要实现的行为是，如果用户未通过身份验证，他们将看不到应用程序的任何部分，而是被重定向到 Cognito 托管的 UI，并且只有在他们通过身份验证后才能看到任何内容.我试图在 MainLayout.razor 中使用 Authorize 属性，但结果总是一个空白屏幕，我想提供一些代码和细节，但我相信行为受到问题 1 中描述的错误的影响，这就是为什么我想先整理一下
The behavior I want to achieve is that if the user is not authenticated, they cannot see any part of the application, instead they are redirected to Cognito hosted UI and only after they are authenticated they can see anything. I tried to play around with Authorize attribute in MainLayout.razor, but the result is always a blank screen, I would like to provide some code and details but I believe the behavior is impacted by errors described in Question 1, which is why I would like to sort it out first
推荐答案
响应 1:
当显示授权消息时，应用程序会检查有效的身份验证并设置自动更新令牌 iframe.如果您查看浏览器上的网络日志，您会看到此时发出的请求.
当应用在发行版中运行时，速度会更快.
While the authorizing message is displayed, the app check for a valid authentication and set up auto renew token iframe. If you look at the network log on your browser you'll see requests made by this time.
When the app run in release it's faster.
响应 2:
您需要通过添加 授权属性.
You need to add authorization on pages you want to protect by adding the Authorize attribute.
@page "/"
@attribute [Authorize]
这篇关于Blazor WebAssembly + Amazon Cognito的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
