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

Antes de começar _, use o seletor _ Escolher um tipo de política 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 dos usuários predefinidos ou 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 exibida pelo Azure AD B2C (Azure Active Directory B2C) aos clientes ajuda a fornecer uma experiência de usuário direta no aplicativo. As experiências incluem inscrição, conexão, edição de perfis e redefinição de senhas. Este artigo apresenta os métodos de personalização da IU (interface do usuário).

Dica

Para modificar apenas o logotipo da faixa, a imagem de plano de fundo e a cor de plano de fundo de suas páginas de fluxo de usuário, experimente o recurso de identidade visual da empresa.

Visão geral de HTML e CSS personalizados

O Azure AD B2C executa o código no navegador do cliente usando o CORS (Compartilhamento de Recursos entre Origens). No tempo de execução, o conteúdo é carregado a partir de uma URL especificada no fluxo de usuário ou na política personalizada. Cada página na experiência do usuário carrega o próprio conteúdo da URL especificada para ela. Após o carregamento do conteúdo a partir da URL, ele é mesclado com um fragmento de HTML inserido pelo Azure AD B2C e a página é exibida ao cliente.

Margem do conteúdo da página personalizada

Conteúdo da página HTML personalizada

Crie uma página HTML com sua própria identidade visual para fornecer o conteúdo de sua página personalizada. Ela pode ser uma página *.html estática ou uma página dinâmica, como .NET, Node.js ou PHP.

O conteúdo da página personalizada pode conter qualquer elemento HTML, incluindo CSS e JavaScript, mas não pode incluir elementos não seguros, como iframes. O único elemento necessário é um elemento div com id definido como api, como este <div id="api"></div> em sua página HTML.

<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

Personalizar as páginas padrão do Azure AD B2C

Em vez de criar completamente o conteúdo da página personalizada, você pode personalizar o conteúdo da página padrão do Azure AD B2C.

A tabela a seguir lista o conteúdo da página padrão fornecido pelo Azure AD B2C. Baixe os arquivos e use-os como um ponto de partida para criar suas próprias páginas personalizadas.

Página padrão Descrição ID de definição de conteúdo
(somente política personalizada)
exception.html Página de erro. Essa página é exibida quando uma exceção ou um erro é encontrado. api.error
selfasserted.html Página autodeclarada. Use o arquivo como um conteúdo de página personalizada para uma página de inscrição de conta social ou local, para uma página de logon de conta local, para a redefinição de senhas, entre outras opções. O formulário pode conter diferentes controles de entrada, por exemplo: caixa de entrada de texto, caixa de entrada de senha, botão de opção, caixas de lista suspensa de seleção única e caixas de seleção múltipla. api.localaccountsignin, api.localaccountsignup, api.localaccountpasswordreset e api.selfasserted
multifactor-1.0.0.html Página de autenticação multifator. Nesta página, os usuários podem verificar seus números de telefone (usando mensagem de texto ou por voz) durante a inscrição ou entrada. api.phonefactor
updateprofile.html Página de atualização de perfil. Esta página contém um formulário que os usuários podem acessar para atualizar o perfil. Esta página é semelhante à página de inscrição de conta social, exceto os campos de entrada de senha. api.selfasserted.profileupdate
unified.html Página de inscrição ou entrada unificada. Esta página manipula o processo de inscrição e de entrada. Os usuários podem usar provedores de identidade corporativa, provedores de identidade social, como Facebook e Google+ ou contas locais. api.signuporsignin

Hospedando o conteúdo da página

Ao usar os próprios arquivos HTML e CSS para personalizar a IU, hospede o conteúdo dela em qualquer ponto de extremidade HTTPS publicamente disponível que ofereça suporte ao CORS. Por exemplo, Armazenamento de Blobs do Azure, Serviços de Aplicativo do Azure, servidores Web, CDNs, AWS S3 ou sistemas de compartilhamento de arquivos.

