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

Contexto#

O Logto fornece uma experiência de login pronta para uso que cobre todos os recursos do Logto, incluindo login, registro, recuperação de senha, single sign-on (SSO), e mais. Os usuários também podem personalizar a aparência e a sensação da experiência de login usando nosso recurso de "CSS Customizado".

No entanto, alguns usuários ainda desejam personalizar profundamente a experiência de login (tanto a interface quanto os fluxos de autenticação) para corresponder à sua marca e requisitos de negócios específicos. Nós ouvimos vocês! E estamos animados em anunciar que o recurso "Traga sua própria interface" já está disponível no Logto Cloud.

Neste tutorial, vamos guiá-lo pelos passos para criar e implantar sua própria interface de login personalizada para o Logto Cloud.

Pré-requisitos#

Antes de começar, certifique-se de ter o seguinte:

• Uma conta no Logto Cloud com um plano de assinatura
• Uma aplicação integrada com o Logto (Inícios Rápidos)
• Logto tunnel CLI instalado
• Conhecimento básico de HTML, CSS e JavaScript

Para simplificar, usaremos o método clássico de login "usuário & senha" nos próximos passos. Lembre-se de mudar o seu método de login no Console Logto.

Crie sua interface de login personalizada#

O requisito mínimo para uma interface de login é ter um arquivo index.html, com um formulário de login que inclua pelo menos um campo de usuário, um campo de senha e um botão de envio. Usei o ChatGPT para gerar um HTML de amostra, e aqui cheguei a esta página de login rosa encantadora.

Omiti os estilos CSS por simplicidade, e é assim que o HTML simples se parece:

Você também pode começar com um modelo do seu framework favorito de front-end, como Create React App, Next.js, ou Vue CLI.

Como o Logto é de código aberto, outra recomendação é clonar o projeto Logto Experience, e modificar o código para atender às suas necessidades. Esta é a interface completa de login do Logto, escrita em React e TypeScript.

Configurar o Logto tunnel CLI#

O Logto tunnel CLI é uma ferramenta que não só serve suas páginas HTML, mas também permite que você interaja com a API de Experiência do Logto a partir de suas páginas HTML no ambiente de desenvolvimento local.

Assumindo que sua página index.html está localizada em /path/to/your/custom-ui, e seu ID de locatário do Logto é foobar, você pode executar o comando desta forma:

Ou, se você estiver usando um framework de interface que tenha um servidor de desenvolvimento embutido, e sua página estiver sendo servida em http://localhost:4000, você pode executar o comando assim:

Após executar o comando, o serviço de túnel será iniciado na sua máquina local http://localhost:9000/.

Disparar login a partir da sua aplicação#

Vá para a aplicação que você criou anteriormente e mude o endpoint do Logto de https://foobar.logto.app/ para http://localhost:9000/ nas configurações do seu SDK Logto.

Vamos usar nosso projeto de exemplo em React como exemplo:

Clique no botão "Entrar" em sua aplicação. Em vez de ver a interface de login do Logto, você agora deve ser redirecionado para sua própria página de login.

Interagir com a API de Experiência do Logto#

Neste passo, iremos interagir com a API de Experiência do Logto na sua interface personalizada. Primeiro, vamos criar um arquivo script.js e adicionar a referência no seu index.html.

Coloque o seguinte código no seu arquivo script.js.

Este script completará o fluxo de login com usuário e senha com a ajuda destas APIs:

• PUT /api/experience - Iniciar a interação de login
• POST /api/experience/verification/password - Verificar o usuário e a senha
• POST /api/experience/identification - Identificar usuário para a interação atual
• POST /api/experience/submit - Enviar a interação de login

Consulte a documentação da API de Experiência do Logto para mais detalhes.

Teste sua página de login personalizada#

1. Vá para sua aplicação e clique no botão "Entrar".
2. Você deve ser redirecionado para sua página de login personalizada em http://localhost:9000/.
3. Insira o nome de usuário e a senha, e clique no botão "Enviar".
4. Se tudo estiver configurado corretamente, você deve ser redirecionado de volta para sua aplicação, com as informações do usuário autenticado.

Implemente sua interface de login personalizada no Logto Cloud#

Depois de terminar de desenvolver e testar sua interface de login personalizada localmente, você pode implantá-la no Logto Cloud. Basta criar um arquivo zip de sua pasta de interface personalizada e carregá-lo na seção "Interface Personalizada" no Console Logto.

Depois de carregar, salve as alterações, e sua interface de login personalizada estará ativa no seu locatário do Logto Cloud, substituindo a experiência de login interna do Logto.

Finalmente, volte para sua aplicação e mude o URI do endpoint de volta para o endpoint do Logto Cloud: https://foobar.logto.app/. Desta vez, você pode parar o serviço de túnel Logto, e sua aplicação agora deve funcionar diretamente com a interface personalizada hospedada online.

Conclusão#

Neste tutorial, mostramos o processo de implementação e implantação de sua própria interface de login personalizada para o Logto Cloud.

Com este recurso, você pode agora personalizar profundamente sua interface de login e fluxos de autenticação para corresponder à sua marca e requisitos de negócios específicos.

Feliz codificação! 🚀