Compartilhar via


Personalizar a identidade visual neutra no seu locatário externo

Aplica-se a: Círculo branco com um símbolo X cinza.Locatários da força de trabalho Círculo verde com um símbolo de marca de seleção branca. Locatários externos (Saiba mais)

Depois de criar um novo locatário externo, você poderá personalizar a experiência do usuário final. Crie uma aparência personalizada para os usuários que entram em seus aplicativos, definindo as configurações da Identidade Visual da Empresa no seu locatário. Com essas configurações, você pode adicionar suas próprias imagens de tela de fundo, cores, logotipos da empresa e texto para personalizar as experiências de entrada nos seus aplicativos.
Você também pode criar fluxos de usuário programaticamente usando a API do Graph de Identidade Visual da Empresa.

Dica

Teste agora

Para experimentar esse recurso, vá para a demonstração do Woodgrove Groceries e inicie o caso de uso “Identidade visual da empresa”.

Pré-requisitos

  • Se você ainda não criou seu próprio locatário externo do Microsoft Entra, crie um agora.
  • Registre um aplicativo.
  • Criar um fluxo de usuário
  • Examine os requisitos de tamanho do arquivo para cada imagem que você deseja adicionar. Pode ser necessário usar um editor de fotos para criar as imagens do tamanho certo. O tipo de imagem preferencial é PNG, mas JPG é aceito.

Elementos de identidade visual

Por padrão, a Microsoft oferece uma identidade visual neutra para seu locatário, que pode ser personalizada para atender às exigências específicas de sua empresa. Essa identidade visual padrão não inclui nenhuma identidade visual pré-existente da Microsoft. Se a identidade visual personalizada da empresa não for carregada, a página de entrada alternará automaticamente para essa identidade visual neutra. Além disso, cada propriedade de identidade visual personalizada pode ser adicionada manualmente à página de entrada personalizada.

Você pode personalizar essa identidade visual neutra com uma imagem ou cor de fundo, favicon, layout, cabeçalho e rodapé personalizados. Você também pode personalizar o formulário de entrada e adicionar texto personalizado a diferentes instâncias ou fazer upload de um CSS personalizado. A imagem a seguir exibe a identidade visual padrão neutra do locatário. Você pode encontrar os elementos de identidade visual numerados e suas descrições correspondentes após a imagem.

Captura de tela da identidade visual neutra.

  1. Segundo plano neutro.
  2. Favicon.
  3. Logotipo do banner.
  4. Rodapé como um elemento de layout de página.
  5. Hiperlinks de rodapé, como Privacidade e cookies, Termos de uso.

Como personalizar a experiência de entrada padrão

Antes de personalizar as configurações, a identidade visual padrão neutra aparece nas páginas de entrada, inscrição e saída. Você pode personalizar essa experiência padrão com uma imagem de plano de fundo personalizada ou cor, favicon, layout, cabeçalho e rodapé. Você também pode carregar um CSS personalizado.

  1. Entre no centro de administração do Microsoft Entra como, no mínimo, um Administrador de Identidade Visual Organizacional.

  2. Se você tiver acesso a vários locatários, use o ícone Configurações no menu superior para alternar para o locatário externo que você criou anteriormente no menu Diretórios + assinaturas.

  3. Acesse Identidade visual da empresa usando a barra de pesquisa ou navegando até Página Inicial>Visão geral de locatário>Personalizar identidade visual.

    Captura de tela da opção de identidade visual da empresa.

  4. Na guia Credenciais padrão, selecione Editar.

    Captura de tela do botão Editar identidade visual da empresa.

