在 Azure Active Directory B2C 中自訂使用者介面

  • 發行項

開始之前，使用 [選擇原則類型] 選取器來選擇您要設定的原則類型。 Azure Active Directory B2C 提供兩種方法來定義使用者如何與您的應用程式互動：透過預先定義的使用者流程，或透過完全可設定的自訂原則。 此文章中所需的步驟隨各方法而異。

針對 Azure Active Directory B2C (Azure AD B2C) 要向客戶顯示的使用者介面設定商標並進行自訂，有助於在應用程式中提供順暢的使用者體驗。 這些體驗包括註冊、登入、設定檔編輯和密碼重設。 在此文章中，您會使用頁面範本和公司商標來自訂 Azure AD B2C 頁面。

提示

若要針對使用者流程頁面自訂頁面範本、橫幅標誌、背景影像或背景色彩之外的其他層面，請參閱如何使用 HTML 範本自訂 UI。

必要條件

概觀

Azure AD B2C 提供數個內建範本，讓您可從中選擇，以便為您的使用者體驗頁面提供專業的外觀。 這些頁面範本也可以做為您自己使用公司商標功能進行自訂的起點。

注意

支援傳統範本的瀏覽器包括目前版本和舊版的 Internet Explorer、Microsoft Edge、Google Chrome、Mozilla Firefox 和 Safari。 較舊的瀏覽器版本 (例如 Internet Explorer 11 和 10) 可能對海洋藍和岩灰範本的支援有限；建議使用您想要支援的瀏覽器來測試您的應用程式。

海洋藍

在註冊和登入頁面上呈現的[海藍] 範本範例：

海洋藍範本螢幕擷取畫面

岩灰

呈現在註冊登入頁面上的岩灰範本範例：

岩灰範本螢幕擷取畫面

傳統

呈現在註冊登入頁面上的傳統範本範例：

傳統範本螢幕擷取畫面

公司商標

您可以使用 Azure Active Directory 公司商標，自訂具有橫幅標誌、背景影像和背景色彩的 Azure AD B2C 頁面。 公司商標包括註冊、登入、設定檔編輯和密碼重設。

下列範例使用海洋藍範本來顯示具有自訂標誌、背景影像的「註冊和登入」頁面：

Azure AD B2C 所提供的品牌註冊/登入頁面

選取頁面範本

  1. 登入 Azure 入口網站。
  2. 確定您使用的目錄包含您的 Azure AD B2C 租用戶。 選取入口網站工具列中的目錄 + 訂閱圖示。
  3. 在 [入口網站設定] | [目錄 + 訂用帳戶] 頁面上，在 [目錄名稱] 清單中尋找您的 Azure AD B2C 目錄，然後選取 [切換]。
  4. 在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。
  5. 選取 [使用者流程]。
  6. 選取您要自訂的使用者流程。
  7. 在左側功能表的 [自訂] 底下，選取 [頁面配置]，然後選取 [範本]。 Azure 入口網站的使用者流程頁面中的範本選取項目下拉式清單

當您選擇範本時，會將選取的範本套用至您使用者流程中的所有頁面。 每個頁面的 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>

設定公司商標

若要自訂您的使用者流程頁面，請先在 Azure Active Directory 中設定公司商標，然後在 Azure AD B2C 的使用者流程中啟用它。

一開始先設定公司商標內的橫幅標誌、背景影像和背景色彩。

  1. 登入 Azure 入口網站。
  2. 確定您使用的目錄包含您的 Azure AD B2C 租用戶。 選取入口網站工具列中的目錄 + 訂閱圖示。
  3. 在 [入口網站設定] | [目錄 + 訂用帳戶] 頁面上，在 [目錄名稱] 清單中尋找您的 Azure AD B2C 目錄，然後選取 [切換]。
  4. 在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。
  5. 在 [管理] 底下，選取 [公司商標]。
  6. 遵循將商標新增至組織的 Azure Active Directory 登入頁面中的步驟。

當您在 Azure AD B2C 中設定公司商標時，請記住下列事項：

  • Azure AD B2C 中的公司商標目前僅限於背景影像、橫幅標誌和背景色彩自訂。 不支援公司商標窗格中的其他屬性，例如進 階設定。
  • 在您的使用者流程頁面中，背景色彩會在載入背景影像之前顯示。 建議您選擇與背景影像中的色彩非常相符的背景色彩，以提供更流暢的載入體驗。
  • 橫幅標誌會顯示在使用者起始註冊使用者流程時傳送給他們的驗證電子郵件中。

在使用者流程頁面中啟用公司商標

當您設定公司商標之後，請在使用者流程中啟用它。

  1. 在 Azure 入口網站的左側功能表中，選取 [Azure AD B2C]。
  2. 在 [原則] 底下，選取 [使用者流程 (原則)]。
  3. 選取您要啟用公司商標的使用者流程。 標準「登入」和標準「設定檔編輯」使用者流程類型不支援公司商標。
  4. 在 [自訂] 底下，選取 [頁面配置]，然後選取您想要設定商標的頁面。 例如，選取 [統一註冊或登入頁面]。
  5. 針對 [頁面配置版本 (預覽)]，選擇版本 1.2.0 或更新版本。
  6. 選取 [儲存]。

如果您想要在使用者流程中針對所有頁面設定商標，請在使用者流程中針對每個頁面配置設定頁面配置版本。

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>

重新排列註冊表單中的輸入欄位

若要重新排列本機帳戶表單註冊頁面上的輸入欄位，請遵循下列步驟：

  1. 登入 Azure 入口網站。
  2. 確定您使用的目錄包含您的 Azure AD B2C 租用戶。 選取入口網站工具列中的目錄 + 訂閱圖示。
  3. 在 [入口網站設定] | [目錄 + 訂用帳戶] 頁面上，在 [目錄名稱] 清單中尋找您的 Azure AD B2C 目錄，然後選取 [切換]。
  4. 在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。
  5. 在左側功能表中，選取 [使用者流程]。
  6. 針對本機帳戶選取使用者流程 (，只) 您想要重新排列其輸入欄位。
  7. 在左側功能表中，選取 [頁面配置]。
  8. 在表格中，選取 [本機帳戶註冊頁面] 列。
  9. 在 [使用者屬性] 底下，選取您想要重新排列的輸入欄位，然後將 (向上或向下拖曳) ，然後使用 [ 上 移] 或 [ 下移 ] 控制項來達到所需的順序。
  10. 在頁面上方選取 [儲存]。

Azure 入口網站的使用者流程頁面中的範本選取項目下拉式清單。

後續步驟

如需如何自訂應用程式使用者介面的詳細資訊，請參閱在 Azure Active Directory B2C 中自訂應用程式的使用者介面。