Azure Active Directory B2C 内のユーザー インターフェイスをカスタマイズするCustomize the user interface in Azure Active Directory B2C

"開始する前に" 、上記のセレクターを使用して、構成するポリシーの種類を選択してください。Before you begin, use the selector above to choose the type of policy you’re configuring. Azure AD B2C には、ユーザーがアプリケーションを操作する方法を定義する 2 つの方法 (定義済みのユーザー フローを使用する、または完全に構成可能なカスタム ポリシーを使用する) があります。Azure AD B2C offers two methods of defining how users interact with your applications: through predefined user flows, or through fully configurable custom policies. この記事で必要な手順は、方法ごとに異なります。The steps required in this article are different for each method.

Azure Active Directory B2C (Azure AD B2C) に表示されるユーザー インターフェイスを顧客に合わせてブランド化したりカスタマイズすることは、アプリケーション内でシームレスなユーザー エクスペリエンスを提供するのに役立ちます。Branding and customizing the user interface that Azure Active Directory B2C (Azure AD B2C) displays to your customers, helps provide a seamless user experience in your application. そのような操作性には、サインアップ、サインイン、プロファイル編集、パスワード リセットが含まれます。These experiences include signing up, signing in, profile editing, and password resetting. この記事では、ページ テンプレートを使用した Azure AD B2C ページと、会社のブランドをカスタマイズします。In this article, you customize your Azure AD B2C pages using page template, and company branding.

ヒント

ページ テンプレート、バナー ロゴ、背景画像、背景色以外のユーザー フロー ページのその他の側面をカスタマイズするには、「HTML テンプレートを使用して UI をカスタマイズする」方法をご覧ください。To customize other aspects of your user flow pages beyond the page template, banner logo, background image, or background color, see how to customize the UI with HTML template.

前提条件Prerequisites

概要Overview

Azure AD B2C にはいくつかの組み込みテンプレートが用意されています。これらを使用すると、ユーザー エクスペリエンスのページにプロフェッショナルな外観を提供できます。Azure AD B2C provide several built-in templates you can choose from to give your user experience pages a professional look. これらのページ テンプレートは、会社のブランド機能を使用して、独自のカスタマイズの開始点としても使用できます。These page templates can also and serve as starting point for your own customization, using the company branding feature.

オーシャン ブルーOcean Blue

サインアップ サインイン ページ上に表示される、オーシャン ブルー テンプレートの例:Example of the Ocean Blue template rendered on sign up sign in page:

オーシャン ブルー テンプレートのスクリーンショット

スレート グレーSlate Gray

サインアップ サインイン ページ上に表示される、スレート グレー テンプレートの例:Example of the Slate Gray template rendered on sign up sign in page:

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

クラシックClassic

サインアップ サインイン ページ上に表示される、クラシック テンプレートの例:Example of the Classic template rendered on sign up sign in page:

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

会社のブランドCompany branding

Azure Active Directory [会社のブランド] 機能を使用して、バナー ロゴ、背景画像、背景色で Azure AD B2C ページをカスタマイズできます。You can customize your Azure AD B2C pages with a banner logo, background image, and background color by using Azure Active Directory Company branding. 会社のブランドには、サインアップ、サインイン、プロファイル編集、パスワード リセットが含まれます。The company branding includes signing up, signing in, profile editing, and password resetting.

次の例に、オーシャン ブルー テンプレートを使用し、カスタム ロゴと背景画像を備えた サインアップとサインイン のページを示します。The following example shows a Sign up and sign in page with a custom logo, background image, using Ocean Blue template:

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

ページ テンプレートを選択するSelect a page template

  1. Azure portal にサインインします。Sign in to the Azure portal.
  2. ポータル ツール バーにある [ディレクトリ + サブスクリプション] アイコンを選択し、Azure AD B2C テナントを含むディレクトリを選択します。Select the Directory + Subscription icon in the portal toolbar, and then select the directory that contains your Azure AD B2C tenant.
  3. Azure portal で、 [Azure AD B2C] を検索して選択します。In the Azure portal, search for and select Azure AD B2C.
  4. [ユーザー フロー] を選択します。Select User flows.
  5. カスタマイズするユーザー フローを選択します。Select a user flow you want to customize.
  6. 左側のメニューの [カスタマイズ] で、 [ページ レイアウト] を選択し、 [テンプレート] を選択します。Under Customize in the left menu, select Page layouts and then select a Template. Azure portal のユーザー フロー ページのテンプレート選択ドロップダウンTemplate selection drop-down in user flow page of Azure portal

テンプレートを選択すると、選択したテンプレートがユーザー フロー内のすべてのページに適用されます。When you choose a template, the selected template is applied to all pages in your user flow. 各ページの URI は、 [カスタム ページ URI] フィールドに表示されます。The URI for each page is visible in the Custom page URI field.

ページ テンプレートを選択するには、コンテンツ定義LoadUri 要素を設定します。To select a page template, set the LoadUri element of the content definitions. 次の例は、コンテンツ定義識別子と、対応する LoadUri を示しています。The following example shows the content definition identifiers and the corresponding LoadUri.

オーシャン ブルー:Ocean Blue:

<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>

スレート グレー:Slate Gray:

<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>

クラシック:Classic:

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

