相关文章推荐
沉稳的鸡蛋  ·  Azure 高性能计算- HPC | ...·  23 小时前    · 
打酱油的稀饭  ·  人民日报：电商，到底该如何缴税？（热点聚焦）·  8 月前    · 
打酱油的稀饭  ·  B2B与B2C商业模式的不同策略和盈利能力| ...·  8 月前    · 
打酱油的稀饭  ·  最新研究称欧洲快递业务量增速高于收入增速B2 ...·  8 月前    · 
苦恼的椰子  ·  B2B跟B2C的不同- Enspyre 安石國際·  2 年前    · 
苦恼的椰子  ·  B2C模式难突围生鲜电商将成为巨头的战场-新华网·  2 年前    · 
小百科  ›  自訂使用者介面- Azure AD B2C | Microsoft Learn
B2C 公司 azure
苦恼的椰子
2 年前

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

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

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

  • 建立使用者流程 ，讓使用者能夠註冊並登入您的應用程式。
  • 註冊 Web 應用程式 。

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

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

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

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

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

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

    選取頁面範本

  • 登入 Azure 入口網站 。
  • 確定您使用的目錄包含您的 Azure AD B2C 租用戶。 選取入口網站工具列中的 目錄 + 訂閱 圖示。
  • 在 [入口網站設定] | [目錄 + 訂用帳戶] 頁面上，在 [目錄名稱] 清單中尋找您的 Azure AD B2C 目錄，然後選取 [切換]。
  • 在 Azure 入口網站中，搜尋並選取 [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>

    設定公司商標
    

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

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

  • 登入 Azure 入口網站。
    • 

  • 確定您使用的目錄包含您的 Azure AD B2C 租用戶。 選取入口網站工具列中的目錄 + 訂閱圖示。
    • 

  • 在 [入口網站設定] | [目錄 + 訂用帳戶] 頁面上，在 [目錄名稱] 清單中尋找您的 Azure AD B2C 目錄，然後選取 [切換]。
    • 

  • 在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。
    • 

  • 在 [管理] 底下，選取 [公司商標]。
    • 

  • 遵循將商標新增至組織的 Azure Active Directory 登入頁面中的步驟。
    • 

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

  • Azure AD B2C 中的公司商標目前僅限於背景影像、橫幅標誌和背景色彩自訂。 不支援公司商標窗格中的其他屬性，例如進 階設定。
    • 

  • 在您的使用者流程頁面中，背景色彩會在載入背景影像之前顯示。 建議您選擇與背景影像中的色彩非常相符的背景色彩，以提供更流暢的載入體驗。
    • 

  • 橫幅標誌會顯示在使用者起始註冊使用者流程時傳送給他們的驗證電子郵件中。
    • 

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

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

  • 在 Azure 入口網站的左側功能表中，選取 [Azure AD B2C]。
    • 

  • 在 [原則] 底下，選取 [使用者流程 (原則)]。
    • 

  • 選取您要啟用公司商標的使用者流程。 標準「登入」和標準「設定檔編輯」使用者流程類型不支援公司商標。
    • 

  • 在 [自訂] 底下，選取 [頁面配置]，然後選取您想要設定商標的頁面。 例如，選取 [統一註冊或登入頁面]。
    • 

  • 針對 [頁面配置版本 (預覽)]，選擇版本 1.2.0 或更新版本。
    • 

  • 選取 [儲存]。
    • 

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

    在自訂原則頁面中啟用公司商標
    

    當您設定公司商標之後，請在自訂原則中啟用它。 針對您自訂原則中的「所有」內容定義，使用頁面 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 AD B2C 目錄，然後選取 [切換]。
    • 

  • 在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。
    • 

  • 在左側功能表中，選取 [使用者流程]。
    • 

  • 針對本機帳戶選取使用者流程 (，只) 您想要重新排列其輸入欄位。
    • 

  • 在左側功能表中，選取 [頁面配置]。
    • 

  • 在表格中，選取 [本機帳戶註冊頁面] 列。
    • 

  • 在 [使用者屬性] 底下，選取您想要重新排列的輸入欄位，然後將 (向上或向下拖曳) ，然後使用 [ 上 移] 或 [ 下移 ] 控制項來達到所需的順序。
    • 

  • 在頁面上方選取 [儲存]。
    •
    •  
    推荐文章
    沉稳的鸡蛋  ·  Azure 高性能计算- HPC | Microsoft Azure
    23 小时前
    打酱油的稀饭  ·  人民日报：电商，到底该如何缴税？（热点聚焦）
    8 月前
    打酱油的稀饭  ·  B2B与B2C商业模式的不同策略和盈利能力| 人人都是产品经理
    8 月前
    打酱油的稀饭  ·  最新研究称欧洲快递业务量增速高于收入增速B2C业务量超过B2B ...
    8 月前
    苦恼的椰子  ·  B2B跟B2C的不同- Enspyre 安石國際
    2 年前
    苦恼的椰子  ·  B2C模式难突围生鲜电商将成为巨头的战场-新华网
    2 年前
    Link管理   ·   Sov5搜索   ·   小百科
    小百科 - 百科知识指南