Azure AD B2C を使用して Web API を呼び出すサンプルの Web アプリで認証を構成する

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

この記事では、Web API を呼び出すサンプルの ASP.NET Web アプリケーションを使用して、Web アプリケーションに Azure Active Directory B2C (Azure AD B2C) 認証を追加する方法を説明します。

重要

この記事で参照されているサンプルの ASP.NET Web アプリは、ベアラートークンを使用して Web API を呼び出すために使用されます。 Web API を呼び出さない Web アプリケーションについては、「Azure AD B2C を使用してサンプル Web アプリで認証を構成する」を参照してください。

概要

OpenID Connect (OIDC) は、OAuth 2.0 を基盤にした認証プロトコルです。 OIDC を使用して、ユーザーをアプリケーションに安全にサインインさせることができます。この Web アプリのサンプルでは、Microsoft Identity Web が使用されます。 Microsoft Identity Web は、セキュリティ保護された Web API を呼び出すことができる Web アプリへの認証と認可のサポートの追加を簡略化する ASP.NET Core ライブラリのセットです。

サインインフローでは、次の手順が実行されます。

ユーザーが Web アプリにアクセスして [サインイン] を選択します。
アプリによって認証要求が開始され、ユーザーが Azure AD B2C にリダイレクトされます。
ユーザーがサインアップまたはサインインし、パスワードをリセットします。ソーシャルアカウントを使用してサインインすることもできます。
ユーザーがサインインすると、Azure AD B2C からアプリに認可コードが返されます。
その後、アプリでは次が実行されます。

a. 認可コードが、ID トークン、アクセストークン、更新トークンと交換されます。
b. ID トークンクレームが読み取られて、アプリケーション認可 Cookie が永続化されます。
c. 後で使用できるように、更新トークンがメモリ内キャッシュに格納されます。

アプリ登録の概要

アプリで Azure AD B2C を使用してサインインし、Web API を呼び出せるようにするには、Azure AD B2C ディレクトリに 2 つのアプリケーションを登録します。

Web アプリケーションの登録により、アプリでは Azure AD B2C を使用してサインインできるようになります。登録時に、"リダイレクト URI" を指定します。リダイレクト URI は、Azure AD B2C での認証が完了した後にユーザーが Azure AD B2C によってリダイレクトされるエンドポイントです。アプリの登録プロセスによって、アプリを一意に識別する "アプリケーション ID" ("クライアント ID" とも呼ばれます) が生成されます。また、トークンを安全に取得するためにアプリによって使用される、"クライアントシークレット" を作成します。
Web API の登録により、アプリではセキュリティで保護された Web API を呼び出すことができます。登録には、Web API の "スコープ" が含まれます。スコープを使用することで、Web API などの保護されたリソースへのアクセス許可を管理できます。 Web アプリケーションのアクセス許可を Web API のスコープに付与します。アクセストークンが要求されたら、アプリで必要なアクセス許可を要求の scope パラメーターに指定します。

アプリのアーキテクチャと登録について、次の図に示します。

Diagram of a web app with web API call registrations and tokens.

Web API の呼び出し

認証が完了した後、ユーザーがアプリと対話すると、保護された Web API が呼び出されます。その Web API では、ベアラートークン認証が使用されます。ベアラートークンは、アプリによって Azure AD B2C から取得されたアクセストークンです。アプリでは、HTTPS 要求の Authorization ヘッダーでトークンを渡します。

Authorization: Bearer <access token>

アクセストークンのスコープが Web API のスコープと一致しない場合、認証ライブラリでは正しいスコープの新しいアクセストークンが取得されます。

サインアウト

サインアウトフローには、次の手順が含まれます。

アプリから、ユーザーがサインアウトします。
アプリによってそのセッションオブジェクトがクリアされ、認証ライブラリによってそのトークンキャッシュがクリアされます。
アプリによってユーザーが Azure AD B2C サインアウトエンドポイントに移動し、Azure AD B2C セッションが終了されます。
ユーザーが再びアプリにリダイレクトされます。

前提条件

次のいずれかを実行しているコンピューター:

Visual Studio
Visual Studio Code

ASP.NET および Web 開発ワークロードを使用する Visual Studio 2022 17.0 以降のバージョン
.NET 6.0 SDK

手順 1: ユーザーフローを構成する

ユーザーがアプリにサインインしようとすると、ユーザーフローを介した承認エンドポイントへの認証要求がアプリによって開始されます。ユーザーフローによって、ユーザーのエクスペリエンスが定義および制御されます。ユーザーがユーザーフローを完了すると、Azure AD B2C によってトークンが生成され、ユーザーはアプリケーションにリダイレクトされます。

