Personalizar a interface do usuário no Azure Active Directory B2C

Importante

A partir de 1º de maio de 2025, o Azure AD B2C não estará mais disponível para compra para novos clientes. Saiba mais em nossas perguntas frequentes.

Antes de começar, use o seletor Escolha um tipo de política na parte superior dessa página para escolher o tipo de política que você está configurando. O Azure Active Directory B2C oferece dois métodos para definir como os usuários interagem com seus aplicativos: por meio de fluxos de usuários predefinidos ou por meio de políticas personalizadas totalmente configuráveis. As etapas necessárias neste artigo são diferentes para cada método.

A identidade visual e a personalização da interface do usuário que o Azure Active Directory B2C (Azure AD B2C) exibe aos seus clientes ajudam a fornecer uma experiência de usuário perfeita em seu aplicativo. Essas experiências incluem inscrição, entrada, edição de perfil e redefinição de senha. Neste artigo, você personalizará suas páginas do Azure AD B2C usando o modelo de página e a identidade visual da empresa.

Dica

Para personalizar outros aspectos das páginas de fluxo do usuário além do modelo de página, do logotipo da faixa, da imagem de plano de fundo ou da cor da tela de fundo, veja como personalizar a interface do usuário com o modelo HTML.

Pré-requisitos

Criar um fluxo do usuário para que os usuários podem se registrar e entrar no seu aplicativo.
Registrar um aplicativo da web.

Conclua as etapas em Comece a usar políticas personalizadas no Active Directory B2C. Esse tutorial mostra como atualizar arquivos de política personalizados para usar sua configuração de locatário do Azure AD B2C.
Registrar um aplicativo da web.

Visão geral

O Azure AD B2C fornece vários modelos internos que você pode escolher para dar uma aparência profissional às páginas de experiência do usuário. Esses modelos de página também podem e servem como ponto de partida para sua própria personalização, usando o recurso de identidade visual da empresa .

Observação

Os navegadores com suporte para o modelo clássico incluem versões atuais e anteriores do Internet Explorer, Microsoft Edge, Google Chrome, Mozilla Firefox e Safari. Os modelos Ocean Blue e Slate Gray podem ter suporte limitado com versões mais antigas do navegador, como o Internet Explorer 11 e 10; recomendamos que você teste seu aplicativo com os navegadores aos quais pretende dar suporte.

Azul-oceano

Exemplo do modelo Ocean Blue renderizado na página de cadastro e login:

Captura de tela do modelo Ocean Blue

Cinza Azulado

Exemplo do modelo Slate Gray renderizado na página de inscrição:

Captura de tela do modelo Slate Gray

Clássico

Exemplo do modelo Classic renderizado na página de inscrição e login.

Captura de tela do modelo clássico

Identidade visual da empresa

Você pode personalizar suas páginas do Azure AD B2C com um banner, imagem de plano de fundo e cor de fundo usando a identidade visual da Empresa do Microsoft Entra ID. A identidade visual da empresa inclui inscrição, entrada, edição de perfil e redefinição de senha.

O exemplo a seguir mostra uma página de inscrição e entrada com um logotipo personalizado, uma imagem de plano de fundo, usando o modelo Ocean Blue:

Página de registro/login personalizada fornecida pelo Azure AD B2C

Selecionar um modelo de página

Entre no portal do Azure.
Se você tiver acesso a vários locatários, selecione o ícone Configurações no menu superior para alternar para seu locatário do Azure AD B2C no menu Diretórios + assinaturas.
No portal do Azure, pesquise e selecione Azure AD B2C.
Escolha Fluxos de usuário.
Selecione um fluxo de usuário que você deseja personalizar.
Em Personalizar no menu à esquerda, selecione Layouts de página e, em seguida, selecione um Modelo.

Quando você escolhe um modelo, o modelo selecionado é aplicado a todas as páginas em seu fluxo de usuário. O URI de cada página é visível no campo URI da página personalizada .

Para selecionar um modelo de página, defina o LoadUri elemento das definições de conteúdo. O exemplo a seguir mostra os identificadores de definição de conteúdo e os correspondentes LoadUri.

Azul-oceano:

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

Cinza-ardósia:

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

Clássico:

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

Configurar identidade visual da empresa

