使用 Azure Active Directory B2C 保护 ASP.NET Core Blazor WebAssembly 独立应用Secure an ASP.NET Core Blazor WebAssembly standalone app with Azure Active Directory B2C

本文内容

作者： Javier Calvarro 使用和Luke Latham

重要

Blazor WebAssembly 为预览版状态

ASP.NET Core 3.0 支持 Blazor Server。Blazor WebAssembly 在 ASP.NET Core 3.1 中为预览版。

备注

本文中的指导适用于 ASP.NET Core Blazor WebAssembly 模板 3.2 版或更高版本。要在未使用 Visual Studio 版本 16.6 预览版 2 或更高版本时获取最新的 Blazor WebAssembly 模板（版本 3.2.0-preview3.20168.3），请参阅 ASP.NET Core Blazor 入门。

创建使用Azure Active Directory （AAD） B2C进行身份验证的 Blazor WebAssembly 独立应用程序：

• 按照以下主题中的指导在 Azure 门户中创建租户并注册 web 应用：

  • 创建 AAD B2C 租户– 记录以下信息：

1.AAD B2C 实例（例如，https://contoso.b2clogin.com/，其中包含尾随斜杠）2.AAD B2C 租户域（例如，contoso.onmicrosoft.com）

• 注册 web 应用程序– 在应用注册过程中进行以下选择：

1.将Web 应用/WEB API设置为 "是" 。2.将 "允许隐式流" 设置为 "是" 。3.添加 https://localhost:5001/authentication/login-callback的回复 URL 。

记录应用程序 ID （客户端 ID）（例如 11111111-1111-1111-1111-111111111111）。

• 创建用户流– 创建注册和登录用户流。

至少，选择 "应用程序声明" > "显示名称用户属性"，以填充 LoginDisplay 组件中的 context.User.Identity.Name （Shared/LoginDisplay）。

记录为应用创建的注册和登录用户流名称（例如 B2C_1_signupsignin）。

• 将以下命令中的占位符替换为前面记录的信息，然后在命令行界面中执行命令：

dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "{AAD B2C INSTANCE}" --client-id "{CLIENT ID}" --domain "{DOMAIN}" -ssp "{SIGN UP OR SIGN IN POLICY}"

若要指定输出位置（如果它不存在，则创建一个项目文件夹），请在命令中包含 output 选项，其中包含一个路径（例如 -o BlazorSample）。文件夹名称还会成为项目名称的一部分。

身份验证包Authentication package

创建应用以使用单个 B2C 帐户（IndividualB2C）时，应用会自动接收Microsoft 身份验证库（Microsoft.Authentication.WebAssembly.Msal）的包引用。包提供一组基元，可帮助应用对用户进行身份验证，并获取令牌以调用受保护的 Api。

如果向应用程序中添加身份验证，请将包手动添加到应用的项目文件中：

<PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" 
    Version="{VERSION}" />

将前面的包引用中的 {VERSION} 替换为 ASP.NET Core Blazor 入门 一文中所示 Microsoft.AspNetCore.Blazor.Templates 包的版本。

Microsoft.Authentication.WebAssembly.Msal 包可向应用程序中添加 Microsoft.AspNetCore.Components.WebAssembly.Authentication 包。

身份验证服务支持Authentication service support

使用 Microsoft.Authentication.WebAssembly.Msal 包提供的 AddMsalAuthentication 扩展方法在服务容器中注册对用户进行身份验证。此方法设置应用程序与标识提供程序（IP）交互所需的所有服务。

Program.cs：

builder.Services.AddMsalAuthentication(options =>
{
    var authentication = options.ProviderOptions.Authentication;
    authentication.Authority = 
        "{AAD B2C INSTANCE}{DOMAIN}/{SIGN UP OR SIGN IN POLICY}";
    authentication.ClientId = "{CLIENT ID}";
    authentication.ValidateAuthority = false;
});

AddMsalAuthentication 方法接受回调，以配置对应用进行身份验证所需的参数。注册应用时，可以从 Azure 门户 AAD 配置获取配置应用所需的值。

Blazor WebAssembly 模板不会自动配置应用以请求安全 API 的访问令牌。若要将令牌预配为登录流的一部分，请将该作用域添加到 MsalProviderOptions的默认访问令牌作用域中：

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add(
        "{API ID URI}/{SCOPE}");
});

索引页面Index page

"索引页（wwwroot/index.html）" 页包含一个用于在 JavaScript 中定义 AuthenticationService 的脚本。AuthenticationService 处理 OIDC 协议的低级别详细信息。应用在内部调用在脚本中定义的方法来执行身份验证操作。

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/
    AuthenticationService.js"></script>

应用组件App component

App 组件（app.config）类似于在 Blazor Server apps 中找到 App 组件：

• CascadingAuthenticationState 组件管理向应用程序的其余部分公开 AuthenticationState。
• AuthorizeRouteView 组件确保当前用户有权访问给定页面或呈现 RedirectToLogin 组件。
• RedirectToLogin 组件管理将未经授权的用户重定向到登录页。

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" 
                DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <RedirectToLogin />
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

RedirectToLogin 组件RedirectToLogin component

RedirectToLogin 组件（Shared/RedirectToLogin）：

• 管理将未经授权的用户重定向到登录页。
• 保留用户尝试访问的当前 URL，以便在身份验证成功时可以将其返回到该页。

@inject NavigationManager Navigation
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@code {
    protected override void OnInitialized()
    {
        Navigation.NavigateTo($"authentication/login?returnUrl={Navigation.Uri}");
    }
}

LoginDisplay 组件LoginDisplay component

LoginDisplay 组件（shared/LoginDisplay）在 MainLayout 组件（shared/MainLayout）中呈现并管理以下行为：

• 对于经过身份验证的用户：
  • 显示当前用户名。
  • 提供用于注销应用的按钮。
• 对于匿名用户，提供登录选项。

@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject NavigationManager Navigation
@inject SignOutSessionStateManager SignOutManager
<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity.Name!
        <button class="nav-link btn btn-link" @onclick="BeginSignOut">
            Log out
        </button>
    </Authorized>
    <NotAuthorized>
        <a href="authentication/login">Log in</a>
    </NotAuthorized>
</AuthorizeView>
@code {
    private async Task BeginSignOut(MouseEventArgs args)
    {
        await SignOutManager.SetSignOutState();
        Navigation.NavigateTo("authentication/logout");
    }
}

身份验证组件Authentication component

Authentication 组件（Pages/Authentication）生成的页面定义处理不同的身份验证阶段所需的路由。

RemoteAuthenticatorView 组件：

• 由 Microsoft.AspNetCore.Components.WebAssembly.Authentication 包提供。
• 管理在每个身份验证阶段执行适当的操作。

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />
@code {
    [Parameter]
    public string Action { get; set; }
}

疑难解答Troubleshoot

由于 ID 令牌和访问令牌可在登录尝试期间保持，因此，每次更新后，请使用浏览器的开发人员控制台清除浏览器 cookie：

• 应用的身份验证代码或配置设置。
• 应用的配置 OIDC 兼容的提供程序（例如 Azure Active Directory）。

其他资源Additional resources

• Azure Active Directory B2C ASP.NET Core 中使用云身份验证
• 教程：创建 Azure Active Directory B2C 租户