Azure AD B2C を使って Azure Web アプリで認証を構成する

  • [アーティクル]

この記事では、Azure Web アプリに Azure Active Directory B2C (Azure AD B2C) 認証機能を追加する方法について説明します。 詳細については、「OpenID Connect プロバイダーを使用してログインするように App Service または Azure Functions アプリを構成する」の記事を参照してください。

概要

OpenID Connect (OIDC) は、OAuth 2.0 を基盤にした認証プロトコルです。 OIDC を使用して、ユーザーを安全に Azure Web アプリにサインインさせます。 サインイン フローでは、次の手順が実行されます。

  1. ユーザーが Azure Web アプリにアクセスして [サインイン] を選択します。
  2. Azure Web アプリによって認証要求が開始され、ユーザーが Azure AD B2C にリダイレクトされます。
  3. ユーザーがサインアップまたはサインインし、パスワードをリセットします。 ソーシャル アカウントを使用してサインインすることもできます。
  4. ユーザーがサインインに成功すると、Azure AD B2C は Azure Web アプリに ID トークンを返します。
  5. Azure Web アプリは、ID トークンを認証し、要求の内容を読み取り、セキュリティで保護されたページをユーザーに返します。

ID トークンが有効期限切れになった場合、またはアプリ セッションが無効になった場合、Azure Web アプリは新しい認証要求を開始し、ユーザーを Azure AD B2C にリダイレクトします。 Azure AD B2C SSO セッションがアクティブである場合、Azure AD B2C は、ユーザーに再度サインインを促さずにアクセス トークンを発行します。 Azure AD B2C セッションが有効期限切れまたは無効になった場合、ユーザーは再度サインインするように促されます。

前提条件

  • アプリをまだ作成していない場合は、Azure Web アプリを作成する方法に関するガイダンスに従ってください。

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

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

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

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

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

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

アプリケーションが Azure AD B2C でサインインできるようにするには、Azure AD B2C ディレクトリにアプリを登録します。 アプリを登録すると、アプリと Azure AD B2C の間に信頼関係が確立されます。

アプリの登録時に、リダイレクト URI を明記します。 リダイレクト URI は、ユーザーが Azure AD B2C で認証を行った後、Azure AD B2C によってリダイレクトされるエンドポイントです。 アプリ登録プロセスは、アプリを一意に識別するアプリケーション ID (またはクライアント ID として知られています) を生成します。 アプリが登録されると、Azure AD B2C はアプリケーション ID とリダイレクト URI の両方を使用して認証要求を作成します。 また、トークンを安全に取得するためにアプリによって使用される、"クライアント シークレット" を作成します。

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

アプリケーションを登録するには、次の手順に従います。

  1. Azure portal にサインインします。

  2. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。

  3. Azure portal で、 [Azure AD B2C] を検索して選択します。

  4. [アプリの登録] を選択し、 [新規登録] を選択します。

  5. [名前] には、アプリケーションの名前を入力します (例: My Azure web app)。

  6. [サポートされているアカウントの種類] で、 [Accounts in any identity provider or organizational directory (for authenticating users with user flows)]((ユーザー フローを使用してユーザーを認証するための) 任意の ID プロバイダーまたは組織のディレクトリのアカウント) を選択します。

  7. [リダイレクト URI] で、 [Web] を選択し、URL ボックスに「https://<YOUR_SITE>/.auth/login/aadb2c/callback」と入力します。 <YOUR_SITE> を Azure Web アプリ名に置き換えます。 (例: https://contoso.azurewebsites.net/.auth/login/aadb2c/callback)。 Azure Web アプリのカスタム ドメインを構成した場合は、リダイレクト URI でカスタム ドメインを使用します。 たとえば、https://www.contoso.com/.auth/login/aadb2c/callback のように指定します。

  8. [アクセス許可] で、 [Grant admin consent to openid and offline access permissions](OpenID とオフラインのアクセス許可に管理者の同意を与える) チェック ボックスをオンにします。

  9. [登録] を選択します。

  10. [概要] を選択します。

  11. アプリケーション (クライアント) ID を記録しておきます。これは、後で Web アプリケーションを構成するときに使用します。

    Screenshot of the web app Overview page for recording your web application I D.