Para personalizar as páginas de fluxo do usuário, primeiro configure a identidade visual da empresa na ID do Microsoft Entra e habilite-a nos fluxos de usuário no Azure AD B2C.

Comece definindo o logotipo da faixa, a imagem de plano de fundo e a cor da tela de fundo dentro da identidade visual da Empresa.

Entre no portal do Azure.
Se você tiver acesso a vários locatários, selecione o ícone Configurações no menu superior para alternar para seu locatário do Azure AD B2C no menu Diretórios + assinaturas.
No portal do Azure, pesquise e selecione Azure AD B2C.
Em Gerenciar, selecione a identidade visual da empresa.
Siga as etapas em Adicionar identidade visual à página de entrada do Microsoft Entra da sua organização.

Tenha essas coisas em mente ao configurar a identidade visual da empresa no Azure AD B2C:

Atualmente, a identidade visual da empresa no Azure AD B2C está limitada à personalização da imagem de plano de fundo, do logotipo no banner e da cor do plano de fundo. As outras propriedades no painel de identidade visual da empresa, por exemplo, configurações avançadas, não têm suporte.
Nas páginas de fluxo do usuário, a cor da tela de fundo é mostrada antes do carregamento da imagem de plano de fundo. Recomendamos que você escolha uma cor de plano de fundo que corresponda de perto às cores da imagem de plano de fundo para uma experiência de carregamento mais suave.
O logotipo do banner aparece nos emails de verificação enviados aos usuários quando eles iniciam um fluxo de registro.

Habilitar a identidade visual da empresa em páginas de fluxo de usuário

Depois de configurar a identidade visual da empresa, habilite-a nos fluxos do usuário.

No menu à esquerda do portal do Azure, selecione Azure AD B2C.
Em Políticas, selecione Fluxos de usuários (políticas).
Selecione o fluxo de usuário para o qual você deseja habilitar a identidade visual da empresa. Não é oferecido suporte à identidade visual da empresa para os tipos padrão de fluxo de usuário Entrar e Edição de perfil.
Em Personalizar, selecione layout de página e, em seguida, escolha a página que você deseja personalizar. Por exemplo, selecione a página de cadastro unificado ou de acesso.
Para a versão layout da página (versão prévia), escolha a versão 1.2.0 ou superior.
Clique em Salvar.

Se você quiser marcar todas as páginas no fluxo do usuário, defina a versão de layout da página para cada layout de página no fluxo do usuário.

Seleção de layout de página no Azure AD B2C no portal do Azure.

Habilitar a identidade visual da empresa em páginas de política personalizadas

Depois de configurar a identidade visual da empresa, habilite-a em sua política personalizada. Configure a versão de layout de página com a versão de página contract para todas as definições de conteúdo em sua política personalizada. O formato do valor deve conter a palavra contract: urn:com:microsoft:aad:b2c:elements:contract:page-name:version. Para especificar um layout de página em suas políticas personalizadas que usam um valor DataUri antigo. Para obter mais informações, saiba como migrar para o layout de página com a versão da página.

O exemplo a seguir mostra as definições de conteúdo com o contrato de página correspondente e o modelo de página Ocean Blue :

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

Para reorganizar os campos de entrada na página de inscrição para o formulário de contas locais, siga estas etapas:

Entre no portal do Azure.
Se você tiver acesso a vários locatários, selecione o ícone Configurações no menu superior para alternar para seu locatário do Azure AD B2C no menu Diretórios + assinaturas.
No portal do Azure, pesquise e selecione Azure AD B2C.
No menu à esquerda, selecione Fluxos de usuário.
Selecione um fluxo de usuário (somente para contas locais) que você deseja reorganizar seus campos de entrada.
No menu à esquerda, selecione Layouts de página
Na tabela, selecione a linha Página de inscrição da conta local.
Em atributos de usuário, selecione o campo de entrada que você deseja reorganizar e arraste (para cima ou para baixo) e solte ou use os controles Mover para cima ou mover para baixo para obter a ordem desejada.
Na parte superior da página, selecione Salvar.

Lista de seleção de modelo na página de fluxo de usuário portal do Azure.

Encontre mais informações sobre como você pode personalizar a interface do usuário de seus aplicativos em Personalizar a interface do usuário do seu aplicativo no Azure Active Directory B2C.

Comentários

Esta página foi útil?

Last updated on 2025-05-02