Diretrizes de uso do conteúdo da página personalizada

  • Use uma URL absoluta ao incluir recursos externos, como mídia, CSS e arquivos JavaScript, em seu arquivo HTML.

  • Com o layout de página versão 1.2.0 e mais recente, você pode adicionar o atributo data-preload="true" em suas marcas HTML para controlar a ordem de carregamento para CSS e JavaScript. Com data-preload="true", a página é construída antes de ser exibida ao usuário. Esse atributo ajuda a impedir a "oscilação" da página ao pré-carregar o arquivo CSS sem exibir o HTML sem estilo ao usuário. O trecho de código HTML a seguir mostra o uso da marca data-preload.

    <link href="https://path-to-your-file/sample.css" rel="stylesheet" type="text/css" data-preload="true"/>
    
  • Recomenda-se começar tendo como base o conteúdo da página padrão.

  • Você pode incluir o JavaScript em seu conteúdo personalizado.

  • As versões de navegador compatíveis são:

    • Internet Explorer 11, 10 e Microsoft Edge
    • Compatibilidade limitada com Internet Explorer 9 e 8
    • Google Chrome 42.0 e superior
    • Mozilla Firefox 38.0 e superior
    • Safari para iOS e macOS, versão 12 e mais recente
  • Devido a restrições de segurança, o Azure AD B2C não dá suporte aos elementos HTML frame, iframe ou form.

Localizar o conteúdo

Você localiza seu conteúdo HTML habilitando a personalização de idioma em seu locatário do Azure AD B2C. Habilitar esse recurso permite que o Azure AD B2C defina o atributo de idioma da página HTML e passe o parâmetro ui_locales do OpenID Connect para o ponto de extremidade.

Abordagem de modelo único

Durante o carregamento da página, o Azure AD B2C define o atributo de idioma da página HTML com o idioma atual. Por exemplo, <html lang="en">. Para renderizar estilos diferentes de acordo com o idioma atual, use o seletor :lang CSS junto com a definição CSS.

O exemplo a seguir define estas classes:

  • imprint-en – usado quando o idioma atual é inglês.
  • imprint-de – usado quando o idioma atual é alemão.
  • imprint – classe padrão que é usada quando o idioma atual não é inglês nem alemão.
.imprint-en:lang(en),
.imprint-de:lang(de) {
    display: inherit !important;
}
.imprint {
    display: none;
}

Os seguintes elementos HTML serão mostrados ou ocultos de acordo com o idioma da página:

<a class="imprint imprint-en" href="Link EN">Imprint</a>
<a class="imprint imprint-de" href="Link DE">Impressum</a>

Abordagem de vários modelos

O recurso de personalização de idioma permite que o Azure AD B2C passe o parâmetro ui_locales do OpenID Connect para o ponto de extremidade. O servidor de conteúdo pode usar esse parâmetro para fornecer páginas HTML específicas a um idioma.

Observação

O Azure AD B2C não passa parâmetros do OpenID Connect, como ui_locales, para as páginas de exceção.

O conteúdo pode ser extraído de diferentes locais com base na localidade usada. No ponto de extremidade habilitado para CORS, você configura uma estrutura de pastas para hospedar conteúdo para idiomas específicos. Você chamará adequadamente se usar o valor curinga {Culture:RFC5646}.

Por exemplo, o URI de sua página personalizada pode ser semelhante ao seguinte:

https://contoso.blob.core.windows.net/{Culture:RFC5646}/myHTML/unified.html

Você pode carregar a página em francês efetuando o pull do conteúdo de:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Explicação do conteúdo da página personalizada

Veja a seguir uma visão geral do processo:

  1. Prepare um local para hospedar o conteúdo da página personalizada (um ponto de extremidade HTTPS acessível publicamente e habilitado para CORS).
  2. Baixe e personalize um arquivo de conteúdo de página padrão, por exemplo, unified.html.
  3. Publique o conteúdo de sua página personalizada no ponto de extremidade HTTPS disponível publicamente.
  4. Defina o CORS (compartilhamento de recurso entre origem) para seu aplicativo Web.
  5. Aponte a política para o URI do conteúdo de sua política personalizada.

Pré-requisitos

1. Criar o conteúdo em HTML

