Microsoft アカウントを使用して、ASP.NET Core Blazor WebAssembly スタンドアロンアプリをセキュリティで保護する

[アーティクル]
11/06/2024

注意

これは、この記事の最新バージョンではありません。現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

警告

このバージョンの ASP.NET Core はサポート対象から除外されました。詳細については、「.NET および .NET Core サポートポリシー」を参照してください。現在のリリースについては、この記事の .NET 8 バージョンを参照してください。

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

この記事では、認証用に Microsoft Entra (ME-ID) を使用する Microsoft アカウントを使用するスタンドアロンBlazor WebAssembly アプリを作成する方法について説明します。

この記事を読んだ後の追加のセキュリティシナリオの説明については、「ASP.NET Core Blazor WebAssembly のセキュリティに関するその他のシナリオ」を参照してください。

チュートリアル

このチュートリアルのサブセクションでは、次の方法について説明します。

Azure でテナントを作成する
Azure にアプリを登録する
Blazor アプリを作成する
アプリを実行する

Azure でテナントを作成する

「クイックスタート: テナントを設定する」のガイダンスに従って、ME-ID でテナントを作成します。

Azure にアプリを登録する

ME-ID アプリを登録する:

Azure portal で [Microsoft Entra ID] に移動します。サイドバーで [アプリの登録] を選択します。 [新規登録] ボタンを選択します。
アプリの名前を指定します (例: Blazor スタンドアロン ME-ID MS アカウント)。
[サポートされているアカウントの種類] で、[任意の組織ディレクトリ内のアカウント (任意の Microsoft Entra ID ディレクトリ – マルチテナント)] を選択します。
[リダイレクト URI] ドロップダウンリストを [シングルページアプリケーション (SPA)] に設定し、次のリダイレクト URI を指定します: https://localhost/authentication/login-callback。 Azure の既定のホスト (たとえば azurewebsites.net) またはカスタムドメインホスト (たとえば contoso.com) の運用リダイレクト URI がわかっている場合は、localhost リダイレクト URI を提供するのと同時に運用リダイレクト URI を追加することもできます。追加する運用リダイレクト URI には、ポート:443 以外のポートのポート番号を必ず含めてください。
未確認の発行元ドメインを使用している場合は、 [アクセス許可]>[openid と offline_access アクセス許可に対して管理者の同意を付与します] チェックボックスをオフにします。発行元ドメインが検証済みの場合、このチェックボックスは表示されません。
[登録] を選択します。

Note

localhost ME-ID リダイレクト URI のポート番号を指定する必要はありません。詳細については、「リダイレクト URI (応答 URL) に関する制約と制限」の「Localhost 例外」(Entra ドキュメント) を参照してください。

アプリケーション (クライアント) ID を記録しておきます (例: 00001111-aaaa-2222-bbbb-3333cccc4444)。

[認証]>[プラットフォーム構成]>[シングルページアプリケーション] で次のようにします。

リダイレクト URI が https://localhost/authentication/login-callback であることを確認します。
[暗黙的な許可] セクションで、[アクセストークン] と [ID トークン] のチェックボックスが選択されていないことを確認します。 暗黙的な許可は、MSAL v2.0 以降が使用されている Blazor アプリにはお勧めしていません。 詳しくは、「ASP.NET Core Blazor WebAssembly をセキュリティで保護する」をご覧ください。
アプリの残りの既定値は、このエクスペリエンスで使用可能です。
変更を加えた場合は、[保存] ボタンを選択します。

Blazor アプリを作成する

アプリを作成します。次のコマンドのプレースホルダーを、前に記録した情報に置き換え、コマンドシェルで次のコマンドを実行します。

dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" --tenant-id "common" -o {PROJECT NAME}

プレースホルダー	Azure portal での名前	例
`{PROJECT NAME}`	—	`BlazorSample`
`{CLIENT ID}`	アプリケーション (クライアント) ID	`00001111-aaaa-2222-bbbb-3333cccc4444`

