如何在Blazor应用中使用AWS Cognito实现身份认证？

针对Blazor WebAssembly（客户端）应用对接AWS Cognito的身份认证，以下是可直接复用的实现方案，核心是利用Blazor自带的OIDC认证组件结合AWS Cognito的OIDC能力：

1. 安装依赖包 #

通过NuGet安装以下包：

• AWSSDK.CognitoIdentityProvider（用于直接操作Cognito用户池）
• Microsoft.AspNetCore.Components.WebAssembly.Authentication（Blazor WASM认证核心包）

2. 配置Cognito参数 #

在wwwroot/appsettings.json中添加Cognito相关配置：

{
  "AWS": {
    "Region": "us-east-1",
    "Cognito": {
      "UserPoolId": "us-east-1_xxxxxxxxx",
      "ClientId": "xxxxxxxxxxxxxxxxxxxxxxxxxx",
      "Authority": "https://cognito-idp.us-east-1.amazonaws.com/us-east-1_xxxxxxxxx",
      "RedirectUri": "https://localhost:5001/authentication/login-callback",
      "PostLogoutRedirectUri": "https://localhost:5001/"
    }
  }
}

注意：替换上述配置中的区域、用户池ID、客户端ID为你自己的AWS资源信息

3. 注册认证服务 #

在Program.cs中配置OIDC认证和AWS Cognito客户端：

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// 配置OIDC认证对接Cognito
builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("AWS:Cognito", options.ProviderOptions);
    options.ProviderOptions.ResponseType = "code";
    // 添加需要获取的用户信息权限
    options.ProviderOptions.Scope.Add("openid");
    options.ProviderOptions.Scope.Add("email");
    options.ProviderOptions.Scope.Add("profile");
});

// 注册Cognito操作客户端
builder.Services.AddAWSService<IAmazonCognitoIdentityProvider>();

await builder.Build().RunAsync();

4. 配置认证路由与组件 #

修改App.razor，添加认证状态管理和路由保护：

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    @if (!context.User.Identity.IsAuthenticated)
                    {
                        <RedirectToLogin />
                    }
                    else
                    {
                        <p>你没有权限访问此页面。</p>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>抱歉，未找到请求的页面。</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

5. 实现登录/登出UI #

创建LoginDisplay.razor组件，用于展示登录状态和操作：

<AuthorizeView>
    <Authorized>
        欢迎，@context.User.Identity.Name!
        <button class="nav-link btn btn-link" @onclick="Logout">登出</button>
    </Authorized>
    <NotAuthorized>
        <a href="authentication/login">登录</a>
    </NotAuthorized>
</AuthorizeView>

@code {
    [Inject]
    public NavigationManager NavigationManager { get; set; }

    [Inject]
    public AuthenticationStateProvider AuthenticationStateProvider { get; set; }

    private async Task Logout()
    {
        var oidcProvider = (OidcAuthenticationStateProvider)AuthenticationStateProvider;
        await oidcProvider.LogoutAsync();
        NavigationManager.NavigateTo("/");
    }
}

6. 保护私有页面 #

在需要登录才能访问的页面添加[Authorize]特性即可：

@page "/dashboard"
@attribute [Authorize]

<h3>用户仪表盘</h3>
<p>此页面仅对已登录用户可见。</p>

关键说明 #

AWS Cognito原生支持OIDC协议，因此Blazor可以直接通过官方的OIDC认证组件对接，无需额外封装复杂的Cognito操作逻辑。上述方案和ASP.NET 6中使用Cognito的思路一致，只是适配了Blazor组件化的开发模式。

内容的提问来源于stack exchange，提问作者ZedZip