このガイドでは、ASP.NET Core を使用して、新規または既存のBlazor Web AppのIdentityを実装する方法について説明します。
パスキーの概要と一般的な構成ガイダンスについては、「 Web 認証 API (WebAuthn) パスキーを有効にする」を参照してください。
[前提条件]
.NET SDK (.NET 10 以降)
認証要求の処理に使用する Blazor Web App
パスキーのサポートを含む、ASP.NET Core Blazor Web Appを使用して新しい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 Core Identity
-au|--authenticationオプションを使用してユーザー認証用に構成されます。 - データ ストレージ用の SQLite を使用した Entity Framework Core。
- パスキー登録と認証エンドポイント。
- パスキーを管理するための UI コンポーネント。
注
現時点では、 Blazor Web App プロジェクト テンプレートにのみ組み込みのパスキー サポートが含まれています。
アプリケーションを実行する
F5 押してデバッグを使用してアプリを実行するか、Ctrl キー + をしてデバッグなしでアプリを実行します。
次のガイダンスは、アプリの認証の種類または既存のアプリへのについてIdentityで作成されたアプリに依存しています。
[前提条件]
- ASP.NET Core を備えた既存の Blazor Web App (.NET 10 以降) Identity
- .NET SDK (.NET 10 以降)
移行ガイダンスについては、「 ASP.NET Core アプリの移行」を参照してください。
参照元のガイダンス
この記事の .NET 参照ソースへのリンクは、リポジトリの既定のブランチを読み込みます。これは、.NET の次のリリースの現在の開発を表します。 特定のリリースのタグを選択するには、[Switch branches or tags](ブランチまたはタグの切り替え) ドロップダウン リストを使います。 詳細については、「ASP.NET Core ソース コードのバージョン タグを選択する方法」 (dotnet/AspNetCore.Docs #26205) を参照してください。
スキーマ バージョン Identity 更新する
Program.csで、パスキーのサポートを含むスキーマ バージョン 3 を使用するようにIdentity構成を更新します。
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)。
-
Components/Account/PasskeyInputModel.cs: パスキー サインイン操作 (Loginコンポーネント) とパスキーの追加 (Passkeysコンポーネント) の JSON パスキー資格情報を保持します。 -
Components/Account/PasskeyOperation.cs: 実行する認証アクション (PassKeySubmitコンポーネント) を定義します。新しいパスキー (Create/0) を登録するか、既存のパスキー (Request/1) で認証します。
PasskeySubmit コンポーネントを作成する
パスキー操作を処理するために、次の PasskeySubmit コンポーネントを追加します。
Components/Account/Shared/PasskeySubmit.razor
パスキー操作用の JavaScript を追加する
WebAuthn API の対話を処理するために、次の JavaScript ファイルを追加します。
Components/Account/Shared/PasskeySubmit.razor.js
パスキー エンドポイントを追加する
パスキー固有のエンドポイントを含むように、IdentityComponentsEndpointRouteBuilderExtensions.cs ファイルを更新します (または、ファイルが存在しない場合はファイルを作成し、MapAdditionalIdentityEndpoints ファイルでProgramを呼び出します)。
/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 コンポーネントに次のPasskeys コンポーネントを追加します。
<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>
パスキーを登録する
パスキー機能をテストするには:
- 新しいアカウントを登録するか、既存のアカウントでサインインします。
- [ アカウントの管理 ] に移動します (ナビゲーション メニューでユーザー名を選択します)。
- ナビゲーション メニューから [パスキー ] を選択します。
- [ 新しいパスキーの追加] を選択する
- ブラウザーのプロンプトに従って、デバイスの認証システムを使用してパスキーを作成します。
パスキーを使ってサインインする
パスキーの登録後:
- アプリからサインアウトします。
- ログイン ページで、メール アドレスを入力します。
- パスキーを使用してログインを選択します。
- ブラウザーのプロンプトに従って、パスキーで認証します。
- パスキーを追加、名前変更、または削除するには、
Account/Manage/Passkeysに移動します。 - passkey でログイン用のパスキーオートフィル (条件付き UI) がサポートされている場合は、パスキーを保存したときに電子メール入力フィールドを選択して、パスキーオートフィル機能をテストします。
PublicKeyCredential.toJSON エラーを軽減する (TypeError: Illegal invocation)
一部のパスワード マネージャーでは、PublicKeyCredential.toJSONメソッドが正しく実装されていません。これは、パスキー資格情報をシリアル化するときにJSON.stringifyが機能するために必要です。
Blazor Web App プロジェクト テンプレートに基づいてユーザーをアプリに登録または認証すると、パスキーを追加しようとすると、次のエラーがスローされます。
Error: Could not add a passkey: Illegal invocation
このエラーの軽減に関するガイダンスについては、「 Web 認証 API (WebAuthn) パスキーを有効にする」を参照してください。
その他のリソース
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
ASP.NET Core