Crie o conteúdo de uma página personalizada com o nome da marca de seu produto no título.

  1. Copie o snippet de HTML a seguir. Ele é um HTML5 bem formado com um elemento vazio chamado <div id="api"></div> que está localizado nas marcas <body> . Esse elemento marca o local em que o conteúdo do Azure AD B2C será inserido.

    <!DOCTYPE html>
    <html>
    <head>
        <title>My Product Brand Name</title>
    </head>
    <body>
        <div id="api"></div>
    </body>
    </html>
    
  2. Colar o trecho copiado em um editor de texto

  3. Use CSS para definir o estilo para os elementos de interface do usuário inseridos pelo Azure AD B2C na página. O exemplo a seguir mostra um arquivo CSS simples que também inclui configurações para os elementos HTML injetados da inscrição:

    h1 {
      color: blue;
      text-align: center;
    }
    .intro h2 {
      text-align: center;
    }
    .entry {
      width: 400px ;
      margin-left: auto ;
      margin-right: auto ;
    }
    .divider h2 {
      text-align: center;
    }
    .create {
      width: 400px ;
      margin-left: auto ;
      margin-right: auto ;
    }
    
  4. Salve o arquivo como customize-ui.html.

Observação

Os elementos de formulário HTML são removidos devido a restrições de segurança ao usar login.microsoftonline.com. Para usar elementos de formulário HTML em seu conteúdo HTML personalizado, use b2clogin.com.

2. Criar uma conta de Armazenamento de Blobs do Azure

Neste artigo, usamos o Armazenamento de Blobs do Azure para hospedar nosso conteúdo. Você pode optar por hospedar seu conteúdo em um servidor Web, mas deve habilitar CORS em seu servidor Web.

Para hospedar seu conteúdo HTML no Armazenamento de Blobs, siga as seguintes etapas:

  1. Entre no portal do Azure.
  2. No menu Hub, selecione Novo > Armazenamento > Conta de armazenamento.
  3. Selecione uma Assinatura para a conta de armazenamento.
  4. Crie um Grupo de recursos ou selecione um existente.
  5. Insira um Nome exclusivo para sua conta de armazenamento.
  6. Selecione a Localização geográfica para sua conta de armazenamento.
  7. O Modelo de implantação pode permanecer Gerenciador de Recursos.
  8. O Desempenho pode permanecer Padrão.
  9. Altere Tipo de Conta para Armazenamento de blobs.
  10. A Replicação pode permanecer RA-GRS.
  11. A Camada de acesso pode permanecer Dinâmica.
  12. Selecione Analisar + Criar para criar a conta de armazenamento. Após a implantação, a folha Conta de armazenamento é aberta automaticamente.

2.1 Criar um contêiner

Para criar um contêiner público no Armazenamento de Blobs, faça o seguinte:

  1. Em Serviço de blobs no menu à esquerda, selecione Blobs.
  2. Selecione + Contêiner.
  3. Para Nome, insira raiz. Você pode escolher o nome, por exemplo, contoso, mas root é usado neste exemplo para fins de simplificação.
  4. Para Nível de acesso público, selecione Blob e OK.
  5. Selecione raiz para abrir o novo contêiner.

2.2 Carregue os arquivos de conteúdo de sua página personalizada

  1. Escolha Carregar.
  2. Clique no ícone de pasta ao lado de Selecionar um arquivo.
  3. Acesse e selecione customize-ui.html, criado anteriormente na seção Personalização da IU da página.
  4. Para carregar para uma subpasta, expanda Avançado e insira um nome de pasta em Carregar para pasta.
  5. Escolha Carregar.
  6. Selecione o blob customize-ui.html que você carregou.
  7. À direita da caixa de texto URL, selecione o ícone Copiar para área de transferência a fim de copiar a URL para a área de transferência.
  8. No navegador da Web, acesse a URL que você copiou para verificar se o blob carregado está acessível. Se ele não estiver, por exemplo, se você encontrar um erro ResourceNotFound, verifique se o tipo de acesso do contêiner está definido como blob.

3. Configurar o CORS

Configure o Armazenamento de Blobs para o CORS (Compartilhamento de Recursos entre Origens) fazendo o seguinte:

  1. No menu, selecione CORS.
  2. Para origens permitidas, insira https://your-tenant-name.b2clogin.com. Substitua your-tenant-name pelo nome de seu locatário do Azure AD B2C. Por exemplo, https://fabrikam.b2clogin.com. Use todas as letras minúsculas ao inserir o nome do locatário.
  3. Para métodos permitidos, selecione ambos GET e OPTIONS.
  4. Para cabeçalhos permitidos, digite um asterisco (*).
  5. Para cabeçalhos expostos, digite um asterisco (*).
  6. Para Idade máxima de, insira 200.
  7. Selecione Salvar.

