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.
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
Todo o projeto Logto é um monorepo pnpm. Se você quiser rodar o pacote experience isoladamente (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 dos 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.htmlno 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
Prossiga com cautela ao usar esse recurso em produção, pois ele afetará imediatamente a experiência de login dos seus usuários.
- Navegue até Console > Login & conta > Branding > Traga sua UI.
- Clique para selecionar ou arraste e solte o arquivo zip criado na etapa anterior, e o processo de upload começará automaticamente.
- Assim que o upload for concluído, salve as alterações e sua UI personalizada será disponibilizada imediatamente.
- 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.
Configure fontes CSP personalizadas
O Logto aplica um cabeçalho Content Security Policy (CSP) às páginas de UI personalizada. Se sua UI personalizada carrega scripts de terceiros ou se conecta a serviços externos, adicione as origens extras permitidas em Console > Login & conta > Branding > Traga sua UI.
Você pode configurar:
script-src: Permite origens de JavaScript module ou script, como provedores de CAPTCHA, analytics ou tag manager.connect-src: Permite endpoints de rede usados porfetch, XMLHttpRequest, EventSource e conexões WebSocket.
Exemplo:
{
"scriptSrc": ["https://scripts.example.com"],
"connectSrc": ["https://api.example.com", "wss://events.example.com"]
}
Use origins HTTPS para ambas as directives. connect-src também aceita origins wss:// para conexões WebSocket. O Logto adiciona essas fontes à política de segurança existente somente quando os ativos da UI personalizada estão ativos.
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, entre outras. Para entender melhor os fluxos de usuário e detalhes de implementação, recomendamos consultar 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, logotipo da empresa, favicon, política de senha, frases de idioma localizadas e até CSS personalizado, através do endpoint da Experience API de login.
Lide com CAPTCHA quando habilitado
A experiência de login incorporada do Logto lida com CAPTCHA automaticamente. Se seu tenant usar o recurso Traga sua UI e habilitar a proteção contra bots CAPTCHA, sua UI personalizada deve concluir a integração do CAPTCHA no frontend antes de chamar PUT /api/experience.
Envie o token do provedor retornado como captchaToken no corpo da requisição PUT /api/experience. Veja os guias específicos de cada provedor para mais detalhes:
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 Logto Experience project 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 trabalho de implantação automatizada.
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.
Recursos relacionados
RFCS: Experience API
Exemplos de ExperienceTraga sua própria UI de login para o Logto Cloud