Pular para o conteúdo principal

Traga sua própria UI

O Logto permite que você traga sua própria UI para substituir completamente a interface de experiência de login incorporada, além das opções de personalização de UI pré-construídas. Esse recurso permite que você faça upload de um arquivo zip contendo seus ativos de UI personalizados (HTML, CSS, JavaScript, imagens, etc.), hospede-os nos servidores do Logto Cloud e os utilize como a experiência de login para os usuários do seu tenant.

nota:

Esse recurso exige que sua UI personalizada seja compatível com Single Page Application (SPA), e é recomendado sempre usar uma build de produção para desempenho ideal.

Explore o recurso de UI personalizada no Logto Console​

Comece com o projeto oficial​

A maneira mais rápida de iniciar uma UI de login personalizada é clonar o projeto Logto experience. Esta é a UI de Experiência de Login incorporada do Logto, que cobre todos os recursos e as melhores práticas do Logto. Você pode personalizá-la conforme suas necessidades.

Após baixar o código, basta executar o seguinte comando para construir o projeto:

pnpm install && pnpm build
nota:

Todo o projeto Logto é um monorepo pnpm. Se você quiser executar o pacote experience de forma independente (sem pnpm), substitua as dependências workspace: no package.json por números de versão específicos (como ^1.0.0).

Após a conclusão da build, você encontrará todos os ativos compilados no diretório dist. Em seguida, crie um arquivo ZIP do diretório dist — esse arquivo será usado para upload no Logto Cloud posteriormente.

Requisitos para ativos de UI personalizada​

Antes de fazer upload dos seus ativos de UI personalizada, certifique-se de que eles atendam aos seguintes requisitos:

  • Os ativos enviados devem estar compactados em um único arquivo zip.
  • O arquivo zip deve conter um arquivo index.html no diretório raiz.
  • O arquivo zip não deve exceder 20MB de tamanho.
  • O arquivo zip não deve conter nenhum arquivo que exceda 10MB de tamanho.
  • O arquivo zip não deve conter mais de 200 arquivos no total.

Faça upload dos seus ativos de UI personalizada​

nota:

Tenha cautela ao usar esse recurso em produção, pois ele afetará imediatamente a experiência de login dos seus usuários.

  1. Navegue até Console > Login & conta > Branding > Traga sua UI.
  2. Clique para selecionar ou arraste e solte seu arquivo zip criado na etapa anterior, e o processo de upload começará automaticamente.
  3. Assim que o upload for concluído, salve as alterações e sua UI personalizada será disponibilizada imediatamente.
  4. A janela "Pré-visualização do login" será desabilitada quando você usar sua UI de login personalizada. No entanto, você ainda pode clicar no botão "Pré-visualização ao vivo" para testar sua página de login personalizada em uma nova aba do navegador.

Desenvolva sua UI personalizada​

Interaja com a Experience API​

Sua UI personalizada precisa interagir com a Experience API para realizar várias ações como login, cadastro, redefinição de senha, vinculação de contas sociais, habilitação de MFA e mais. Para entender melhor os fluxos de usuário e detalhes de implementação, recomendamos conferir nosso RFC de design da Experience API, que fornece especificações técnicas abrangentes e exemplos.

Você também precisará acessar outras configurações da Experiência de Login, como cores de branding, logo da empresa, favicon, política de senha, frases de idioma localizadas e até CSS personalizado, através do endpoint da Experience API de login.

Projetos de exemplo​

Disponibilizamos uma coleção de projetos de exemplo para ajudá-lo a entender e começar a implementar rapidamente uma UI personalizada. Confira o repositório do projeto Logto Experience no GitHub para mais detalhes.

Além disso, continuaremos trabalhando para fornecer mais projetos de exemplo simplificados e baseados em cenários para cobrir os casos de uso mais comuns. Fique atento às nossas próximas atualizações!

Desenvolvimento local e depuração​

Para desenvolvimento local e depuração, fornecemos a ferramenta Logto Tunnel CLI para:

  • Fazer proxy das requisições da Experience API da sua máquina local para o endpoint do Logto Cloud.
  • Testar sua implementação de UI personalizada localmente.

Isso permite que os usuários testem e depurem a UI personalizada localmente antes de fazer upload para o Logto Cloud.

Consulte Depure e teste sua UI personalizada localmente para mais detalhes.

Faça upload dos seus ativos de UI personalizada usando o CLI​

Além do upload pelo Console, você também pode usar o Logto CLI para enviar ativos de UI personalizada. Isso é especialmente útil para fluxos de implantação automatizados.

Consulte Faça upload de ativos de UI personalizada usando o CLI para mais detalhes.

Restaure para a experiência de login incorporada do Logto​

Se desejar restaurar a experiência de login incorporada do Logto, basta clicar no botão de exclusão no card Traga sua UI. Após salvar as alterações, a UI da experiência de login será revertida para o padrão do Logto.

RFCS: Experience API

 Exemplos de Experience

Traga sua própria UI de login para o Logto Cloud