ユーザーフローまたはカスタムポリシーの作成をまだ行っていない場合は、作成します。手順を繰り返して、次のように 3 つの個別のユーザーフローを作成します。

サインインとサインアップを結合したユーザーフロー (例:)susi。このユーザーフローでは、パスワードを忘れた 場合のエクスペリエンスもサポートされています。
プロファイル編集 ユーザーフロー (例: edit_profile) 。
パスワードのリセット ユーザーフロー (例: reset_password)。

Azure AD B2C は、 B2C_1_ ユーザーフロー名の前に付加されます。たとえば、susi が B2C_1_susi になります。

手順 2: Web アプリケーションを登録する

この手順では、Web アプリと Web API アプリケーションの登録を作成し、Web API のスコープを指定します。

手順 2.1: Web API アプリを登録する

Web API アプリの登録 (App ID: 2) を作成するには、次の手順に従います。

Azure portal にサインインします。
ご自分の Azure AD B2C テナントが含まれるディレクトリを必ず使用してください。ポータルツールバーの [Directories + subscriptions](ディレクトリ + サブスクリプション) アイコンを選択します。
[ポータルの設定] | [Directories + subscriptions](ディレクトリ + サブスクリプション) ページの [ディレクトリ名] の一覧で自分の Azure AD B2C ディレクトリを見つけて、 [切り替え] を選択します。
Azure portal で、 [Azure AD B2C] を検索して選択します。
[アプリの登録] を選択し、 [新規登録] を選択します。
アプリケーションの名前を入力します (my-api1 など)。 [リダイレクト URI] と [サポートされているアカウントの種類] を既定値のままにします。
[登録] を選択します。
アプリ登録が完了したら、 [概要] を選択します。
アプリケーション (クライアント) ID の値を記録しておきます。これは、後で Web アプリケーションを構成するときに使用します。

手順 2.2: Web API アプリのスコープを構成する

作成した my-api1 アプリケーション (App ID: 2) を選択して、その [概要] ページを開きます。
[管理] の [API の公開] を選択します。
[アプリケーション ID URI] の横にある [設定] リンクを選択します。既定値 (GUID) を一意の名前 (例: tasks-api) に置き換え、[保存] を選択します。

Web アプリケーションで Web API のアクセストークンを要求するときに、API に対して定義する各スコープのプレフィックスとしてこの URI を追加する必要があります。
[この API で定義されるスコープ] で、 [スコープの追加] を選択します。
API への読み取りアクセスを定義するスコープを作成するには:
1. [スコープ名] に tasks.read を入力します。
2. [管理者の同意の表示名] で、「Read access to tasks API」を入力します。
3. [管理者の同意の説明] で、「Allows read access to the tasks API」を入力します。
[スコープの追加] を選択します。
[Add a scope (スコープの追加)] を選択し、API への書き込みアクセスを定義するスコープを追加します。
1. [スコープ名] に「tasks.write」を入力します。
2. [管理者の同意の表示名] に、「Write access to tasks API」を入力します。
3. [管理者の同意の説明] に、「Allows write access to the tasks API」を入力します。
[スコープの追加] を選択します。

手順 2.3: Web アプリを登録する

Web アプリの登録を作成するには、次の手順を実行します。

[アプリの登録] を選択し、 [新規登録] を選択します。
[名前] で、アプリケーションの名前を入力します (webapp1 など)。
[サポートされているアカウントの種類] で、 [Accounts in any identity provider or organizational directory (for authenticating users with user flows)]((ユーザーフローを使用してユーザーを認証するための) 任意の ID プロバイダーまたは組織のディレクトリのアカウント) を選択します。
[リダイレクト URI] で、 [Web] を選択し、URL ボックスに「https://localhost:5000/signin-oidc」と入力します。
[アクセス許可] で、 [Grant admin consent to openid and offline access permissions](OpenID とオフラインのアクセス許可に管理者の同意を与える) チェックボックスをオンにします。
[登録] を選択します。
アプリ登録が完了したら、 [概要] を選択します。
アプリケーション (クライアント) ID を記録しておきます。これは、後で Web アプリケーションを構成するときに使用します。

手順 2.4: Web アプリのクライアントシークレットを作成する

登録済み Web アプリケーションに対してクライアントシークレットを作成します。 Web アプリケーションでは、トークンを要求するときに、このクライアントシークレットを使ってその ID を証明します。

[管理] で、[証明書とシークレット] を選択します。
[新しいクライアントシークレット] を選択します。
[説明] ボックスにクライアントシークレットの説明を入力します (例、clientsecret1)。
[有効期限] で、シークレットが有効な期間を選択してから、 [追加] を選択します。
シークレットの値を記録します。この値は、後の手順での構成に使用します。