-o|--output オプションで指定した出力場所にプロジェクトフォルダーが存在しない場合は作成されて、プロジェクトの名前の一部になります。

openid と offline_access の DefaultAccessTokenScopes に対して MsalProviderOptions のペアを追加します。

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("openid");
    options.ProviderOptions.DefaultAccessTokenScopes.Add("offline_access");
});

アプリを実行する

アプリを実行するには、次のいずれかの方法を使用します。

Visual Studio
- [実行] ボタンを選択します。
- メニューの、 [デバッグ]>[デバッグ開始] を使用します。
- F5キーを押します。
.NET CLI コマンドシェル: アプリのフォルダーから dotnet watch (または dotnet run) コマンドを実行します。

アプリのパーツ

このセクションでは、Blazor WebAssembly プロジェクトテンプレートから生成されたアプリのパーツについて、アプリの構成方法を説明します。「チュートリアル」セクションのガイダンスを使用してアプリを作成した場合、基本的な作業アプリケーションについては、このセクションに従う必要がある具体的なガイダンスはありません。このセクションのガイダンスは、ユーザーの認証と承認を行うためにアプリを更新する場合に役立ちます。ただし、アプリは別の方法で更新することもできます。それには、「チュートリアル」セクションに記載のガイダンスに従って新しいアプリを作成し、アプリのコンポーネント、クラス、リソースを新しいアプリに移動してください。

認証パッケージ

職場または学校アカウント (SingleOrg) を使用するようにアプリを作成すると、アプリは Microsoft Authentication Library (Microsoft.Authentication.WebAssembly.Msal) のパッケージ参照を自動的に受け取ります。このパッケージには、アプリでユーザーを認証し、保護された API を呼び出すためのトークンを取得するのに役立つ一連のプリミティブが用意されています。

アプリに認証を追加する場合は、アプリに Microsoft.Authentication.WebAssembly.Msal パッケージを手動で追加します。

Note

.NET アプリへのパッケージの追加に関するガイダンスについては、「パッケージ利用のワークフロー」 (NuGet ドキュメント) の "パッケージのインストールと管理" に関する記事を参照してください。 NuGet.org で正しいパッケージバージョンを確認します。

Microsoft.Authentication.WebAssembly.Msal パッケージによって、Microsoft.AspNetCore.Components.WebAssembly.Authentication パッケージがアプリに推移的に追加されます。

認証サービスのサポート

ユーザーの認証に対するサポートは、Microsoft.Authentication.WebAssembly.Msal パッケージによって提供される AddMsalAuthentication 拡張メソッドを使用して、サービスコンテナーに登録されます。このメソッドでは、アプリが IdentityID プロバイダー (IP) とやり取りするために必要なすべてのサービスが設定されます。

Program ファイルで次の操作を行います。

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
});

AddMsalAuthentication メソッドでは、アプリを認証するために必要なパラメーターを構成するためのコールバックを受け入れます。アプリを構成するために必要な値は、アプリを登録するときに ME-ID 構成から取得できます。

`wwwroot/appsettings.json` 構成

構成は wwwroot/appsettings.json ファイルによって提供されます。

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  }
}

例:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "00001111-aaaa-2222-bbbb-3333cccc4444",
    "ValidateAuthority": true
  }
}

アクセストークンスコープ

Blazor WebAssembly テンプレートでは、セキュリティで保護された API のアクセストークンを要求するようにアプリが自動的に構成されるわけではありません。サインインフローの一部としてアクセストークンをプロビジョニングするには、MsalProviderOptions の既定のアクセストークンスコープにスコープを追加します。

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

AdditionalScopesToConsent を使用して追加のスコープを指定します。

options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");

Note

ユーザーが Microsoft Azure に登録されたアプリを初めて使う場合は、Microsoft Entra ID の同意 UI 経由の Microsoft Graph の AdditionalScopesToConsent。詳細については、「ASP.NET Core Blazor WebAssembly で Graph API を使用する」を参照してください。