Para personalizar a tela de fundo e o layout da página de entrada

  1. Na guia Básico, modifique qualquer um dos elementos da tela de fundo.

    • Favicon – O ícone exibido na guia do navegador da Web.

    • Imagem da tela de fundo – A imagem grande exibida na página de entrada. Se você carregar uma imagem, ela será dimensionada e recortada para preencher a janela do navegador.

    • Cor da tela de fundo da página – A cor que substitui a imagem da tela de fundo sempre que a imagem não pode ser carregada, por exemplo, devido à latência da conexão.

    Captura de tela da guia Básico de identidade visual da empresa.

  2. Selecione Avançar: Layout, se você quiser continuar personalizando, ou Examinar e salvar, se quiser salvar suas alterações.

  3. Na guia Layout, selecione o posicionamento dos elementos da página da Web na página de entrada.

    • Modelo – Escolha se a tela de fundo exibir a tela inteira ou tela parcial.

    • Cabeçalho – Mostre ou oculte o cabeçalho.

    • Rodapé – Mostre ou oculte o rodapé.

    • CSS personalizado – Carregue seu próprio arquivo CSS para substituir o estilo padrão da Microsoft pelo seu próprio estilo para: cor, fonte, tamanho do texto, posição dos elementos e telas para diferentes dispositivos e tamanhos de tela.

    Captura de tela da guia Layout de identidade visual da empresa.

  4. Selecione Avançar: Cabeçalho, se você quiser continuar personalizando, ou Examinar e salvar, se quiser salvar suas alterações.

  1. Na guia Cabeçalho, selecione o logotipo a ser exibido no cabeçalho da página de entrada.

    Captura de tela da guia Cabeçalho de identidade visual da empresa.

  2. Selecione Avançar: Rodapé, se você quiser continuar personalizando, ou Examinar e salvar, se quiser salvar suas alterações.

  3. Na guia Rodapé, você pode personalizar as URLs e vincular o texto para os hiperlinks de privacidade e termos de uso exibidos no rodapé da página de entrada.

    • Privacidade e Cookies: marque a caixa de seleção ao lado de Privacidade e Cookies para exibir esse hiperlink no rodapé. O link de privacidade padrão da Microsoft é exibido, a menos que você insira seu próprio texto e URL de exibição de hiperlink.

    • Termos de Uso – Marque a caixa de seleção ao lado de Termos de Uso para exibir esse hiperlink no rodapé. O link de termos de uso da Microsoft é exibido, a menos que você insira seu próprio texto e URL de exibição de hiperlink.

    Captura de tela da guia Rodapé de identidade visual da empresa.

  4. Selecione Avançar: Formulário de entrada, se você quiser continuar personalizando, ou Examinar e salvar, se quiser salvar suas alterações.

Para personalizar o formulário de entrada

  1. Na guia Formulário de entrada, configure os elementos do formulário de entrada:

    • Logotipo da faixa – Exibido na página de entrada e no painel de acesso do usuário.

    • Logotipo quadrado (tema claro) – Representa as contas de usuário na sua organização.

    • Logotipo quadrado (tema escuro) – Se o logotipo quadrado do tema claro for exibido incorretamente nas telas de fundo escuras, você poderá carregar um logotipo para ser usado em seu lugar quando as telas de fundo escuras forem usadas.

    Captura de tela da guia Formulário de entrada de identidade visual da empresa.

  2. Role até a metade inferior da página e configure mais elementos do formulário de entrada:

    • Texto de dica de nome de usuário – O texto de dica que é exibido no campo de entrada de nome de usuário na página de entrada (não é recomendável se usuários convidados entrarem no seu aplicativo).

    • Texto da página de entrada – Exibido na parte inferior das páginas de entrada e inscrição. Diretrizes:

      • Máximo de 1.024 caracteres
      • Não inclua informações confidenciais
      • Use essa sintaxe para formatar texto:
        • Hiperlink: [text](link)
        • Negrito: **text** or __text__
        • Itálico: *text* or _text_
        • Sublinhado: ++text++

Para personalizar a redefinição de senha self-service

  1. Role até a seção Redefinição de senha self-service para configurar opções para mostrar, ocultar ou personalizar o link de redefinição de senha self-service na página de entrada.

    • Mostrar redefinição de senha self-service – Marque esta caixa de seleção para exibir o link de senha self-service.
    • URL comum – Insira uma URL de redefinição de senha a ser usada no lugar do link padrão da Microsoft.
    • Texto de exibição da coleção de contas – insira o texto do link a ser exibido no lugar do texto padrão da Microsoft "Não consegue acessar a sua conta".
    • Texto de exibição da coleção de senhas – insira o texto do link a ser exibido no lugar do texto padrão da Microsoft "Esqueci a senha".

    Captura de tela da redefinição de senha self-service da identidade visual da empresa.

  2. Selecione Avançar: Texto se você quiser continuar personalizando ou Revisar + salvar se quiser salvar suas alterações.

