Blazor WebAssembly + Amazon Cognito [英] Blazor WebAssembly + Amazon Cognito
问题描述
我想通过 AWS Cognito 设置具有身份验证的 Blazor 客户端应用.
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下的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托管的用户界面(出现重大延迟)， Cognito托管的UI，或者经过身份验证而不进行重定向(如果我之前登录过的话)，也许此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屋！
