Blazor Server で自動生成したユーザー認証機能の各画面をカスタマイズする方法

BLAZOR SERVER で ユーザー認証機能の自動生成とコード生成（スキャフォールディング） のページでは、Blazor Serverアプリにユーザー認証機能を追加する方法を紹介しました。

この記事では、追加したユーザー認証機能の各ページをカスタマイズする方法を紹介します。

ヘッダメニューのカスタマイズ方法

ユーザー認証機能を生成したBlazorServerアプリには「Register」や「Login」などのメニューが追加されています。

またログイン状態になると「Hello (メールアドレス)!」という表示に変わります。

このヘッダメニューをカスタマイズするには、_LoginPartial.cshtmlとLoginDisplay.razorを変更します。

ファイルパスはそれぞれ以下の通りです。

• ./Areas/Identity/Pages/Shared/_LoginPartial.cshtml
• ./Shared/LoginDisplay.razor

ユーザー登録画面のカスタマイズ方法

ユーザー登録は、メールアドレスとパスワードを入力して行います。

この画面は、Register.cshtmlでカスタマイズが可能です。

• ./Areas/Identity/Pages/Account/Register.cshtml

メールアドレスをユーザーIDに変更するなど内部ロジックをカスタマイズするには、Register.cshtml.cs も修正が必要になります。

• ./Areas/Identity/Pages/Account/Register.cshtml.cs

メールアドレスとパスワードを入力すると、「確認メールを送信しました」画面に遷移します。

この画面はRegisterConfirmation.cshtmlからカスタマイズが可能です。

• ./Areas/Identity/Pages/Account/RegisterConfirmation.cshtml
• ./Areas/Identity/Pages/Account/RegisterConfirmation.cshtml.cs

メールアドレス確認URLが含まれたメールを送信することになりますが、デフォルトではメール送信機能は実装されていません。

そのかわりにClick here to confirm your accountをクリックすることで認証が可能です。

認証画面はConfirmEmail.cshtmlからカスタマイズが可能です。

• ./Areas/Identity/Pages/Account/ConfirmEmail.cshtml
• ./Areas/Identity/Pages/Account/ConfirmEmail.cshtml.cs

ログイン画面のカスタマイズ方法

登録済みユーザーのログイン画面は、Login.cshtmlで変更が可能です。

• ./Areas/Identity/Pages/Account/Login.cshtml
• ./Areas/Identity/Pages/Account/Login.cshtml.cs

パスワード忘れた画面のカスタマイズ方法

パスワードを忘れた場合は、パスワードリセットURLが記載されたメールを受け取り、そのURLにアクセスすることでリセットが可能になります。

メールアドレス入力画面は、ForgotPassword.cshtmlを修正することでカスタマイズが可能です。

• ./Areas/Identity/Pages/Account/ForgotPassword.cshtml
• ./Areas/Identity/Pages/Account/ForgotPassword.cshtml.cs

メールアドレスを入力して送信ボタンをクリックすると、「Forgot password confirmation」の画面に切り替わります。

この画面は、ForgotPasswordConfirmation.cshtmlからカスタマイズが可能です。

• ./Areas/Identity/Pages/Account/ForgotPasswordConfirmation.cshtml
• ./Areas/Identity/Pages/Account/ForgotPasswordConfirmation.cshtml.cs

変更後のパスワードを入力するパスワードリセット画面は、ResetPassword.cshtmlになります。

• ./Areas/Identity/Pages/Account/ResetPassword.cshtml
• ./Areas/Identity/Pages/Account/ResetPassword.cshtml.cs

メールアドレス確認メール再送信画面のカスタマイズ方法

通常であれば、ユーザー登録時に送信されるメールアドレス確認メールで認証することになりますが、このメールアドレス確認メールは再送信が可能です。

再送信画面は、ResendEmailConfirmation.cshtmlになります。

• ./Areas/Identity/Pages/Account/ResendEmailConfirmation.cshtml
• ./Areas/Identity/Pages/Account/ResendEmailConfirmation.cshtml.cs

アカウント管理画面のカスタマイズ方法

ログイン中は、自身のアカウント情報の変更が可能です。

アカウント管理画面は「Profile」、「Email」、「password」といったメニューがあります。

左側メニューのカスタマイズ方法

このメニューは、_ManageNav.cshtmlに記述されています。

• ./Areas/Identity/Pages/Account/Manage/_ManageNav.cshtml

またレイアウトファイルはAccount/Manage/_Layout.cshtmlになります。

• ./Areas/Identity/Pages/Account/Manage/_Layout.cshtml

プロフィール画面のカスタマイズ方法

プロフィール画面は、登録済みメールアドレスの確認や、電話番号の登録ができます。

この画面はAccount/Manage/Index.cshtmlからカスタマイズが可能です。

• ./Areas/Identity/Pages/Account/Manage/Index.cshtml
• ./Areas/Identity/Pages/Account/Manage/Index.cshtml.cs

メールアドレス変更画面のカスタマイズ方法

Manage Email 画面から、メールアドレスの変更が可能です。

この画面のcshtmlファイルは、Email.cshtmlになります。

• ./Areas/Identity/Pages/Account/Manage/Email.cshtml
• ./Areas/Identity/Pages/Account/Manage/Email.cshtml.cs

変更後メールアドレスを入力してChange email ボタンをクリックすると、メールアドレス確認メールの送信処理になります。

そのメール本文に記述されるメールアドレス認証URLの画面は、ConfirmEmailChange.cshtmlになります。

• ./Areas/Identity/Pages/Account/ConfirmEmailChange.cshtml
• ./Areas/Identity/Pages/Account/ConfirmEmailChange.cshtml.cs

パスワード変更画面のカスタマイズ方法

現在のパスワードと新しいパスワードを入力することで、パスワードの変更が可能です。

パスワード変更画面のcshtmlファイルはChangePassword.cshtmlになります。

• ./Areas/Identity/Pages/Account/Manage/ChangePassword.cshtml
• ./Areas/Identity/Pages/Account/Manage/ChangePassword.cshtml.cs

2要素認証設定画面のカスタマイズ方法

Blazor Serverアプリで自動生成したユーザー認証機能には、Google Authenticatorアプリを利用した2要素認証を構築可能です。

2要素認証の設定画面はTwoFactorAuthentication.cshtmlになります。

• ./Areas/Identity/Pages/Account/Manage/TwoFactorAuthentication.cshtml
• ./Areas/Identity/Pages/Account/Manage/TwoFactorAuthentication.cshtml.cs

パーソナルデータ管理画面のカスタマイズ方法

Blazor Serverアプリで自動生成したユーザー認証機能には、パーソナルデータのダウンロードや削除が可能です。

この画面はPersonalData.cshtmlになります。

パーソナルデータを削除するには、パスワードの再入力し、Delete data and close my accountボタンをクリックします。

パスワード再入力画面はDeletePersonalData.cshtmlになります。

• ./Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtml
• ./Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtml.cs

Blazor のおすすめ本

私もBlazorを用いていくつかウェブアプリを開発しました。フレームワークがとても分かりやすく、簡単にSPAを作れることが楽しいと感じています。

Blazor wasm であればAWS S3のようなウェブホスティングサービスでアプリを公開することもできますし、Blazor Serverアプリであれば簡単に2要素認証を構築できます。

Blazor は現在も開発が進められているフレームワークですので本の情報は少しずつ古くなってしまいますが、全体的・体系的に学ぶには、本はとても有力なツールです。

電子書籍になっていますので、まずは試し読みから始めてはいかがでしょうか。