3.1 Testar o CORS

Verifique se você está pronto seguindo as seguintes etapas:

  1. Repita a etapa de configuração do CORS. Para Origens permitidas, insira https://www.test-cors.org.
  2. Acesse www.test-cors.org
  3. Na caixa URL remota, cole a URL do arquivo HTML. Por exemplo, https://your-account.blob.core.windows.net/root/azure-ad-b2c/unified.html
  4. Selecione Enviar solicitação. O resultado deve ser XHR status: 200. Se você receber um erro, verifique se as Configurações do CORS estão corretas. Você também pode precisar limpar o cache do navegador ou abrir uma sessão de navegação particular pressionando Ctrl+Shift+P.

4. Atualizar o fluxo de usuário

  1. Escolha Todos os serviços no canto superior esquerdo do Portal do Azure, pesquise Azure AD B2C e selecione-o.
  2. Selecione Fluxos dos usuários e, em seguida, selecione o fluxo de usuário B2C_1_signupsignin1.
  3. Selecione Layouts da página e, em seguida, em Página de inscrição ou entrada unificada, clique em Sim para Usar o conteúdo da página personalizada.
  4. Em URI da página personalizada, insira o URI do arquivo custom-ui.html que você gravou anteriormente.
  5. Na parte superior da página, selecione Salvar.

5. Testar o fluxo de usuário

  1. No locatário do Azure AD B2C, selecione Fluxos do usuário e selecione o fluxo de usuário B2C_1_signupsignin1.
  2. Na parte superior da página, clique em Executar fluxo de usuário.
  3. Clique no botão Executar fluxo de usuário.

Você deverá ver uma página semelhante ao exemplo a seguir com os elementos centralizados com base no arquivo CSS que você criou:

Navegador da Web mostrando a página de inscrição ou de entrada com elementos personalizados da interface do usuário

4. Modificar o arquivo de extensões

Para configurar a personalização da IU, copie ContentDefinition e seus elementos filho do arquivo de base para o de extensões.

  1. Abra o arquivo base da sua política. Por exemplo, SocialAndLocalAccounts/TrustFrameworkBase.xml. O arquivo de base é um dos arquivos de política incluídos no pacote de início de política personalizada, que você obteve no pré-requisito Introdução às políticas personalizadas.

  2. Pesquise e copie todo o conteúdo do elemento ContentDefinitions.

  3. Abra o arquivo de extensão. Por exemplo, TrustFrameworkExtensions.xml. Pesquise o elemento BuildingBlocks. Se o elemento não existir, adicione-o.

  4. Cole todo o conteúdo do elemento ContentDefinitions que você copiou como filho do elemento BuildingBlocks.

  5. Pesquise o elemento ContentDefinition que contém Id="api.signuporsignin" no XML copiado.

  6. Altere o valor de LoadUri para a URL do arquivo HTML que você carregou no armazenamento. Por exemplo, https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html.

    Sua política personalizada deve ser semelhante ao seguinte trecho de código:

    <BuildingBlocks>
      <ContentDefinitions>
        <ContentDefinition Id="api.signuporsignin">
          <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</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>
        </ContentDefinition>
      </ContentDefinitions>
    </BuildingBlocks>
    
  7. Salve o arquivo de extensões.

5. Carregar e testar a política personalizada atualizada

5.1 Carregar a política personalizada

  1. Verifique se você está usando o diretório que contém seu locatário do Azure AD B2C. Selecione o ícone Diretórios + assinaturas na barra de ferramentas do portal.
  2. Na página Configurações do portal | Diretórios + assinaturas, encontre o diretório Azure Active Directory B2C na lista Nome do diretório e, em seguida, selecione Alternar.
  3. Pesquise e selecione Azure AD B2C.
  4. Em Políticas, selecione Identity Experience Framework.
  5. Selecione Carregar política personalizada.
  6. Carregue o arquivo de extensões que você alterou anteriormente.

5.2 Testar a política personalizada usando Executar agora

  1. Selecione a política que você carregou e, em seguida, selecione Executar agora.
  2. Você deverá conseguir se inscrever usando um endereço de email.

Configurar o URI de conteúdo da página personalizada dinâmica