会社のブランドの構成Configure company branding

ユーザー フロー ページをカスタマイズするには、まず Azure Active Directory で会社のブランドを構成し、次に Azure AD B2C のユーザー フローでこれを有効にします。To customize your user flow pages, you first configure company branding in Azure Active Directory, then you enable it in your user flows in Azure AD B2C.

まず、 [会社のブランド] でバナー ロゴ、背景画像、および背景色を設定します。Start by setting the banner logo, background image, and background color within Company branding.

  1. Azure portal にサインインします。Sign in to the Azure portal.
  2. 上部のメニューにある [ディレクトリ + サブスクリプション] フィルターを選択し、Azure AD B2C テナントを含むディレクトリを選択します。Select the Directory + subscription filter in the top menu, and then select the directory that contains your Azure AD B2C tenant.
  3. Azure portal で、 [Azure AD B2C] を検索して選択します。In the Azure portal, search for and select Azure AD B2C.
  4. [管理] から [会社のブランド] を選択します。Under Manage, select Company branding.
  5. 組織の Azure Active Directory のサインイン ページにブランドを追加する」の手順に従います。Follow the steps in Add branding to your organization's Azure Active Directory sign-in page.

Azure AD B2C で会社のブランドを構成する際は、次の点に注意してください。Keep these things in mind when you configure company branding in Azure AD B2C:

  • 現在、Azure AD B2C の会社のブランドは、背景画像バナー ロゴ背景色 のカスタマイズに制限されています。Company branding in Azure AD B2C is currently limited to background image, banner logo, and background color customization. [詳細設定] などの会社のブランド ペインのその他のプロパティは サポートされていませんThe other properties in the company branding pane, for example, Advanced settings, are not supported.
  • ユーザー フロー ページでは、背景画像が読み込まれる前に背景色が表示されます。In your user flow pages, the background color is shown before the background image is loaded. よりスムーズな読み込みエクスペリエンスのため、背景画像の色とほぼ同じ背景色を選択することをお勧めします。We recommended you choose a background color that closely matches the colors in your background image for a smoother loading experience.
  • バナー ロゴは、ユーザーがサインアップ ユーザー フローを開始するときに、ユーザーに送信された確認メールに表示されます。The banner logo appears in the verification emails sent to your users when they initiate a sign-up user flow.

ユーザー フロー ページでの会社のブランド化の有効化Enable company branding in user flow pages

会社のブランドを構成したら、それをユーザー フローで有効にします。Once you've configured company branding, enable it in your user flows.

  1. Azure portal の左側のメニューで、 [Azure AD B2C] を選択します。In the left menu of the Azure portal, select Azure AD B2C.
  2. [ポリシー][ユーザー フロー (ポリシー)] を選択します。Under Policies, select User flows (policies).
  3. 会社のブランド化を有効にするユーザー フローを選択します。Select the user flow for which you'd like to enable company branding. 会社のブランド化は、標準の "サインイン" および標準の "プロファイル編集" ユーザー フローの種類では サポートされていませんCompany branding is not supported for the standard Sign in and standard Profile editing user flow types.
  4. [カスタマイズ] で、 [ページ レイアウト] を選択して、ブランド化するページを選択します。Under Customize, select Page layouts, and then select the page you'd like to brand. たとえば、 [統合されたサインアップまたはサインイン ページ] を選択します。For example, select Unified sign up or sign in page.
  5. [ページ レイアウト バージョン (プレビュー)] では、バージョン 1.2.0 以上を選択します。For the Page Layout Version (Preview), choose version 1.2.0 or above.
  6. [保存] を選択します。Select Save.

ユーザー フローのすべてのページをブランド化する場合は、ユーザー フローのページ レイアウトごとにページ レイアウト バージョンを設定します。If you'd like to brand all pages in the user flow, set the page layout version for each page layout in the user flow.

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

会社のブランドを構成したら、それをカスタム ポリシーで有効にします。Once you've configured company branding, enable it in your custom policy. カスタム ポリシーのコンテンツ定義の "すべて" に対して、ページ contract バージョンを使用して ページ レイアウト バージョンを構成します。Configure the page layout version with page contract version for all of the content definitions in your custom policy. 値の形式には、次のように contract という語が含まれている必要があります: urn:com:microsoft:aad:b2c:elements:contract:page-name:versionThe format of the value must contain the word contract: urn:com:microsoft:aad:b2c:elements:contract:page-name:version. 古い DataUri 値を使用するカスタム ポリシーでページ レイアウトを指定するには、次の操作を行います。To specify a page layout in your custom policies that use an old DataUri value. 詳細については、ページ バージョンでページ レイアウトに移行する方法について説明します。For more information, learn how to migrate to page layout with page version.

次の例は、コンテンツ定義と、それに対応するページ コントラクト、および オーシャン ブルー ページ テンプレートを示しています。The following example shows the content definitions with their corresponding the page contract, and Ocean Blue page template:

<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>

次のステップNext steps

Azure Active Directory B2C でのアプリケーションのユーザー インターフェイスのカスタマイズに関する記事を参照して、アプリケーションのユーザー インターフェイスをカスタマイズする方法の詳細を確認します。Find more information about how you can customize the user interface of your applications in Customize the user interface of your application in Azure Active Directory B2C.