共用方式為

在 ASP.NET Core Blazor Web App中實作通行金鑰

本指南說明如何使用 ASP.NET Core 為新的或現有Blazor Web App的通Identity。

如需通行金鑰的概觀和一般設定指引，請參閱 啟用 Web 驗證 API （WebAuthn） 通行金鑰。

先決條件

.NET SDK （.NET 10 或更新版本）

建立 Blazor Web App

使用下列指引來建立新的 Blazor Web App with ASP.NET Core Identity，其中包含通行金鑰支援。

備註

需要 Visual Studio 2022 或更新版本和 .NET 10 或更新版本的 SDK。

在 Visual Studio 中：

  • 從 [開始] 視窗選取 [建立新專案] ，或從功能表欄選取 [檔案][新]>>[專案]。
  • 在 建立新專案 對話方塊中，從專案範本清單中選取 Blazor Web App 。 選取下一步按鈕。
  • 在 [設定新專案] 對話方塊中，在 [專案名稱]BlazorWebAppPasskeys 欄位中，將專案命名為 ，包括符合大小寫。 使用此確切的專案名稱非常重要，以確保命名空間符合您從文章複製到您要建置的應用程式的程式碼。
  • 請確認應用程式的 位置 適合。 繼續選取 [將解決方案與專案放置在同一個目錄] 核取方塊。 選取下一步按鈕。
  • 在 [其他資訊] 對話方塊中，將 [驗證類型 ] 設定為 [個別帳戶]。 對其他選項使用下列設定：
    • 架構：最新的架構版本 （.NET 10 或更新版本）
    • 針對 HTTPS 進行設定：已選取
    • 互動式轉譯模式：伺服器
    • 互動地點： 全球
    • 包含範例頁面：已選取
    • 不要使用最上層陳述式：未選取
    • 在應用程式 URL 中使用 .dev.localhost TLD：未選取
    • 選取 ，創建。

上述指示會建立：Blazor Web App

  • ASP.NET 核心 Identity 使用選項-au|--authentication設定使用者驗證。
  • 具有 SQLite 的 Entity Framework Core 用於資料儲存。
  • 通行金鑰註冊和驗證端點。
  • 用於管理通行金鑰的 UI 元件。

備註

目前，只有 Blazor Web App 專案範本包含內建通行金鑰支援。

執行應用程式

按 F5 以偵錯模式執行應用程式，或按 Ctrl+F5 以非偵錯模式執行應用程式。

下列指引依賴於使用應用程式驗證類型或現有建立的Identity的應用程式。

先決條件

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

如需移轉指引，請參閱移 轉 ASP.NET Core 應用程式。

參考來源指引

本文中 .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();

建立並執行資料庫移轉

在 Visual Studio 方案總管中，按兩下 [連線的服務]。 在 [服務相依性] 區域中，選取省略符號 （...），然後選取 [SQL Server Express LocalDB] 區域中的 [新增移轉]。

為移轉提供移轉名稱AddPasskeySupport，以描述移轉。 等候資料庫內容載入 DbContext 類別名稱 欄位。 選取 [ 完成 ] 以建立移轉。 選取 [關閉] 作業完成後按鈕。

再次選取省略符號 （...），然後選取 更新資料庫 命令。

「 使用最新移轉更新資料庫 」對話方塊隨即開啟。 等候 DbContext 類別名稱 欄位更新，並載入先前的移轉。 選取 [完成] 按鈕。 選取 [關閉] 作業完成後按鈕。

建立通行金鑰模型類別

在 Components/Account 資料夾中新增以下模型類別，並更新 BlazorWebCSharp._1.Components.Account 命名空間以符合應用程式（例如：Contoso.Components.Account）：

建立 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 標籤：

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

在Blazor腳本標籤之後，立即新增對PasskeySubmit JavaScript模組的引用：

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

註冊通行金鑰

若要測試通行金鑰功能：

  1. 註冊新帳戶或使用現有帳戶登入。
  2. 導覽至 管理您的帳戶 （在導覽功能表中選取使用者名稱）。
  3. 從導覽功能表中選取 Passkeys 。
  4. 選取 [新增通行金鑰]
  5. 按照瀏覽器的提示使用裝置的身份驗證器建立通行金鑰。

使用通行金鑰登入

註冊通行金鑰後：

  1. 登出應用程式。
  2. 在登入頁面上，輸入您的電子郵件地址。
  3. 選取 [使用通行金鑰登入]。
  4. 按照瀏覽器的提示使用您的通行金鑰進行身份驗證。
  5. 導覽至 Account/Manage/Passkeys 以新增、重新命名或刪除通行金鑰。
  6. 如果通行金鑰支援登入的通行金鑰自動填入 （條件式 UI），請在儲存通行金鑰時選取電子郵件輸入欄位來測試通行金鑰自動填入功能。

減輕 PublicKeyCredential.toJSON 錯誤 (TypeError: Illegal invocation)

某些密碼管理器無法正確實現該 PublicKeyCredential.toJSON 方法，而 正是序列化通行金鑰憑證時需要運作的。 根據專案範本向 Blazor Web App 應用程式註冊或驗證使用者時，嘗試新增通行金鑰時會擲回下列錯誤：

Error: Could not add a passkey: Illegal invocation

如需減輕此錯誤的指引，請參閱 啟用 Web 驗證 API （WebAuthn） 通行金鑰。

其他資源

  • Last updated on