ContentDefinitions
注意
在 Azure Active Directory B2C 中，自訂原則的主要用途為處理複雜的案例。 在大部分情況下，我們建議使用內建的使用者流程。 如果您尚未這麼做，請於在 Active Directory B2C 中開始使用自訂原則中，了解自訂原則入門套件。
您可以自訂任何自我判斷技術設定檔的外觀與風格。 Azure Active Directory B2C (Azure AD B2C) 會在客戶的瀏覽器中執行程式碼，並使用稱為跨原始來源資源共用 (CORS) 的新式方法。
若要自訂使用者介面，請使用帶有自訂 HTML 內容的 ContentDefinition 元素，指定 URL。 在自我判斷技術設定檔或 OrchestrationStep 中，請指向該內容定義識別碼。 內容定義可能包含 LocalizedResourcesReferences 元素，該元素指定要載入之當地語系化資源的清單。 Azure AD B2C 會合併使用者介面元素與從您 URL 載入的 HTML 內容，然後對使用者顯示此頁面。
ContentDefinitions 元素包含了可在使用者旅程圖中使用之 HTML5 範本的 URL。 HTML5 頁面 URI 用於指定的使用者介面步驟。 例如，登入或註冊、密碼重設或錯誤網頁。 可以藉由覆寫該 HTML5 檔案的 LoadUri 來修改外觀與風格。 可以根據您的需求來建立新的內容定義。 此元素可能針對 Localization 元素中指定的當地語系化識別碼，包含當地語系化的資源參考。
下列範例顯示內容定義識別碼和當地語系化資源的定義：
<ContentDefinition Id="api.localaccountsignup">
<LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
<RecoveryUri>~/common/default_page_error.html</RecoveryUri>
<DataUri>urn:com:microsoft:aad:b2c:elements:selfasserted:1.1.0</DataUri>
<Metadata>
<Item Key="DisplayName">Local account sign up page</Item>
</Metadata>
<LocalizedResourcesReferences MergeBehavior="Prepend">
<LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.localaccountsignup.en" />
<LocalizedResourcesReference Language="es" LocalizedResourcesReferenceId="api.localaccountsignup.es" />
...
LocalAccountSignUpWithLogonEmail 自我判斷技術設定檔的中繼資料包含設為 api.localaccountsignup 的內容定義識別碼 ContentDefinitionReferenceId
<TechnicalProfile Id="LocalAccountSignUpWithLogonEmail">
<DisplayName>Email signup</DisplayName>
<Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.SelfAssertedAttributeProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
<Metadata>
<Item Key="ContentDefinitionReferenceId">api.localaccountsignup</Item>
...
</Metadata>
...
ContentDefinition
ContentDefinition 元素包含下列屬性：
| 屬性 | 必要 | 描述 |
|---|---|---|
| 識別碼 | Yes | 內容定義的識別碼。 此值是本頁面後面的內容定義識別碼區段中指定的值。 |
ContentDefinition 元素包含下列元素：
| 元素 | 發生次數 | Description |
|---|---|---|
| LoadUri | 1:1 | 此字串包含內容定義之 HTML5 頁面的 URL。 |
| RecoveryUri | 1:1 | 此字串包含 HTML 頁面的 URL，以顯示與內容定義相關的錯誤。 目前未使用，此值必須是 ~/common/default_page_error.html。 |
| DataUri | 1:1 | 此字串包含 HTML 檔案的相對 URL，該檔案為步驟提供了要叫用的使用者體驗。 |
| 中繼資料 | 0:1 | 包含內容定義使用之中繼資料的機碼值組的集合。 |
| LocalizedResourcesReferences | 0:1 | 當地語系化資源參考的集合。 使用此元素以自訂使用者介面的當地語系化與宣告屬性。 |
LoadUri
LoadUri 元素會用來指定內容定義之 HTML5 頁面的 URL。 Azure AD B2C 自訂原則入門套件 \(英文\) 隨附使用 Azure AD B2C HTML 頁面的內容定義。
LoadUri 會以 ~ 開頭，其為您 Azure AD B2C 租用戶的相對路徑。
<ContentDefinition Id="api.signuporsignin">
<LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
...
</ContentDefinition>
您可以使用 HTML 範本自訂使用者介面。 使用 HTML 範本時，請提供絕對 URL。 下列範例說明使用 HTML 範本的內容定義：
<ContentDefinition Id="api.signuporsignin">
<LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>
...
</ContentDefinition>
DataUri
DataUri 元素用於指定頁面識別碼。 Azure AD B2C 使用頁面識別碼以載入並初始化 UI 元素與用戶端 JavaScript。 值的格式為 urn:com:microsoft:aad:b2c:elements:page-name:version。 下表列出您可以使用的頁面識別碼。
| 頁面識別碼 | Description |
|---|---|
globalexception |
發生例外狀況或錯誤時，會顯示錯誤頁面。 |
providerselection, idpselection |
列出使用者可以在登入期間選擇的識別提供者。 |
unifiedssp |
顯示一份表單，可供以電子郵件地址或使用者名稱為基礎的本機帳戶進行登入。 此值也提供 [讓我保持登入功能] 和 [忘記密碼？] 連結。 |
unifiedssd |
顯示一份表單，可供以電子郵件地址或使用者名稱為基礎的本機帳戶進行登入。 此頁面識別碼已被取代。 請改為使用 unifiedssp 頁面識別碼。 |
multifactor |
在註冊或登入期間，藉由使用簡訊或語音，驗證電話號碼。 |
selfasserted |
顯示要從使用者收集資料的表單。 例如，讓使用者能夠建立或更新其設定檔。 |
選取頁面配置
您可以透過在 elements 和頁面類型之間插入 contract，來啟用 JavaScript 用戶端程式碼。 例如： urn:com:microsoft:aad:b2c:elements:contract:page-name:version 。
DataUri 的版本組件會針對原則中的使用者介面元素，指定包含 HTML、CSS 和 JavaScript 的內容套件。 如果您想要啟用 JavaScript 用戶端程式碼，則作為 JavaScript 基礎的元素必須是不可變的。 如果它們並非不可變，則任何變更可能都會在您的使用者頁面上造成非預期行為。 若要避免這些問題，請強制使用頁面配置，並指定頁面配置版本。 這麼做可確保以您的 JavaScript 為依據的所有內容定義都是不可變。 即使您不打算啟用 JavaScript，仍然需要指定頁面的頁面配置版本。
下列範例顯示 selfasserted 版本 1.2.0 的 DataUri：
<!--
<BuildingBlocks>
<ContentDefinitions>-->
<ContentDefinition Id="api.localaccountpasswordreset">
<LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
<RecoveryUri>~/common/default_page_error.html</RecoveryUri>
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
<Metadata>
<Item Key="DisplayName">Local account change password page</Item>
</Metadata>
</ContentDefinition>
<!--
</ContentDefinitions>
</BuildingBlocks> -->
移轉至頁面配置
若要從舊的 DataUri 值 (沒有頁面合約) 移轉至頁面配置版本，請在頁面版本後面加入文字 contract。 使用下表，從舊的 DataUri 值移轉至頁面配置版本。
| 舊的 DataUri 值 | 新的 DataUri 值 |
|---|---|
urn:com:microsoft:aad:b2c:elements:globalexception:1.0.0 |
urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.1 |
urn:com:microsoft:aad:b2c:elements:globalexception:1.1.0 |
urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.1 |
urn:com:microsoft:aad:b2c:elements:idpselection:1.0.0 |
urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.1 |
urn:com:microsoft:aad:b2c:elements:selfasserted:1.0.0 |
urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.7 |
urn:com:microsoft:aad:b2c:elements:selfasserted:1.1.0 |
urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.7 |
urn:com:microsoft:aad:b2c:elements:unifiedssd:1.0.0 |
urn:com:microsoft:aad:b2c:elements:contract:unifiedssd:1.2.1 |
urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0 |
urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.5 |
urn:com:microsoft:aad:b2c:elements:unifiedssp:1.1.0 |
urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.5 |
urn:com:microsoft:aad:b2c:elements:multifactor:1.0.0 |
urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.5 |
urn:com:microsoft:aad:b2c:elements:multifactor:1.1.0 |
urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.5 |
下列範例顯示內容定義識別碼和具有最新頁面版本的對應 DataUri：
<!--
<BuildingBlocks> -->
<ContentDefinitions>
<ContentDefinition Id="api.error">
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.1</DataUri>
</ContentDefinition>
<ContentDefinition Id="api.idpselections">
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.1</DataUri>
</ContentDefinition>
<ContentDefinition Id="api.idpselections.signup">
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.1</DataUri>
</ContentDefinition>
<ContentDefinition Id="api.signuporsignin">
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.7</DataUri>
</ContentDefinition>
<ContentDefinition Id="api.selfasserted">
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.14</DataUri>
</ContentDefinition>
<ContentDefinition Id="api.selfasserted.profileupdate">
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.14</DataUri>
</ContentDefinition>
<ContentDefinition Id="api.localaccountsignup">
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.14</DataUri>
</ContentDefinition>
<ContentDefinition Id="api.localaccountpasswordreset">
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.14</DataUri>
</ContentDefinition>
<ContentDefinition Id="api.phonefactor">
<RecoveryUri>~/common/default_page_error.html</RecoveryUri>
<DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.5</DataUri>
</ContentDefinition>
</ContentDefinitions>
<!--
</BuildingBlocks> -->
中繼資料
Metadata 元素包含下列元素：
| 元素 | 發生次數 | 描述 |
|---|---|---|
| Item | 0:n | 與內容定義相關的中繼資料。 |
Metadata 元素的 Item 元素包含下列屬性：
| 屬性 | 必要 | 描述 |
|---|---|---|
| Key | Yes | 中繼資料金鑰。 |
中繼資料金鑰
內容定義支援下列中繼資料項目：
| 答案 | 必要 | 描述 |
|---|---|---|
| DisplayName | No | 包含內容定義名稱的字串。 |
LocalizedResourcesReferences
LocalizedResourcesReferences 元素包含下列元素：
| 元素 | 發生次數 | Description |
|---|---|---|
| LocalizedResourcesReference | 1:n | 內容定義的當地語系化資源參考清單。 |
LocalizedResourcesReference 元素包含下列屬性：
| 屬性 | 必要 | 描述 |
|---|---|---|
| 語言 | Yes | 此字串針對每個 RFC 5646 - 標記的原則包含支援的語言，以進行識別語言。 |
| LocalizedResourcesReferenceId | Yes | LocalizedResources 元素的識別碼。 |
下列範例顯示的是註冊或登入內容定義，其參考英文、法文和西班牙文的當地語系化：
<ContentDefinition Id="api.signuporsignin">
<LoadUri>~/tenant/default/unified.cshtml</LoadUri>
<RecoveryUri>~/common/default_page_error.html</RecoveryUri>
<DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0</DataUri>
<Metadata>
<Item Key="DisplayName">Signin and Signup</Item>
</Metadata>
<LocalizedResourcesReferences MergeBehavior="Prepend">
<LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.signuporsignin.en" />
<LocalizedResourcesReference Language="fr" LocalizedResourcesReferenceId="api.signuporsignin.rf" />
<LocalizedResourcesReference Language="es" LocalizedResourcesReferenceId="api.signuporsignin.es" />
</LocalizedResourcesReferences>
</ContentDefinition>
若要了解如何將當地語系化支援新增至您的內容定義，請參閱當地語系化。
內容定義識別碼
ContentDefinition 元素的識別碼屬性會指定與內容定義相關的頁面類型。 此元素會定義自訂 HTML5/CSS 範本即將套用的內容。 下表說明身分識別體驗架構所能辨識之內容定義識別碼的集合，以及這些識別碼的相關頁面類型。 您可以使用任意識別碼建立自己的內容定義。
| 識別碼 | 預設範本 | Description |
|---|---|---|
| api.error | exception.cshtml | 錯誤頁面 - 發生例外狀況或錯誤時，會顯示錯誤頁面。 |
| api.idpselections | idpSelector.cshtml | 識別提供者選取頁面 - 列出使用者可以在登入期間選擇的識別提供者。 這些選項通常是企業識別提供者、社交識別提供者 (如 Facebook 和 Google+) 或本機帳戶。 |
| api.idpselections.signup | idpSelector.cshtml | 適用於註冊的識別提供者選取項目 - 列出使用者可以在註冊期間選擇的識別提供者。 這些選項通常是企業識別提供者、社交識別提供者 (如 Facebook 和 Google+) 或本機帳戶。 |
| api.localaccountpasswordreset | selfasserted.cshtml | 忘記密碼頁面 - 顯示一份表單，使用者必須填妥表單，然後才能開始密碼重設。 |
| api.localaccountsignin | selfasserted.cshtml | 本機帳戶登入頁面 - 顯示一份表單，可供以電子郵件地址或使用者名稱為基礎的本機帳戶進行登入。 此表單可以包含文字輸入方塊和密碼輸入方塊。 |
| api.localaccountsignup | selfasserted.cshtml | 本機帳戶註冊頁面 - 顯示一份表單，可供以電子郵件地址或使用者名稱為基礎的本機帳戶進行註冊。 此表單可以包含各種輸入控制項，例如文字輸入方塊、密碼輸入方塊、選項按鈕、單選下拉式清單方塊和多選核取方塊。 |
| api.phonefactor | multifactor-1.0.0.cshtml | 多重要素驗證頁面 - 在註冊或登入期間，藉由使用簡訊或語音，驗證電話號碼。 |
| api.selfasserted | selfasserted.cshtml | 社交帳戶註冊頁面 - 顯示一份表單，使用者在使用社交識別提供者的現有帳戶時，必須填妥此表單。 此頁面類似於上述的社交帳戶註冊頁面，但密碼輸入欄位除外。 |
| api.selfasserted.profileupdate | updateprofile.cshtml | 設定檔更新頁面 - 顯示一份表單，使用者可用來更新其設定檔。 此頁面類似於社交帳戶註冊頁面，但密碼輸入欄位除外。 |
| api.signuporsignin | unified.cshtml | 統一的註冊或登入頁面 - 處理使用者註冊或登入程序。 使用者可以使用企業識別提供者、社交識別提供者 (如 Facebook 或 Google+) 或本機帳戶。 |
後續步驟
如需使用內容定義自訂使用者介面的範例，請參閱：