Português (Brasil)

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

Este tutorial vai guiá-lo através do processo de criação e implantação da sua própria interface de login personalizada para o Logto Cloud.

Charles

Developer

8/23/2024

Pare de perder semanas com autenticação de usuários

Lance aplicativos seguros mais rapidamente com o Logto. Integre a autenticação de usuários em minutos e concentre-se no seu produto principal.

Começar

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.

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/.

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.

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

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! 🚀

Experimente o Logto Cloud gratuitamente

Contexto#

Pré-requisitos#

Crie sua interface de login personalizada#

Configurar o Logto tunnel CLI#

Disparar login a partir da sua aplicação#

Interagir com a API de Experiência do Logto#

Teste sua página de login personalizada#

Implemente sua interface de login personalizada no Logto Cloud#

Conclusão#

Contexto#

Pré-requisitos#

Crie sua interface de login personalizada#

Configurar o Logto tunnel CLI#

Disparar login a partir da sua aplicação#

Interagir com a API de Experiência do Logto#

Teste sua página de login personalizada#

Implemente sua interface de login personalizada no Logto Cloud#

Conclusão#

Contexto

Pré-requisitos

Crie sua interface de login personalizada

Configurar o Logto tunnel CLI

Disparar login a partir da sua aplicação

Interagir com a API de Experiência do Logto

Teste sua página de login personalizada

Implemente sua interface de login personalizada no Logto Cloud

Conclusão

Contexto

Pré-requisitos

Crie sua interface de login personalizada

Configurar o Logto tunnel CLI

Disparar login a partir da sua aplicação

Interagir com a API de Experiência do Logto

Teste sua página de login personalizada

Implemente sua interface de login personalizada no Logto Cloud

Conclusão