Definições de Conteúdo

Você pode personalizar a aparência de qualquer perfil técnico autodeclarado. O Azure AD B2C (Azure Active Directory B2C) executa o código no navegador do cliente e usa uma abordagem moderna chamada CORS (Compartilhamento de Recursos entre Origens).

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 de interface do usuário com o conteúdo HTML carregado da 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 um percurso 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 entrada ou inscrição, redefinição de senha ou 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. Esse elemento pode conter uma referência de recursos localizados ao 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>
  ...

Definição de conteúdo

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 de início de política personalizada 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 o 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 o 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 de 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.

Selecionar um layout de página

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

A parte da DataUri especifica o pacote de conteúdo que contém HTML, CSS e JavaScript para os elementos de 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 o JavaScript devem ser imutáveis. Se elas não forem imutáveis, qualquer alteração poderá causar um comportamento inesperado em suas páginas de usuário. 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 de layout de 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 o layout da 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 a seguir por uma versão da 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 mais recente da página:

<!-- 
<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 de metadados contém os seguintes elementos:

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

Chaves de metadados

A definição de conteúdo dá suporte aos 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 de 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 relacionada à definição de conteúdo. O elemento define o contexto que um modelo HTML5/CSS personalizado aplicará. A tabela a seguir descreve o conjunto de IDs de definição de conteúdo reconhecidos 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óximas etapas

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 aplicativo usando uma política personalizada