詳細については、"その他のシナリオ" に関する記事の次のセクションを参照してください。

フレームワークは、既定ではポップアップログインモードになり、ポップアップを開くことができない場合はリダイレクトログインモードに戻ります。 MsalProviderOptions の LoginMode プロパティを redirect に設定して、リダイレクトログインモードを使用するように MSAL を構成します。

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.LoginMode = "redirect";
});

既定の設定は popup であり、文字列の値の大文字と小文字は区別されません。

インポートファイル

Microsoft.AspNetCore.Components.Authorization 名前空間は、_Imports.razor ファイルを介してアプリ全体で使用できるようになります。

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using {APPLICATION ASSEMBLY}
@using {APPLICATION ASSEMBLY}.Shared

Index ページ

Index ページ (wwwroot/index.html) ページには、JavaScript で AuthenticationService を定義するスクリプトが含まれています。 AuthenticationService によって、OIDC プロトコルの下位レベルの詳細が処理されます。アプリは、認証操作を実行するために、スクリプトで定義されているメソッドを内部的に呼び出します。

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>

アプリコンポーネント

App コンポーネント (App.razor) は、Blazor Server アプリにある App コンポーネントに似ています。

AuthorizeRouteView コンポーネントによって、現在のユーザーには所与のページへのアクセスが許可されます。それ以外では、RedirectToLogin コンポーネントがレンダリングされます。
RedirectToLogin コンポーネントによって、承認されていないユーザーのログインページへのリダイレクトが管理されます。

CascadingAuthenticationState コンポーネントによって、アプリの rest に AuthenticationState を公開する動作が管理されます。
AuthorizeRouteView コンポーネントによって、現在のユーザーには所与のページへのアクセスが許可されます。それ以外では、RedirectToLogin コンポーネントがレンダリングされます。
RedirectToLogin コンポーネントによって、承認されていないユーザーのログインページへのリダイレクトが管理されます。

ASP.NET Core のリリースごとにフレームワークに違いがあるため、App コンポーネント (App.razor) の Razor マークアップは、このセクションでは説明しません。特定のリリース向けのコンポーネントのマークアップを調べる場合は、次の方法の ''いずれか'' を使用してください。

使用しようとしている ASP.NET Core のバージョン向けの既定の Blazor WebAssembly プロジェクトテンプレートから、認証のためにプロビジョニングされたアプリを作成します。作成されたアプリで、App コンポーネント (App.razor) を検証します。
参照元で、App コンポーネント (App.razor) を検証します。ブランチセレクターからバージョンを選択し、リポジトリの ProjectTemplates フォルダーでコンポーネントを検索します。これは、長年にわたって移動しているためです。

Note