手順 2.5: Web API に対するアクセス許可を Web アプリに付与する

アプリ (アプリ ID: 1) にアクセス許可を付与するには、次の手順をおこないます。

[アプリの登録] を選択し、作成したアプリを選択します (アプリ ID: 1)。
[管理] の下にある [API のアクセス許可] を選択します。
[構成されたアクセス許可] の下で [アクセス許可の追加] を選択します。
[自分の API] タブを選択します。
Web アプリケーションへのアクセス許可が必要な API を選択します (アプリ ID: 2)。たとえば、「my-api1」と入力します。
[アクセス許可] で、 [タスク] を展開し、前に定義したスコープを選択します(たとえば、tasks.read と tasks.write)。
[アクセス許可の追加] を選択します.
[<テナント名> に管理者の同意を与えます] を選択します。
[はい] を選択します。
[最新の情報に更新] を選択し、両方のスコープの [状態] に、Granted for ...(... に付与されました) と表示されていることを確認します。
[Configured permissions (構成済みのアクセス許可)] の一覧からスコープを選択し、スコープの完全な名前をコピーします。

手順 3: Web アプリのサンプルを取得する

zip ファイルをダウンロードするか、次の Bash コマンドを実行して、GitHub からサンプル Web アプリケーションをクローンします。

git clone https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2

パスの合計文字長が 260 以下のフォルダーにサンプルファイルを展開します。

手順 4: サンプル Web API を構成する

サンプルフォルダー内の 4-WebApp-your-API/4-2-B2C/TodoListService フォルダーにある TodoListService.csproj プロジェクトを Visual Studio または Visual Studio Code で開きます。

プロジェクトのルートフォルダーで、appsettings.json ファイルを開きます。このファイルには、Azure AD B2C ID プロバイダーに関する情報が含まれています。 Web API アプリではこの情報を使用して、Web アプリからベアラートークンとして渡されるアクセストークンが検証されます。アプリ設定の次のプロパティを更新します。

Section	キー	値
AzureAdB2C	インスタンス	Azure AD B2C テナント名の最初の部分。たとえば、「 `https://contoso.b2clogin.com` 」のように入力します。
AzureAdB2C	Domain	Azure AD B2C テナントの完全なテナント名。たとえば、「 `contoso.onmicrosoft.com` 」のように入力します。
AzureAdB2C	ClientId	手順 2.1 の Web API アプリケーション ID。
AzureAdB2C	SignUpSignInPolicyId	ユーザーフロー、または手順 1 で作成したカスタムポリシー。

最終的な構成ファイルは、次の JSON ファイルのようになります。

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-api-app-application-id>",
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  // More settings here
}

手順 4.1: アクセス許可ポリシーを設定する

Web API により、ユーザーがベアラートークンを使用して認証されたこと、および構成された承認済みのスコープがベアラートークンに設定されていることが検証されます。ベアラートークンにこれらの受け入れられたスコープが設定されていない場合、Web API により HTTP 状態コード 403 (禁止) が返され、トークンで想定されているスコープを示すメッセージが応答本文に書き込まれます。

受け入れられたスコープを構成するには、Controller/TodoListController.cs クラスを開き、スコープ名を完全な URI なしで設定します。

[RequiredScope("tasks.read")]

手順 4.2: サンプル Web API アプリを実行する

Web アプリで Web API サンプルが呼び出されるのを許可するには、次の手順に従って Web API を実行します。

要求されている場合は、依存関係を復元します。
プロジェクトをビルドして実行します。
プロジェクトがビルドされると、Visual Studio または Visual Studio Code により、アドレス https://localhost:44332. を使用してブラウザーで Web API が開始されます

手順 5: サンプル Web アプリを構成する

サンプルフォルダー内の 4-WebApp-your-API/4-2-B2C/Client フォルダーにある TodoListClient.csproj プロジェクトを Visual Studio または Visual Studio Code で開きます。

プロジェクトルートフォルダーで、appsettings.json ファイルを開きます。このファイルには、Azure AD B2C ID プロバイダーに関する情報が含まれています。 Web アプリでは、この情報を使用して Azure AD B2C との信頼関係を確立し、ユーザーのサインインとサインアウトを行い、トークンを取得して、それらを検証します。アプリ設定の次のプロパティを更新します。