Para personalizar os atributos de usuário

Para o seu locatário, você pode ter exigências diferentes quanto às informações que gostaria de coletar durante a inscrição e a entrada. O locatário vem com um conjunto interno de informações armazenadas em atributos, como Nome, Sobrenome, Cidade e Código postal. Você pode criar atributos personalizados em seu locatário utilizando a API do Microsoft Graph ou no portal na guia Texto em Identidade Visual da Empresa.

  1. Na guia Texto, selecione Adicionar Texto Personalizado.

  2. Selecione qualquer uma das opções:

    • Selecione Atributos para substituir os valores padrão.
    • Selecione Coleção de atributos para adicionar uma nova opção de atributo que você gostaria de coletar durante o processo de inscrição.
    • Selecione Entrar para adicionar um texto personalizado na página de entrada.
    • Selecione Inscrever-se para adicionar um texto personalizado na página de entrada.
    • Selecione SISU OTC (Entrar/inscrever-se com código único) para adicionar um título personalizado.

    Captura de tela da guia Texto de identidade visual da empresa.

  3. Selecione Avançar: Revise para examinar todas as suas modificações. Em seguida, selecione Salvar se você quiser salvar suas alterações ou Anterior se quiser continuar personalizando.

Importante

No locatário externo, temos duas opções para adicionar texto personalizado à experiência de inscrição e entrada. A função está disponível em cada fluxo de usuário durante a personalização do idioma e também em identidade visual da empresa. Embora tenhamos duas maneiras de personalizar as cadeias de caracteres (usando a Identidade Visual da Empresa e os Fluxos de Usuário), ambas modificam o mesmo arquivo JSON. A alteração mais recente feita por meio de fluxos de usuário ou por meio da Identidade Visual da Empresa sempre substituirá a anterior.

Personalizar a experiência de saída

Você não precisa personalizar a experiência de saída para o seu locatário externo. Se você tiver personalizado sua identidade visual para a experiência de entrada, a experiência de saída corresponderá automaticamente à experiência de entrada. Se você não tiver personalizado a experiência de entrada, a experiência de saída corresponderá à identidade visual neutra padrão em seu locatário externo.

Como personalizar o nome do locatário

Você pode personalizar o nome do locatário no Centro de administração do Microsoft Entra para substituir o logotipo da faixa da Microsoft na experiência de entrada padrão neutra. O novo nome do locatário também aparece no email de verificação enviado ao usuário.

Captura de tela do nome do locatário.

  1. Entre no centro de administração do Microsoft Entra como, no mínimo, um Administrador de Identidade Visual Organizacional.

  2. Se você tiver acesso a vários locatários, use o ícone Configurações no menu superior para alternar para o locatário externo que você criou anteriormente no menu Diretórios + assinaturas.

  3. Na barra de pesquisa, digite e selecione propriedades de locatário.

  4. Edite o campo Nome.

    Captura de tela da edição do nome do locatário.

  5. Selecione Salvar.

Personalize sua identidade visual com a API do Microsoft Graph

Você pode utilizar a API do Microsoft Graph para personalizar alguns itens de forma programática. Por exemplo, você pode usar a API para carregar uma imagem de plano de fundo personalizada, alterar a cor da página de entrada e adicionar um logotipo personalizado. Para obter mais informações, confira o artigo atualizar a identidade visual padrão.

Neste artigo, aprendemos como personalizar a aparência da experiência de entrada e inscrição do cliente. Para obter mais informações sobre a personalização do idioma do locatário, consulte o artigo Personalização do idioma. Para entender as diferenças na identidade visual dos locatários da força de trabalho, consulte o artigo Como personalizar a identidade visual de sua força de trabalho.