Pular para o conteúdo principal

Traga sua própria UI

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

nota

Este recurso requer que sua UI personalizada seja compatível com Aplicações de Página Única (SPA), e é recomendado sempre usar uma versão 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 de experiência Logto. Esta é a UI de Experiência de Login embutida do Logto que cobre todos os recursos e as melhores práticas do Logto. Você pode personalizá-la para atender às suas necessidades.

Após verificar 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 de experiência de forma independente (sem pnpm), substitua workspace: dependências no package.json por números de versão específicos (como ^1.0.0).

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

Requisitos de ativos de UI personalizada​

Antes de fazer o upload de seus ativos de UI personalizados, certifique-se de que eles atendem aos seguintes requisitos:

  • Os ativos de upload devem ser empacotados como 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 o upload de seus ativos de UI personalizada​

nota

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

  1. Navegue até Console > Experiência de login > 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. Uma vez que o upload estiver completo, salve as alterações, e sua UI personalizada será servida imediatamente.
  4. A janela "Pré-visualização de login" será desativada 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 verificar nosso RFC de design da Experience API, que fornece especificações técnicas abrangentes e exemplos.

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

Projetos de exemplo​

Fornecemos uma coleção de projetos de exemplo para ajudá-lo a entender e começar a implementar rapidamente a UI personalizada. Por favor, confira o repositório GitHub Logto Experience project para 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 para nossas futuras atualizações!

Desenvolvimento local e depuração​

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

  • Proxiar solicitações da Experience API de 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 o upload para o Logto Cloud.

Por favor, consulte Depure e teste sua UI personalizada localmente para mais detalhes.

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

Além de fazer o upload através do Console, você também pode usar o Logto CLI para fazer o upload de ativos de UI personalizada. Isso é particularmente útil para fluxos de trabalho de implantação automatizados.

Por favor, consulte Faça o upload de ativos de UI personalizada usando CLI para mais detalhes.

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

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

Recursos relacionados​

RFCS: Experience API

 Exemplos de experiência

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