使用身份验证库保护 ASP.NET Core Blazor WebAssembly 独立应用Secure an ASP.NET Core Blazor WebAssembly standalone app with the Authentication library

重要

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 模板（版本 ），请参阅 ASP.NET Core Blazor 入门。

对于 Azure Active Directory （AAD）和 Azure Active Directory B2C （AAD B2C），请勿按照本主题中的指导进行操作。请参阅此目录节点中的 AAD 和 AAD B2C 主题。

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

在 Visual Studio 中，。将身份验证设置为具有 "应用商店用户帐户应用内" 选项的单个用户帐户。

当创建应用以使用单个用户帐户时，应用会自动接收应用的项目文件中 Microsoft.AspNetCore.Components.WebAssembly.Authentication 包的包引用。包提供一组基元，可帮助应用对用户进行身份验证，并获取令牌以调用受保护的 Api。

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

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

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

身份验证服务支持Authentication service support

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

使用 Open ID Connect （OIDC）提供对独立应用程序的身份验证支持。AddOidcAuthentication 方法接受回调来配置使用 OIDC 对应用进行身份验证所需的参数。配置应用所需的值可以从 OIDC 兼容的 IP 获得。注册应用时获取值，此操作通常发生在其联机门户中。

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

<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/

应用组件App component

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

• AuthorizeRouteView 组件确保当前用户有权访问给定页面或呈现 RedirectToLogin 组件。
• RedirectToLogin 组件管理将未经授权的用户重定向到登录页。

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）中呈现并管理以下行为：

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

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

• 由 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）。