Azure Active Directory B2C でユーザーインターフェイスをカスタマイズする

2025-05-04

重要

2025 年 5 月 1 日より、Azure AD B2C は新規のお客様向けに購入できなくなります。詳細については、FAQ を参照してください。

開始する前にこのページの上部にある ポリシーの種類 セレクターを使用して、設定するポリシーの種類を選択します。 Azure Active Directory B2C には、ユーザーがアプリケーションを操作する方法を定義する 2 つの方法 (定義済みのユーザーフローを使用する、または完全に構成可能なカスタムポリシーを使用する) があります。この記事で必要な手順は、方法ごとに異なります。

Azure Active Directory B2C (Azure AD B2C) が顧客に表示するユーザーインターフェイスのブランド化とカスタマイズは、アプリケーションでシームレスなユーザーエクスペリエンスを提供するのに役立ちます。これらのエクスペリエンスには、サインアップ、サインイン、プロファイル編集、パスワードのリセットが含まれます。この記事では、ページテンプレートと会社のブランドを使用して、Azure AD B2C ページをカスタマイズします。

ヒント

ページテンプレート、バナーロゴ、背景画像、または背景色以外のユーザーフローページの他の側面をカスタマイズするには、 HTML テンプレートを使用して UI をカスタマイズする方法を参照してください。

[前提条件]

ユーザーがサインアップしてアプリケーションにサインインできるように、ユーザーフローを作成します。
Web アプリケーションを登録します。

「Active Directory B2C でのカスタムポリシーの概要」の手順を完了してください。このチュートリアルでは、Azure AD B2C テナント構成を使用するようにカスタムポリシーファイルを更新する方法について説明します。
Web アプリケーションを登録します。

概要

Azure AD B2C には、ユーザーエクスペリエンスページをプロフェッショナルな外観にするために選択できる組み込みのテンプレートがいくつか用意されています。これらのページテンプレートは、会社のブランド化機能を使用して、独自のカスタマイズの開始点としても機能します。

注

クラシックテンプレートでサポートされているブラウザーには、Internet Explorer、Microsoft Edge、Google Chrome、Mozilla Firefox、Safari の最新バージョンと以前のバージョンが含まれます。 Ocean Blue および Slate Gray テンプレートでは、Internet Explorer 11 や 10 などの古いバージョンのブラウザーでサポートが制限されている場合があります。サポートするブラウザーでアプリケーションをテストすることをお勧めします。

オーシャンブルー

サインアップとサインインページにレンダリングされる Ocean Blue テンプレートの例:

Ocean Blue テンプレートのスクリーンショット

スレートグレー

サインアップサインインページにレンダリングされるスレートグレーテンプレートの例:

スレートグレーテンプレートのスクリーンショット

クラシック

サインアップサインインページにレンダリングされるクラシックテンプレートの例:

クラシックテンプレートのスクリーンショット

会社のブランド化

Microsoft Entra ID Company ブランドを使用して、バナーロゴ、背景画像、背景色を含む Azure AD B2C ページをカスタマイズできます。会社のブランドには、サインアップ、サインイン、プロファイル編集、パスワードのリセットが含まれます。

次の例は、Ocean Blue テンプレートを使用したカスタムロゴと背景画像を含む サインアップとサインイン ページを示しています。

Azure AD B2C によって提供されるブランド化されたサインアップ/サインインページ

ページテンプレートを選択する

Azure portal にサインインします。
複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
Azure portal で、 [Azure AD B2C] を検索して選択します。
ユーザーフローを選択します。
カスタマイズするユーザーフローを選択します。
左側のメニューの [ カスタマイズ ] で、[ ページレイアウト ] を選択し、[ テンプレート] を選択します。

テンプレートを選択すると、選択したテンプレートがユーザーフロー内のすべてのページに適用されます。各ページの URI は、[ カスタムページ URI ] フィールドに表示されます。

ページテンプレートを選択するには、LoadUriの要素を設定します。次の例は、コンテンツ定義識別子と対応する LoadUriを示しています。

オーシャンブルー:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/AzureBlue/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

スレートグレー:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/MSA/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/MSA/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/MSA/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/MSA/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/MSA/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

クラシック：

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/default/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/default/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/default/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

会社のブランドの構成

ユーザーフローページをカスタマイズするには、まず Microsoft Entra ID で会社のブランドを構成してから、Azure AD B2C のユーザーフローで有効にします。

まず、 会社のブランド内でバナーロゴ、背景画像、背景色を設定します。