手順 2.2: クライアント シークレットを作成する

  1. [Azure AD B2C - アプリの登録] ページで、作成したアプリケーション (例: My Azure web app) を選択します。
  2. 左側のメニューで、[管理] の [証明書とシークレット] を選択します。
  3. [新しいクライアント シークレット] を選択します。
  4. [説明] ボックスにクライアント シークレットの説明を入力します。 たとえば、clientsecret1 のようにします。
  5. [有効期限] で、シークレットが有効な期間を選択してから、 [追加] を選択します。
  6. クライアント アプリケーションのコードで使用できるように、シークレットの値を記録します。 このページからの移動後は、このシークレットの値は "二度と表示されません"。 アプリケーションのコード内で、この値をアプリケーション シークレットとして使用します。

手順 3: Azure アプリを構成する

  1. Azure portal にサインインします。

  2. 複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Microsoft Entra ID テナントに切り替えます。

  3. お使いの Azure Web アプリに移動します。

  4. 左側のメニューで [認証] を選択します。 [ID プロバイダーの追加] を選択します。

  5. ID プロバイダーのドロップダウンから [OpenID Connect] を選びます。

  6. [OpenID プロバイダー名] に、「aadb2c」を入力します。

  7. [メタデータ エントリ] で、[ドキュメントの URL] を選択します。 次に、[ドキュメントの URL] に次の URL を指定します。

    https://<TENANT_NAME>.b2clogin.com/<TENANT_NAME>.onmicrosoft.com/<POLICY_NAME>/v2.0/.well-known/openid-configuration

    1. <TENANT_NAME> を、Azure AD B2C テナント名の最初の部分に置き換えます (例: https://contoso.b2clogin.com/contoso.onmicrosoft.com)。 カスタム ドメインを構成している場合は、そのカスタム ドメインを使用できます。 認証要求 URL の B2C テナント名 contoso.onmicrosoft.com をテナント ID GUID に置き換えます。 たとえば、https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ を https://account.contosobank.co.uk/<tenant ID GUID>/ に変更できます。

    2. <POLICY_NAME> を、手順 1 で作成したユーザー フローまたはカスタム ポリシーに置き換えます。

  8. クライアント ID に、手順 2.1 の Web アプリ (クライアント) ID を指定します。

  9. クライアント シークレットに、手順 2.2 の Web アプリ (クライアント) シークレットを指定します。

    ヒント

    クライアント シークレットはアプリ設定として保存され、シークレットは安全な方法で確実に格納されます。 Azure Key Vault でシークレットを管理する場合は、Key Vault 参照を使用するように、この設定を後で更新することができます。

  10. 残りの設定は既定値のままにします。

  11. [追加] ボタンを選んで、ID プロバイダーの設定を完了します。

手順 4: Azure Web アプリを確認する

  1. ブラウザーで、https://<app-name>.azurewebsites.net を使用して Azure Web アプリに移動します。 <app-name> を Azure Web アプリに置き換えます。
  2. サインアップまたはサインイン プロセスを完了します。
  3. ブラウザーで、次の URL https://<app-name>.azurewebsites.net/.auth/me に移動して、サインインしているユーザーに関する情報を表示します。 <app-name> を Azure Web アプリに置き換えます。

アプリ コードでのトークンの取得

サーバー コードからプロバイダー固有のトークンが要求ヘッダーに挿入されるので、これらのトークンに簡単にアクセスできます。 次の表は、可能なトークン ヘッダー名を示しています。

ヘッダー名 説明
X-MS-CLIENT-PRINCIPAL-NAME ユーザーの表示名。
X-MS-CLIENT-PRINCIPAL-ID ID トークン サブ要求。
X-MS-CLIENT-PRINCIPAL-IDP ID プロバイダー名 aadb2c。
X-MS-TOKEN-AADB2C-ID-TOKEN Azure AD B2C によって発行された ID トークン

次のステップ