Definições de Conteúdo

Você pode personalizar a aparência de qualquer perfil técnico autoafirmado. O Azure Ative Directory B2C (Azure AD B2C) executa código no navegador do cliente e usa uma abordagem moderna chamada CORS (Cross-Origin Resource Sharing).

Para personalizar a interface do usuário, especifique uma URL no elemento ContentDefinition com conteúdo HTML personalizado. No perfil técnico autodeclarado ou OrchestrationStep, você aponta para esse identificador de definição de conteúdo. A definição de conteúdo pode conter um elemento LocalizedResourcesReferences que especifica uma lista de recursos localizados a serem carregados. O Azure AD B2C mescla elementos da interface do usuário com o conteúdo HTML carregado da sua URL e, em seguida, exibe a página para o usuário.

O elemento ContentDefinitions contém URLs para modelos HTML5 que podem ser usados em uma jornada do usuário. O URI da página HTML5 é usado para uma etapa de interface do usuário especificada. Por exemplo, as páginas de início de sessão ou de inscrição, de reposição de palavra-passe ou de erro. Você pode modificar a aparência substituindo o LoadUri para o arquivo HTML5. Você pode criar novas definições de conteúdo de acordo com suas necessidades. Este elemento pode conter uma referência de recursos localizados, para o identificador de localização especificado no elemento Localization .

O exemplo a seguir mostra o identificador de definição de conteúdo e a definição de recursos localizados:

<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" />
    ...

Os metadados do perfil técnico autodeclarado LocalAccountSignUpWithLogonEmail contêm o identificador de definição de conteúdo ContentDefinitionReferenceId definido como api.localaccountsignup

<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

O elemento ContentDefinition contém o seguinte atributo:

O elemento ContentDefinition contém os seguintes elementos:

LoadUri

O elemento LoadUri é usado para especificar a URL da página HTML5 para a definição de conteúdo. Os pacotes iniciais de políticas personalizadas do Azure AD B2C vêm com definições de conteúdo que usam páginas HTML do Azure AD B2C. O LoadUri começa com ~, que é um caminho relativo para seu locatário do Azure AD B2C.

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
  ...
</ContentDefinition>

Você pode personalizar a interface do usuário com modelos HTML. Ao usar modelos HTML, forneça uma URL absoluta. O exemplo a seguir ilustra uma definição de conteúdo com modelo HTML:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>
  ...
</ContentDefinition>

DataUri

O elemento DataUri é usado para especificar o identificador de página. O Azure AD B2C usa o identificador de página para carregar e iniciar elementos da interface do usuário e JavaScript do lado do cliente. O formato do valor é urn:com:microsoft:aad:b2c:elements:page-name:version. A tabela a seguir lista os identificadores de página que você pode usar.

Selecione um layout de página

Você pode habilitar o código do lado do cliente JavaScript inserindo entre contract e o tipo de elements página. Por exemplo, urn:com:microsoft:aad:b2c:elements:contract:page-name:version.

A parte da versão do DataUri especifica o pacote de conteúdo que contém HTML, CSS e JavaScript para os elementos da interface do usuário em sua política. Se você pretende habilitar o código do lado do cliente JavaScript, os elementos nos quais você baseia seu JavaScript devem ser imutáveis. Se não forem imutáveis, quaisquer alterações podem causar um comportamento inesperado nas suas páginas de utilizador. Para evitar esses problemas, imponha o uso de um layout de página e especifique uma versão de layout de página. Isso garante que todas as definições de conteúdo nas quais você baseou seu JavaScript sejam imutáveis. Mesmo que você não pretenda habilitar o JavaScript, ainda precisará especificar a versão do layout da página para suas páginas.

O exemplo a seguir mostra o DataUri da selfasserted versão 1.2.0:

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

Migrando para layout de página

Para migrar do valor DataUri antigo (sem contrato de página) para a versão de layout de página, adicione a palavra contract seguida por uma versão de página. Use a tabela a seguir para migrar do valor DataUri antigo para a versão de layout de página.

O exemplo a seguir mostra os identificadores de definição de conteúdo e o DataUri correspondente com a versão de página mais recente:

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

Metadados

Um elemento Metadata contém os seguintes elementos:

O elemento Item do elemento Metadata contém os seguintes atributos:

Chaves de metadados

A definição de conteúdo suporta os seguintes itens de metadados:

LocalizedResourcesReferences

O elemento LocalizedResourcesReferences contém os seguintes elementos:

O elemento LocalizedResourcesReference contém os seguintes atributos:

O exemplo a seguir mostra uma definição de conteúdo de inscrição ou entrada com uma referência à localização para inglês, francês e espanhol:

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

Para saber como adicionar suporte à localização às suas definições de conteúdo, consulte Localização.

IDs de definição de conteúdo

O atributo ID do elemento ContentDefinition especifica o tipo de página relacionado à definição de conteúdo. O elemento define o contexto que um modelo HTML5/CSS personalizado vai aplicar. A tabela a seguir descreve o conjunto de IDs de definição de conteúdo reconhecido pelo Identity Experience Framework e os tipos de página relacionados a eles. Você pode criar suas próprias definições de conteúdo com uma ID arbitrária.

Próximos passos

Para obter um exemplo de personalização da interface do usuário usando definições de conteúdo, consulte:

Personalizar a interface do usuário do seu aplicativo usando uma política personalizada