通常、.NET 参照ソースへのドキュメントリンクを使用すると、リポジトリの既定のブランチが読み込まれます。このブランチは、.NET の次回リリースに向けて行われている現在の開発を表します。特定のリリースのタグを選択するには、[Switch branches or tags](ブランチまたはタグの切り替え) ドロップダウンリストを使います。詳細については、「ASP.NET Core ソースコードのバージョンタグを選択する方法」 (dotnet/AspNetCore.Docs #26205) を参照してください。

RedirectToLogin コンポーネント

RedirectToLogin コンポーネント (RedirectToLogin.razor) は:

承認されていないユーザーのログインページへのリダイレクトを管理します。
ユーザーがアクセスしようとしている現在の URL は、次を使用して認証が成功した場合にそのページに戻ることができるように保持されます。
- .NET 7 以降の ASP.NET Core でのナビゲーション履歴の状態。
- .NET 6 以前の ASP.NET Core でのクエリ文字列。

参照元で、RedirectToLogin コンポーネントを検証します。コンポーネントの場所は時間の経過と共に変更されたため、GitHub 検索ツールを使用してコンポーネントを見つけてください。

Note

通常、.NET 参照ソースへのドキュメントリンクを使用すると、リポジトリの既定のブランチが読み込まれます。このブランチは、.NET の次回リリースに向けて行われている現在の開発を表します。特定のリリースのタグを選択するには、[Switch branches or tags](ブランチまたはタグの切り替え) ドロップダウンリストを使います。詳細については、「ASP.NET Core ソースコードのバージョンタグを選択する方法」 (dotnet/AspNetCore.Docs #26205) を参照してください。

LoginDisplay コンポーネント

LoginDisplay コンポーネント (LoginDisplay.razor) は MainLayout コンポーネント (MainLayout.razor) でレンダリングされます。このコンポーネントによって次の動作が管理されます。

認証されたユーザーの場合:
- 現在のユーザー名が表示されます。
- ASP.NET Core Identity のユーザープロファイルページへのリンクが提供されます。
- アプリからログアウトするためのボタンが用意されます。
匿名ユーザーの場合:
- 登録するオプションが提供されます。
- ログインするオプションが提供されます。

ASP.NET Core のリリースごとにフレームワークに違いがあるため、LoginDisplay コンポーネントの Razor マークアップは、このセクションでは説明しません。特定のリリース向けのコンポーネントのマークアップを調べる場合は、次の方法の ''いずれか'' を使用してください。

使用しようとしている ASP.NET Core のバージョン向けの既定の Blazor WebAssembly プロジェクトテンプレートから、認証のためにプロビジョニングされたアプリを作成します。作成されたアプリで、LoginDisplay コンポーネントを検証します。
参照元で、LoginDisplay コンポーネントを検証します。コンポーネントの場所は時間の経過と共に変更されたため、GitHub 検索ツールを使用してコンポーネントを見つけてください。 true と等しい Hosted のテンプレートコンテンツが使用されます。

注意

通常、.NET 参照ソースへのドキュメントリンクを使用すると、リポジトリの既定のブランチが読み込まれます。このブランチは、.NET の次回リリースに向けて行われている現在の開発を表します。特定のリリースのタグを選択するには、[Switch branches or tags](ブランチまたはタグの切り替え) ドロップダウンリストを使います。詳細については、「ASP.NET Core ソースコードのバージョンタグを選択する方法」 (dotnet/AspNetCore.Docs #26205) を参照してください。

認証コンポーネント

Authentication コンポーネント (Pages/Authentication.razor) によって生成されるページによって、さまざまな認証ステージを処理するために必要なルートが定義されます。

RemoteAuthenticatorView コンポーネント:

Microsoft.AspNetCore.Components.WebAssembly.Authentication パッケージによって提供されます。
認証の各段階における適切なアクションの実行を管理します。

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action" />

@code {
    [Parameter]
    public string? Action { get; set; }
}

Note

null 許容参照型 (NRT) と .NET コンパイラの null 状態スタティック分析は、.NET 6 以降の ASP.NET Core でサポートされています。 .NET 6 の ASP.NET Core のリリースより前は、string 型は null 型の指定 (?) なしで表示されます。

トラブルシューティング

ログ機能

Blazor WebAssembly 認証のデバッグまたはトレースログを有効にするには、記事バージョンセレクターを ASP.NET Core 7.0 以降に設定して、ASP.NET Core Blazor ログの "クライアント側認証ログ" セクションを参照してください。

一般的なエラー

アプリまたは Identity プロバイダー (IP) の構成の誤り

最も一般的なエラーの原因は、構成の誤りです。以下に例を示します。
- シナリオの要件によっては、権限、インスタンス、テナント ID、テナントドメイン、クライアント ID、またはリダイレクト URI の欠落または誤りによって、アプリによるクライアントの認証ができなくなります。
- 要求スコープが正しくないと、クライアントはサーバー Web API エンドポイントにアクセスできません。
- サーバー API のアクセス許可が正しくないか、存在しないと、クライアントがサーバー Web API エンドポイントにアクセスできなくなります。
- IP のアプリ登録のリダイレクト URI で構成されているものとは異なるポートでアプリが実行されています。 Microsoft Entra ID と、localhost 開発テストアドレスで実行されるアプリにポートは必要ありませんが、アプリのポート構成とアプリが実行されているポートは、localhost 以外のアドレスと一致する必要があることに注意してください。
この記事のガイダンスの構成セクションに、正しい構成の例を示します。記事の各セクションを慎重に確認して、アプリと IP の構成の誤りを探してください。

構成が正しい場合:
- アプリケーションログを分析します。
- ブラウザーの開発者ツールを使用して、クライアントアプリと IP またはサーバーアプリの間のネットワークトラフィックを確認します。多くの場合、要求を行った後、IP またはサーバーアプリによって、問題の原因を特定する手掛かりを含む正確なエラーメッセージまたはメッセージがクライアントに返されます。開発者ツールのガイダンスは、次の記事にあります。
  - Google Chrome (Google ドキュメント)
  - Microsoft Edge
  - Mozilla Firefox (Mozilla ドキュメント)
- JSON Web トークン (JWT) が使われている Blazor のリリースの場合は、問題が発生している場所に応じて、クライアントの認証またはサーバー Web API へのアクセスに使われるトークンの内容をデコードします。詳細については、「JSON Web トークン (JWT) の内容を検査する」を参照してください。
ドキュメントチームは、ドキュメントのフィードバックと記事のバグについては対応します (こちらのページのフィードバックセクションからイシューを作成してください) が、製品サポートを提供することはできません。アプリのトラブルシューティングに役立つ、いくつかのパブリックサポートフォーラムが用意されています。次をお勧めします。
上記のフォーラムは、Microsoft が所有または管理するものではありません。

セキュリティで保護されておらず、機密でも社外秘でもない再現可能なフレームワークのバグレポートについては、ASP.NET Core 製品単位でイシューを作成してください。問題の原因を徹底的に調査し、パブリックサポートフォーラムのコミュニティの助けを借りてもお客様自身で解決できない場合にのみ、製品単位でイシューを作成してください。単純な構成の誤りやサードパーティのサービスに関連するユースケースによって破損した個々のアプリのトラブルシューティングは、製品単位で行うことはできません。レポートが機密性の高い性質のものである場合や、攻撃者が悪用するおそれのある製品の潜在的なセキュリティ上の欠陥が記述されている場合は、「セキュリティの問題とバグの報告」 (dotnet/aspnetcore GitHub リポジトリ) をご覧ください。
ME-ID で承認されないクライアント

情報:Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] 承認に失敗しました。次の要件が満たされていません。DenyAnonymousAuthorizationRequirement:認証済みユーザーが必要です。

ME-ID からのログインコールバックエラー:
- エラー: unauthorized_client
- 説明: AADB2C90058: The provided application is not configured to allow public clients.
このエラーを解決するには:
1. Azure portal で、アプリのマニフェストにアクセスします。
2. allowPublicClient 属性を null または true に設定します。

Cookie とサイトデータ

Cookie とサイトデータは、アプリが更新されても保持され、テストやトラブルシューティングに影響する可能性があります。アプリコードの変更、プロバイダーによるユーザーアカウントの変更、プロバイダーアプリの構成変更を行うときは、次のものをクリアしてください。

ユーザーのサインインの Cookie
アプリの Cookie
キャッシュおよび保存されたサイトデータ

残った Cookie とサイトデータがテストとトラブルシューティングに影響しないようにする方法を、次に示します。

ブラウザーを構成する
- ブラウザーが閉じるたびに cookie とサイトデータをすべて削除するように構成できることをテストするために、ブラウザーを使用します。
- アプリ、テストユーザー、プロバイダー構成が変更されるたびにブラウザーが手動で、または IDE によって閉じられていることを確認します。
カスタムコマンドを使用して、Visual Studio でブラウザーを InPrivate または Incognito モードで開きます:
- Visual Studio の [実行] ボタンをクリックして [ブラウザーの選択] ダイアログボックスを開きます。
- [追加] ボタンを選びます。
- [プログラム] フィールドでブラウザーのパスを指定します。次の実行可能パスが、Windows 10 の一般的なインストール場所です。ブラウザーが別の場所にインストールされている場合、または Windows 10 を使用していない場合は、ブラウザーの実行可能ファイルのパスを指定してください。
  - Microsoft Edge: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
  - Google Chrome: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
  - Mozilla Firefox: C:\Program Files\Mozilla Firefox\firefox.exe
- [引数] フィールドに、ブラウザーを InPrivate または Incognito モードで開くために使用するコマンドラインオプションを指定します。ブラウザーによっては、アプリの URL が必要になる場合があります。
  - Microsoft Edge:-inprivate を使用してください。
  - Google Chrome: --incognito --new-window {URL} を使用します。プレースホルダー {URL} は開く URL (たとえば、https://localhost:5001 など) です。
  - Mozilla Firefox: -private -url {URL} を使用します。プレースホルダー {URL} は開く URL (たとえば、https://localhost:5001 など) です。
- [フレンドリ名] フィールドに名前を指定します。たとえば、Firefox Auth Testing のようにします。
- [OK] ボタンを選択します。
- アプリでテストを繰り返すたびにブラウザープロファイルを選択する必要がないようにするには、 [既定値として設定] ボタンでプロファイルを既定値として設定します。
- アプリ、テストユーザー、またはプロバイダー構成が変更されるたびに、ブラウザーが IDE によって閉じられていることを確認します。

アプリのアップグレード

開発マシンで .NET Core SDK をアップグレードしたり、アプリ内のパッケージバージョンを変更したりした直後に、機能しているアプリが失敗することがあります。場合によっては、パッケージに統一性がないと、メジャーアップグレード実行時にアプリが破壊されることがあります。これらの問題のほとんどは、次の手順で解決できます。

コマンドシェルから dotnet nuget locals all --clear を実行して、ローカルシステムの NuGet パッケージキャッシュをクリアします。
プロジェクトのフォルダー bin と obj を削除します。
プロジェクトを復元してリビルドします。
アプリを再展開する前に、サーバー上の展開フォルダー内のすべてのファイルを削除します。

Note

アプリのターゲットフレームワークと互換性のないパッケージバージョンの使用はサポートされていません。パッケージの詳細については、NuGet ギャラリーまたは FuGet パッケージエクスプローラーを使用してください。

`Server` アプリを実行する

ホステッド Blazor WebAssemblyソリューションのテストとトラブルシューティングを行うときは、Server プロジェクトからアプリを実行していることをご確認ください。

ユーザーを検査する

次の User コンポーネントは、アプリ内で直接使うことも、さらにカスタマイズするための基礎として使うこともできます。

User.razor:

@page "/user"
@attribute [Authorize]
@using System.Text.Json
@using System.Security.Claims
@inject IAccessTokenProvider AuthorizationService

<h1>@AuthenticatedUser?.Identity?.Name</h1>

<h2>Claims</h2>

@foreach (var claim in AuthenticatedUser?.Claims ?? Array.Empty<Claim>())
{
    <p class="claim">@(claim.Type): @claim.Value</p>
}

<h2>Access token</h2>

<p id="access-token">@AccessToken?.Value</p>

<h2>Access token claims</h2>

@foreach (var claim in GetAccessTokenClaims())
{
    <p>@(claim.Key): @claim.Value.ToString()</p>
}

@if (AccessToken != null)
{
    <h2>Access token expires</h2>

    <p>Current time: <span id="current-time">@DateTimeOffset.Now</span></p>
    <p id="access-token-expires">@AccessToken.Expires</p>

    <h2>Access token granted scopes (as reported by the API)</h2>

    @foreach (var scope in AccessToken.GrantedScopes)
    {
        <p>Scope: @scope</p>
    }
}

@code {
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationState { get; set; }

    public ClaimsPrincipal AuthenticatedUser { get; set; }
    public AccessToken AccessToken { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        var state = await AuthenticationState;
        var accessTokenResult = await AuthorizationService.RequestAccessToken();

        if (!accessTokenResult.TryGetToken(out var token))
        {
            throw new InvalidOperationException(
                "Failed to provision the access token.");
        }

        AccessToken = token;

        AuthenticatedUser = state.User;
    }

    protected IDictionary<string, object> GetAccessTokenClaims()
    {
        if (AccessToken == null)
        {
            return new Dictionary<string, object>();
        }

        // header.payload.signature
        var payload = AccessToken.Value.Split(".")[1];
        var base64Payload = payload.Replace('-', '+').Replace('_', '/')
            .PadRight(payload.Length + (4 - payload.Length % 4) % 4, '=');

        return JsonSerializer.Deserialize<IDictionary<string, object>>(
            Convert.FromBase64String(base64Payload));
    }
}

JSON Web トークン (JWT) の内容を検査する

JSON Web トークン (JWT) をデコードするには、Microsoft の jwt.ms ツールを使用します。 UI の値がブラウザーに残ることはありません。

エンコードされた JWT の例 (表示用に短縮されています):

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q

Azure AAD B2C に対して認証するアプリのツールによってデコードされた JWT の例:

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1610059429,
  "nbf": 1610055829,
  "ver": "1.0",
  "iss": "https://mysiteb2c.b2clogin.com/11112222-bbbb-3333-cccc-4444dddd5555/v2.0/",
  "sub": "aaaaaaaa-0000-1111-2222-bbbbbbbbbbbb",
  "aud": "00001111-aaaa-2222-bbbb-3333cccc4444",
  "nonce": "bbbb0000-cccc-1111-dddd-2222eeee3333",
  "iat": 1610055829,
  "auth_time": 1610055822,
  "idp": "idp.com",
  "tfp": "B2C_1_signupsignin"
}.[Signature]

次の方法で共有

Microsoft アカウントを使用して、ASP.NET Core Blazor WebAssembly スタンドアロンアプリをセキュリティで保護する

チュートリアル

Azure でテナントを作成する

Azure にアプリを登録する

Blazor アプリを作成する

アプリを実行する

アプリのパーツ

認証パッケージ

認証サービスのサポート

`wwwroot/appsettings.json` 構成

アクセストークンスコープ

インポートファイル

Index ページ

アプリコンポーネント

RedirectToLogin コンポーネント

LoginDisplay コンポーネント

認証コンポーネント

トラブルシューティング

ログ機能

一般的なエラー

Cookie とサイトデータ

アプリのアップグレード

`Server` アプリを実行する

ユーザーを検査する

JSON Web トークン (JWT) の内容を検査する

その他の技術情報

その他のリソース

次の方法で共有

Microsoft アカウントを使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する

チュートリアル

Azure でテナントを作成する

Azure にアプリを登録する

Blazor アプリを作成する

アプリを実行する

アプリのパーツ

認証パッケージ

認証サービスのサポート

wwwroot/appsettings.json 構成

アクセス トークン スコープ

ログイン モード

インポート ファイル

Index ページ

アプリ コンポーネント

RedirectToLogin コンポーネント

LoginDisplay コンポーネント

認証コンポーネント

トラブルシューティング

ログ機能

一般的なエラー

Cookie とサイト データ

アプリのアップグレード

Server アプリを実行する

ユーザーを検査する

JSON Web トークン (JWT) の内容を検査する

その他の技術情報

その他のリソース

Microsoft アカウントを使用して、ASP.NET Core Blazor WebAssembly スタンドアロンアプリをセキュリティで保護する

`wwwroot/appsettings.json` 構成

アクセストークンスコープ

ログインモード

インポートファイル

アプリコンポーネント

Cookie とサイトデータ

`Server` アプリを実行する