Azure portal にサインインします。
複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
Azure portal で、 [Azure AD B2C] を検索して選択します。
[ 管理] で、[ 会社のブランド] を選択します。
「組織の Microsoft Entra サインインページにブランドを追加する」の手順に従います。

Azure AD B2C で会社のブランドを構成するときは、次の点に注意してください。

現在、Azure AD B2C での会社のブランド化は、 背景画像、 バナーロゴ、 背景色 のカスタマイズに限定されています。会社のブランド化ウィンドウのその他のプロパティ ( 詳細設定など) はサポートされていません。
ユーザーフローページでは、背景画像が読み込まれる前に背景色が表示されます。スムーズな読み込みエクスペリエンスのために、背景画像の色と密接に一致する背景色を選択することをお勧めします。
サインアップユーザーフローを開始すると、ユーザーに送信された確認メールにバナーロゴが表示されます。

ユーザーフローページで会社のブランド化を有効にする

会社のブランドを構成したら、ユーザーフローで有効にします。

Azure portal の左側のメニューで、 Azure AD B2C を選択します。
[ ポリシー] で、[ ユーザーフロー (ポリシー)] を選択します。
会社のブランド化を有効にするユーザーフローを選択します。会社のブランド化は、標準のサインインと標準プロファイル編集ユーザーフローの種類ではサポートされていません。
[ カスタマイズ] で、[ ページレイアウト] を選択し、ブランド化するページを選択します。たとえば、[ Unified sign up or sign in page]\(統合サインアップまたはサインインページ\) を選択します。
[ページレイアウトのバージョン (プレビュー)] で、バージョン 1.2.0 以降を選択します。
保存を選択します。

ユーザーフロー内のすべてのページをブランド化する場合は、ユーザーフロー内の各ページレイアウトのページレイアウトバージョンを設定します。

Azure portal での Azure AD B2C でのページレイアウトの選択。

カスタムポリシーページで会社のブランド化を有効にする

会社のブランドを構成したら、カスタムポリシーで有効にします。カスタムポリシー内のすべてのコンテンツ定義に対して、ページ contract バージョンを使用してページレイアウト バージョンを構成します。値の形式には、contract: urn:com:microsoft:aad:b2c:elements:contract:page-name:versionという単語が含まれている必要があります。古い DataUri 値を使用するカスタムポリシーでページレイアウトを指定するには。詳細については、ページバージョンを使用してページレイアウトに移行する方法について説明します。

次の例は、対応するページコントラクトと Ocean Blue ページテンプレートを含むコンテンツ定義を示しています。

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/AzureBlue/multifactor-1.0.0.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.0</DataUri>
  </ContentDefinition>
</ContentDefinitions>

ローカルアカウントフォームのサインアップページで入力フィールドを再配置するには、次の手順に従います。

Azure portal にサインインします。
複数のテナントにアクセスできる場合、上部のメニューの [設定] アイコンを選択し、[ディレクトリとサブスクリプション] メニューからお使いの Azure AD B2C テナントに切り替えます。
Azure portal で、 [Azure AD B2C] を検索して選択します。
左側のメニューで、[ ユーザーフロー] を選択します。
入力フィールドを再配置するユーザーフロー (ローカルアカウントのみ) を選択します。
左側のメニューで、[ページレイアウト] を選択します
テーブルで、[ ローカルアカウントのサインアップ] ページの行を選択します。
[ ユーザー属性] で、並べ替える入力フィールドを選択し、ドラッグ (上または下) して、[上へ移動 ] または [ 下へ移動 ] コントロールを使用して目的の順序を設定します。
ページの最上部で [保存] を選択します。

Azure portal の [ユーザーフロー] ページの [テンプレートの選択] ドロップダウン。

アプリケーションのユーザーインターフェイスをカスタマイズする方法の詳細については、「 Azure Active Directory B2C でアプリケーションのユーザーインターフェイスをカスタマイズする」を参照してください。

次の方法で共有

Azure Active Directory B2C でユーザー インターフェイスをカスタマイズする

[前提条件]

概要

オーシャン ブルー

スレートグレー

クラシック

会社のブランド化

ページ テンプレートを選択する

会社のブランドの構成

ユーザー フロー ページで会社のブランド化を有効にする

カスタム ポリシー ページで会社のブランド化を有効にする

サインアップ フォームで入力フィールドを再配置する

関連コンテンツ

フィードバック

その他のリソース

Azure Active Directory B2C でユーザーインターフェイスをカスタマイズする

オーシャンブルー

ページテンプレートを選択する

ユーザーフローページで会社のブランド化を有効にする

カスタムポリシーページで会社のブランド化を有効にする

サインアップフォームで入力フィールドを再配置する