自定义 Azure Active Directory B2C 中的用户界面

项目
02/07/2024

开始之前，请使用此页顶部的“选择策略类型”选择器来选择要设置的策略类型。 Azure Active Directory B2C 提供了两种定义用户如何与应用程序交互的方法：通过预定义的用户流，或者通过可完全配置的自定义策略。对于每种方法，本文中所需的步骤都不同。

对 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。 “海蓝”和“石板灰”模板对较旧的浏览器版本（例如 Internet Explorer 11 和 10）的支持可能有限；建议你使用你打算支持的浏览器测试应用程序。

海蓝

注册和登录页上呈现的“海蓝”模板的示例：

海蓝色模板屏幕截图

青灰

注册登录页面上呈现的“青灰”模板示例：

石板灰色模板屏幕截图

经典

注册登录页面上呈现的“经典”模板示例：

经典模板屏幕截图

公司品牌

可通过 Microsoft Entra ID 公司品牌功能，使用横幅徽标、背景图像和背景色自定义 Azure AD B2C 页面。公司品牌操作包括了注册、登录、配置文件编辑和密码重置这些页面。

以下示例演示了使用“海蓝”模板的“注册和登录”页面，其中包含了自定义徽标和背景图像：

Azure AD B2C 进行品牌化后的注册/登录页面

选择页面模板

登录 Azure 门户。
如果有权访问多个租户，请选择顶部菜单中的“设置”图标，从“目录 + 订阅”菜单中切换到你的 Azure AD B2C 租户。
在 Azure 门户中，搜索并选择“Azure AD B2C” 。
选择“用户流”。
选择要自定义的用户流。
在左侧菜单中的“自定义”下选择“页面布局”，然后选择“模板”。

选择模板后，所选的模板将应用到用户流中的所有页面。每个页面的 URI 显示在“自定义页面 URL”字段中。

若要选择页面模板，请设置内容定义的 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 门户。
如果有权访问多个租户，请选择顶部菜单中的“设置”图标，从“目录 + 订阅”菜单中切换到你的 Azure AD B2C 租户。
在 Azure 门户中，搜索并选择“Azure AD B2C”。
在“管理”下，选择“公司品牌”。
按照将品牌化功能添加到组织的 Microsoft Entra ID 登录页面中的步骤操作。

在 Azure AD B2C 中配置公司品牌时，请牢记以下事项：

Azure AD B2C 中的“公司品牌”目前仅限于“背景图像”、“横幅徽标”和“背景色”自定义。不支持“公司品牌”窗格中的其他属性（例如“高级设置”）。
在用户流页面中，加载背景图像之前显示背景色。建议选择与背景图像中的颜色最接近的背景色，以更流畅地进行加载。
当用户启动注册用户流时，向用户发送的验证电子邮件中会显示横幅徽标。

在用户流页面中启用“公司品牌”

配置“公司品牌”后，在用户流中启用它。

在 Azure 门户的左侧菜单中，选择“Azure AD B2C”。
在“策略”下，选择“用户流(策略)”。
选择需要启用“公司品牌”的用户流。标准“登录”和标准“配置文件编辑”用户流类型不支持“公司品牌”功能。
在“自定义”下，选择“页面布局”，然后选择你想要进行品牌化的页面。例如，选择“统一注册或登录”页。
对于页面布局版本（预览），选择版本 1.2.0或更高版本。
选择“保存”。

如果要对用户流中所有页面进行品牌化，请在用户流中为每个页面布局设置页面布局版本。

Azure 门户中的 Azure AD B2C 页面布局选择。

在自定义策略页面中启用公司品牌

配置“公司品牌”后，在自定义策略中启用它。为自定义策略中的所有内容定义配置页面布局版本和页面contract版本。值的格式必须包含单词 contract：urn:com:microsoft:aad:b2c:elements:contract:page-name:version。在使用旧 DataUri 值的自定义策略中指定页面布局。有关详细信息，请参阅如何根据页面版本迁移到页面布局。

以下示例显示了内容定义及其对应的页面合同和“海蓝”页面模板：

<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 门户。
如果有权访问多个租户，请选择顶部菜单中的“设置”图标，从“目录 + 订阅”菜单中切换到你的 Azure AD B2C 租户。
在 Azure 门户中，搜索并选择“Azure AD B2C”。
在左侧菜单中，选择“用户流”。
选择想对其输入字段重新排列的用户流（仅适用于本地帐户）。
在左侧菜单中，选择“页面布局”
在表单中，选择“本地帐户注册页”行。
在“用户属性”下，选择要重新排列的输入字段，然后（向上或向下）拖动，或使用“上移”或“下移”控件调整至目标顺序。
在页面顶部，选择“保存”。

Azure 门户中用户流页面内的模板选择下拉列表。

后续步骤

有关如何自定义应用程序用户界面的详细信息，请参阅在 Azure Active Directory B2C 中自定义应用程序的用户界面。