今日は身分認証の部分を実装します。これまで筆者は ASP.NET Core Web API と Blazor を組み合わせていました。ユーザーが初回ログインに成功した際、バックエンドで Role や Claim などの権限を JWT に保存し、その JWT をブラウザの LocalStorage に保存します。フロントエンド側で AuthenticationStateProvider を自分で書き換え、LocalStorage の JWT をチェックし、AuthenticationState を CascadingParameter として各 Component に渡していました。こうすることで、バックエンドと頻繁にデータをやり取りする必要がなくなり、非常に貴重な経験となりました。この経験から身分認証を深く理解できたため、今回は ASP.NET Core 標準の Identity を試してみることにしました。
最初に NeGet から3つのコンポーネントをダウンロードします。それらは Microsoft.AspNetCore.Identity.EntityFrameworkCore、Microsoft.AspNetCore.Identity.UI、Microsoft.VisualStudio.Web.CodeGeneration.Design です。1つ目は Identity に必須のコンポーネントで、もし自分で JWT を実装したい場合は、最初のコンポーネントだけをダウンロードし、さらに JWT 関連コンポーネント（Microsoft.AspNetCore.Authentication.JwtBearer）をダウンロードすれば十分です。残り2つは ASP.NET Core Identity に標準の Identity ページを生成させるためのコンポーネントです。
次に BlazorServer.Models の AppDbContext に移動し、継承する DbContext を IdentityDbContext に変更します。これにより、これから使用する DB が Identity に関連することを示します。
BlazorServer プロジェクトを右クリックし、「追加」→「新しくスキャフォールディングされたアイテム」を選択します。「ID」タブに切り替え、「ID」を選択します。
「すべてのファイルを置き換える」にチェックを入れ、「データコンテキストクラス」で AppDbContext を選択します。注意点として、先ほど継承元のクラスを IdentityDbContext に変更していないと、AppDbContext が選択肢に表示されません。その場合は右側の「+」記号をクリックして新しく IdentityDbContext を追加する必要があります。
このとき、「FileUpload.OnInitializedAsync(): オーバーライドする適切なメソッドが見つかりません」というエラーが発生することがあります。これは通常 Visual Studio の問題です。その部分をコメントアウトして、前の手順をもう一度繰り返せば解決できます。
次に Program.cs に身分認証のサービスを追加します。Identity はデフォルトで認証情報を Cookie に保存します。
続いて「パッケージ マネージャー コンソール」で2つのコマンドを実行します。Add-Migration IdentitySupport で Migration を追加し、Update-Database で DB を更新します。データベースを確認すると、6つのテーブルが追加されていることがわかります。最もよく使用するのは AspNetUsers、AspNetRoles、AspNetUserRoles です。Claim で権限を処理する場合、AspNetUserClaims も使用します。
プロジェクトには Areas フォルダーが追加され、その中に ASP.NET Core Identity の実装が含まれています（ログインシステム、アカウントシステム、管理システム）。
NavMenu.razor に Login への NavLink を追加します。相対パスでは Areas と Pages は省略可能です。
<div class="nav-item px-3">
<NavLink class="nav-link" href="Identity/Account/Login" Match="NavLinkMatch.All">
<span class="bi bi-file-earmark-lock2 h4 p-2 mb-0" aria-hidden="true"></span> Login
</NavLink>
</div>
サイトを起動し、左側の Nav から Login ページに移動すると、すでに完成されたログインシステムが表示されます。登録、ログイン、パスワード忘れなどの機能に加え、登録パスワードのルールも設定されています。ルールに従ってアカウントを登録すると、データベースにも登録されたアカウントが生成されます。
登録画面で正しいメールアドレスとパスワードを入力すると、AspNetUsers テーブルで登録したユーザー情報を確認できます。
参照
- Claims-based authorization in ASP.NET Core
- Claim type and claim value in claims policy based authorization in asp net core
- ASP NET Core Identity tutorial from scratch
- Unable to resolve service for type IEmailSender while attempting to activate RegisterModel
注：本記事のコードは .NET 6 + Visual Studio 2022 でリファクタリングしています。原文リンクとリファクタリング後のコードを比較して学習してください。ご愛読ありがとうございます。原作者を応援してください。