Section	キー	値
AzureAdB2C	インスタンス	Azure AD B2C テナント名の最初の部分 (例: `https://contoso.b2clogin.com`)。
AzureAdB2C	Domain	Azure AD B2C テナントの完全なテナント名 (例: `contoso.onmicrosoft.com`)。
AzureAdB2C	ClientId	手順 2.3 の Web アプリケーション ID。
AzureAdB2C	ClientSecret	手順 2.4 の Web アプリケーションシークレット。
AzureAdB2C	SignUpSignInPolicyId	ユーザーフロー、または手順 1 で作成したカスタムポリシー。
TodoList	TodoListScope	手順 2.5 で作成した Web API スコープ。
TodoList	TodoListBaseAddress	Web API のベース URI (例: `https://localhost:44332`)。

最終的な構成ファイルは、次の JSON のようになります。

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-app-application-id>",
    "ClientSecret": "<web-app-application-secret>",  
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  "TodoList": {
    "TodoListScope": "https://contoso.onmicrosoft.com/api/demo.read",
    "TodoListBaseAddress": "https://localhost:44332"
  }
}

手順 6: サンプル Web アプリを実行する

プロジェクトをビルドして実行します。
[http://.azurewebsites.net/admin](https://localhost:5000) を参照します。
サインインアップまたはサインインプロセスを完了します。

認証が成功すると、ナビゲーションバーに表示名が表示されます。 Azure AD B2C トークンによってアプリに返されるクレームを表示するには、 [TodoList] を選択します。

Screenshot of the web app token claims.

アプリケーションをデプロイする

運用アプリケーションでは、通常、アプリ登録のリダイレクト URI は、アプリが実行されているパブリックにアクセス可能なエンドポイント (https://contoso.com/signin-oidc など) です。

お使いの登録済みアプリケーションでは、いつでもリダイレクト URI を追加したり、変更したりすることができます。リダイレクト URI には、次の制限があります。

応答 URL は、スキーム https で始まる必要があります。
応答 URL では大文字と小文字が区別されます。大文字と小文字の区別は、実行中のアプリケーションの URL パスの場合と一致している必要があります。

Web アプリのトークンキャッシュ

Web アプリのサンプルでは、メモリ内のトークンキャッシュのシリアル化が使用されています。この実装は、サンプルにおいて非常に有用です。また、Web アプリの再起動時にトークンキャッシュが失われても構わない場合は、実稼働アプリケーションにも適しています。

運用環境では、分散メモリキャッシュを使用することをお勧めします。たとえば、Redis Cache、NCache、SQL Server キャッシュなどです。分散メモリキャッシュの実装の詳細については、「トークンキャッシュのシリアル化」を参照してください。

次の手順

コードサンプルについてさらに確認する。
Azure AD B2C を使用して独自の Web アプリケーションで認証を有効にする方法について確認する。
独自の Web API で認証を有効にする方法について確認する。

次の方法で共有

Azure AD B2C を使用して Web API を呼び出すサンプルの Web アプリで認証を構成する

概要

アプリ登録の概要

Web API の呼び出し

サインアウト

前提条件

手順 1: ユーザーフローを構成する

手順 2: Web アプリケーションを登録する

手順 2.1: Web API アプリを登録する

手順 2.2: Web API アプリのスコープを構成する

手順 2.3: Web アプリを登録する

手順 2.4: Web アプリのクライアントシークレットを作成する

手順 2.5: Web API に対するアクセス許可を Web アプリに付与する

手順 3: Web アプリのサンプルを取得する

手順 4: サンプル Web API を構成する

手順 4.1: アクセス許可ポリシーを設定する

手順 4.2: サンプル Web API アプリを実行する

手順 5: サンプル Web アプリを構成する

手順 6: サンプル Web アプリを実行する

アプリケーションをデプロイする

Web アプリのトークンキャッシュ

次の手順

フィードバック

その他のリソース

次の方法で共有

Azure AD B2C を使用して Web API を呼び出すサンプルの Web アプリで認証を構成する

概要

アプリ登録の概要

Web API の呼び出し

サインアウト

前提条件

手順 1: ユーザー フローを構成する

手順 2: Web アプリケーションを登録する

手順 2.1: Web API アプリを登録する

手順 2.2: Web API アプリのスコープを構成する

手順 2.3: Web アプリを登録する

手順 2.4: Web アプリのクライアント シークレットを作成する

手順 2.5: Web API に対するアクセス許可を Web アプリに付与する

手順 3: Web アプリのサンプルを取得する

手順 4: サンプル Web API を構成する

手順 4.1: アクセス許可ポリシーを設定する

手順 4.2: サンプル Web API アプリを実行する

手順 5: サンプル Web アプリを構成する

手順 6: サンプル Web アプリを実行する

アプリケーションをデプロイする

Web アプリのトークン キャッシュ

次の手順

フィードバック

その他のリソース

手順 1: ユーザーフローを構成する

手順 2.4: Web アプリのクライアントシークレットを作成する

Web アプリのトークンキャッシュ