Com as políticas personalizadas do Azure AD B2C, é possível enviar um parâmetro no caminho de URL ou em uma cadeia de caracteres de consulta. Passando o parâmetro para seu ponto de extremidade HTML, é possível alterar dinamicamente o conteúdo da página. Por exemplo, é possível alterar a imagem de tela de fundo na página de inscrição ou de entrada do Azure AD B2C, com base em um parâmetro passado do seu aplicativo Web ou móvel. O parâmetro pode ser qualquer resolvedor de declaração, como o ID do aplicativo, o ID do idioma ou o parâmetro da cadeia de caracteres de consulta personalizada, como campaignId.

Enviando os parâmetros de cadeia de caracteres de consulta

Para enviar os parâmetros de cadeia de caracteres de consulta, na política de terceira parte confiável, adicione um elemento ContentDefinitionParameters, conforme mostrado abaixo.

<RelyingParty>
    <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
    <UserJourneyBehaviors>
    <ContentDefinitionParameters>
        <Parameter Name="campaignId">{OAUTH-KV:campaignId}</Parameter>
        <Parameter Name="lang">{Culture:LanguageName}</Parameter>
        <Parameter Name="appId">{OIDC:ClientId}</Parameter>
    </ContentDefinitionParameters>
    </UserJourneyBehaviors>
    ...
</RelyingParty>

Na definição do conteúdo, altere o valor de LoadUri para https://<app_name>.azurewebsites.net/home/unified. Sua política personalizada ContentDefinition deve ser semelhante ao seguinte trecho de código:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://<app_name>.azurewebsites.net/home/unified</LoadUri>
  ...
</ContentDefinition>

Quando o Azure AD B2C carrega a página, uma chamada é feita para o ponto de extremidade do seu servidor Web:

https://<app_name>.azurewebsites.net/home/unified?campaignId=123&lang=fr&appId=f893d6d3-3b6d-480d-a330-1707bf80ebea

URI de conteúdo da página dinâmica

Você pode efetuar pull do conteúdo de diferentes locais com base nos parâmetros usados. No ponto de extremidade habilitado para CORS, configure uma estrutura de pastas para hospedar o conteúdo. Por exemplo, você pode organizar o conteúdo na estrutura a seguir. Pasta raiz/pasta por idioma/seus arquivos html. Por exemplo, o URI de sua página personalizada pode ser semelhante ao seguinte:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://contoso.blob.core.windows.net/{Culture:LanguageName}/myHTML/unified.html</LoadUri>
  ...
</ContentDefinition>

O Azure AD B2C envia o código ISO de duas letras para o idioma; fr para francês:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Modelos de exemplo

Encontre modelos de exemplo para personalização da interface do usuário aqui:

git clone https://github.com/azure-ad-b2c/html-templates

Esse projeto contém os seguintes modelos:

Para usar o exemplo:

  1. Clone o repositório em seu computador local. Escolha uma pasta de modelo /AzureBlue, /MSA ou /classic.

  2. Carregue todos os arquivos da pasta de modelo e da pasta /src para o Armazenamento de Blobs, conforme descrito nas seções anteriores.

  3. Em seguida, abra cada arquivo \*.html na pasta de modelo. Substitua todas as instâncias de URLs https://login.microsoftonline.com pela URL que você carregou na etapa 2. Por exemplo:

    De:

    https://login.microsoftonline.com/templates/src/fonts/segoeui.WOFF
    

    Para:

    https://your-storage-account.blob.core.windows.net/your-container/templates/src/fonts/segoeui.WOFF
    
  4. Salve os arquivos \*.html e carregue-os no Armazenamento de Blobs.

  5. Agora, modifique a política apontando para o arquivo HTML, conforme mencionado anteriormente.

  6. Se você vir fontes, imagens ou CSS ausentes, verifique suas referências na política de extensões e nos arquivos \*.html.

Usar ativos de identidade visual da empresa em um HTML personalizado

Para usar os ativos de identidade visual da empresa em um HTML personalizado, adicione as seguintes marcas fora da marca <div id="api">. A origem da imagem é substituída pela imagem de plano de fundo e pelo logotipo da faixa.

<img data-tenant-branding-background="true" />
<img data-tenant-branding-logo="true" alt="Company Logo" />

Próximas etapas

Saiba como habilitar o Código JavaScript do lado do cliente.