在 ASP.NET Core Blazor Web Apps 中实现通行密钥

先决条件

.NET 10 SDK

创建 Blazor Web App

使用以下指南创建新的 Blazor Web App ASP.NET Core Identity，其中包括密钥支持。

dotnet new blazor -au Individual -o BlazorWebAppPasskeys

上述说明使用以下命令创建：Blazor Web App

• ASP.NET 使用Identity为用户身份验证配置的 Core-au|--authentication。
• 用于数据存储的 SQLite 的 Entity Framework Core。
• 密码注册和身份验证终结点。
• 用于管理密钥的 UI 组件。

运行应用程序

dotnet watch

以下指南依赖于使用 个人帐户 为应用 身份验证类型 创建的应用，或 将基架搭建 Identity 到现有应用中。

先决条件

• 具有 ASP.NET Core 的现有 Blazor Web App （.NET 10 或更高版本） Identity
• .NET 10 SDK

有关迁移指南，请参阅 迁移 ASP.NET 核心应用。

参考源指南

本文中指向 .NET 引用源的链接加载存储库的默认分支，该分支表示下一版本的 .NET 的当前开发。 若要为特定版本选择标记，请使用“切换分支或标记”下拉菜单。 有关详细信息，请参阅如何选择 ASP.NET Core 源代码的版本标记 (dotnet/AspNetCore.Docs #26205)。

更新 Identity 架构版本

在中 Program.cs，更新 Identity 配置以使用架构版本 3，其中包括密钥支持：

builder.Services.AddIdentityCore<ApplicationUser>(options =>
{
    options.SignIn.RequireConfirmedAccount = true;
    options.Stores.SchemaVersion = IdentitySchemaVersions.Version3;
})
.AddEntityFrameworkStores<ApplicationDbContext>()
.AddSignInManager()
.AddDefaultTokenProviders();

创建和运行数据库迁移

dotnet ef migrations add AddPasskeySupport

dotnet ef database update

dotnet ef migrations add AddPasskeySupport

dotnet ef database update

创建 passkey 模型类

将以下模型类添加到Components/Account文件夹中的项目，其中包含BlazorWebCSharp._1.Components.Account应用的命名空间更新（例如： Contoso.Components.Account

• Components/Account/PasskeyInputModel.cs：保存用于密钥登录作（Login 组件）和添加 passkey（Passkeys 组件）的 JSON 密钥凭据。
• Components/Account/PasskeyOperation.cs：定义要执行的身份验证作（PassKeySubmit 组件），即注册新的密钥（Create/0），或者使用现有密码Request（/1）进行身份验证。

PasskeySubmit创建组件

添加以下 PasskeySubmit 组件来处理密钥作：

Components/Account/Shared/PasskeySubmit.razor

添加用于传递密钥作的 JavaScript

添加以下 JavaScript 文件以处理 WebAuthn API 交互：

Components/Account/Shared/PasskeySubmit.razor.js

添加通行密钥终结点

IdentityComponentsEndpointRouteBuilderExtensions.cs更新文件（如果文件不存在并调用MapAdditionalIdentityEndpointsProgram该文件），以包含特定于密钥的终结点：

/PasskeyCreationOptions 和 /PasskeyRequestOptions 终结点

更新登录页

将现有Login组件替换为以下组件，并更新BlazorWebCSharp._1.Data命名空间以匹配应用（例如： Contoso.Components.Account.Data

Components/Account/Pages/Login.razor

将重定向方法添加到 IdentityRedirectManager 类

将以下方法添加到 IdentityRedirectManager 类中 Components/Account/IdentityRedirectManager.cs：

public void RedirectToInvalidUser(
    UserManager<ApplicationUser> userManager, HttpContext context) =>
        RedirectToWithStatus("Account/InvalidUser",
            $"Error: Unable to load user with ID '{userManager.GetUserId(context.User)}'.",
            context);

创建用于添加和重命名通行密钥的通行密钥管理页

添加以下Passkeys组件以管理密钥并更新BlazorWebCSharp._1.Data命名空间以匹配应用（例如： Contoso.Components.Account.Data

Components/Account/Pages/Manage/Passkeys.razor

添加以下RenamePasskey组件以重命名密码并更新BlazorWebCSharp._1.Data命名空间以匹配应用（例如： Contoso.Components.Account.Data

Components/Account/Pages/Manage/RenamePasskey.razor

更新管理导航菜单

在应用的 ManageNavMenu 组件中添加指向密钥管理页的链接。

在Components/Account/Shared/ManageNavMenu.razor中，为NavLink组件添加以下：

<li class="nav-item">
    <NavLink class="nav-link" href="Account/Manage/Passkeys">Passkeys</NavLink>
</li>

包括 JavaScript 文件

在 App 组件（Components/App.razor）中找到 Blazor 脚本 标记：

<script src="_framework/blazor.web.js"></script>

在紧邻 Blazor 脚本标记之后，添加对 PasskeySubmit JavaScript 模块的引用：

<script src="Components/Account/Shared/PasskeySubmit.razor.js" type="module"></script>