ContentDefinitions

Pode personalizar o aspeto e a funcionalidade de qualquer perfil técnico auto-afirmado. O Azure Active Directory B2C (Azure AD B2C) executa código no browser do cliente e utiliza uma abordagem moderna denominada Partilha de Recursos Entre Origens (CORS).

Para personalizar a interface de utilizador, especifique um URL no elemento ContentDefinition com conteúdo HTML personalizado. No perfil técnico auto-afirmado ou OrchestrationStep, 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 carregar. Azure AD B2C intercala elementos da interface de utilizador com o conteúdo HTML que é carregado a partir do URL e, em seguida, apresenta a página ao utilizador.

O elemento ContentDefinitions contém URLs para modelos HTML5 que podem ser utilizados num percurso de utilizador. O URI da página HTML5 é utilizado para um passo de interface de utilizador especificado. Por exemplo, as páginas de início de sessão ou inscrição, reposição de palavra-passe ou erro. Pode modificar o aspeto e a funcionalidade ao substituir o LoadUri para o ficheiro HTML5. Pode criar novas definições de conteúdo de acordo com as suas necessidades. Este elemento pode conter uma referência de recursos localizados ao identificador de localização especificado no elemento Localização .

O exemplo seguinte 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 auto-afirmado 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 é utilizado para especificar o URL da página HTML5 para a definição de conteúdo. Os Azure AD pacotes de introdução de políticas personalizadas B2C são fornecidos com definições de conteúdo que utilizam Azure AD páginas HTML B2C. O LoadUri começa com ~, que é um caminho relativo para o seu inquilino Azure AD B2C.

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

Pode personalizar a interface de utilizador com modelos HTML. Ao utilizar modelos HTML, forneça um URL absoluto. O exemplo seguinte 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 é utilizado para especificar o identificador de página. Azure AD B2C utiliza o identificador de página para carregar e iniciar elementos da IU e JavaScript do lado do cliente. O formato do valor é urn:com:microsoft:aad:b2c:elements:page-name:version. A tabela seguinte lista os identificadores de página que pode utilizar.

Selecionar um esquema de página

Pode ativar o código do lado do cliente javaScript ao inserir contract entre elements e o tipo de 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údos que contém HTML, CSS e JavaScript para os elementos da interface de utilizador na sua política. Se pretender ativar o código do lado do cliente do JavaScript, os elementos em que baseou o JavaScript têm de ser imutáveis. Se não forem imutáveis, quaisquer alterações podem causar um comportamento inesperado nas páginas de utilizador. Para evitar estes problemas, aplique a utilização de um esquema de página e especifique uma versão de esquema de página. Ao fazê-lo, garante que todas as definições de conteúdo em que baseou o JavaScript são imutáveis. Mesmo que não pretenda ativar o JavaScript, ainda tem de especificar a versão do esquema de página para as suas páginas.

O exemplo seguinte 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> -->

Migrar para o esquema de página

Para migrar do valor DataUri antigo (sem contrato de página) para a versão do esquema de página, adicione a palavra contract seguido de uma versão de página. Utilize a tabela seguinte para migrar do valor DataUri antigo para a versão do esquema de página.

O exemplo seguinte 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 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 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 seguinte mostra uma definição de conteúdo de inscrição ou início de sessão 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 definições de conteúdo, veja Localização.

IDs de definição de conteúdo

O atributo ID do elemento ContentDefinition especifica o tipo de página relacionado com a definição de conteúdo. O elemento define o contexto que um modelo HTML5/CSS personalizado vai aplicar. A tabela seguinte descreve o conjunto de IDs de definição de conteúdo que é reconhecido pelo Identity Experience Framework e os tipos de página relacionados com os mesmos. Pode criar as suas próprias definições de conteúdo com um ID arbitrário.

Passos seguintes

Para obter um exemplo de personalização da interface de utilizador através de definições de conteúdo, consulte:

Personalizar a interface de utilizador da sua aplicação com uma política personalizada