Blazorの強力な警備システムと、MudBlazorのUIをどのように組み合わせて使うのか、その仕組みを3つのポイントで解説します。
1. ページ全体へのアクセスをブロックする（[Authorize] 属性）
「この画面はログインした人しか見られないようにしたい」という場合、ページの先頭（@page の下）に @attribute [Authorize] という1行を追加するだけです。
@page "/secret-page"
@attribute [Authorize] <MudContainer>
<MudText Typo="Typo.h4">極秘の顧客データ画面</MudText>
</MudContainer>
これだけで、もしログインしていないユーザーがブラウザのURL欄に https://.../secret-page と直接入力してアクセスしようとしても、Blazorのシステムが門前払いし、「ログイン画面へ強制的にリダイレクトする」あるいは「『権限がありません』というメッセージを出す」といった処理を自動で行ってくれます。
2. ログイン状態によって「UI」を切り替える（AuthorizeView）
画面全体へのアクセス制限だけでなく、「ログインしている人にだけログアウトボタンを見せたい」「管理者だけに設定メニューを見せたい」といった要件もよくありますよね。 その場合は、Blazor標準の <AuthorizeView> というタグで、MudBlazorのコンポーネントを囲みます。
<MudAppBar Color="Color.Primary">
MudBlazorアプリ
<MudSpacer />
<AuthorizeView>
<Authorized>
<MudText Class="mr-4">ようこそ、@context.User.Identity.Name さん！</MudText>
<MudButton Variant="Variant.Filled" Color="Color.Secondary">ログアウト</MudButton>
</Authorized>
<NotAuthorized>
<MudButton Variant="Variant.Text" Color="Color.Inherit">ログイン</MudButton>
<MudButton Variant="Variant.Text" Color="Color.Inherit">新規登録</MudButton>
</NotAuthorized>
</AuthorizeView>
</MudAppBar>
このように書くだけで、C#側で複雑な if 文を書かなくても、ユーザーのログイン状態に合わせてボタンやメニューが自動的に切り替わります。
3. 認証の裏側の仕組み（AuthenticationStateProvider）
「そもそも、どうやってログイン状態を判定しているの？」という疑問が湧くかもしれません。 Blazorには AuthenticationStateProvider という、「ユーザーの身分証（チケット）を確認し、アプリ全体に共有する」専用のシステムが用意されています。
実際の開発では、主に以下のいずれかの方法で身分証（ログイン機能）を実装します。
- JWT（JSON Web Token）: ユーザーがログインに成功したら暗号化された文字列（トークン）を発行し、それをブラウザに持たせておく、現在のモダンなWebAPIで主流の手法です。
- Cookie認証: 昔ながらのWebサイトでよく使われる、ブラウザのCookieを使った手法です。
- ASP.NET Core Identity / Entra ID: Microsoftが提供する、パスワードのハッシュ化からデータベース管理、多要素認証までまるごと面倒を見てくれる強力なシステムです。
これらのシステムを使ってログインが成功すると、Blazorアプリ全体に「この人はログイン済みです！」という状態が伝わり、先ほどの [Authorize] や <AuthorizeView> が機能するようになります。
コメント