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

Contexto#

O Logto fornece uma interface de usuário pronta para uso para a experiência de login que cobre todas as funcionalidades do Logto, incluindo login, registro, recuperação de senha, logon único (SSO), entre outros. Os usuários também podem personalizar a aparência da interface de usuário da experiência de login usando nosso recurso de "CSS Personalizado".

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

Neste tutorial, orientaremos você nas etapas para criar e implantar sua própria interface de login personalizada no Logto Cloud.

Pré-requisitos#

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

• Uma conta no Logto Cloud com um plano de assinatura
• Um aplicativo integrado ao Logto (Inícios rápidos)
• O CLI do Logto tunnel instalado
• Conhecimento básico de HTML, CSS e JavaScript

Para simplificar, usaremos o método clássico de login por "nome de usuário e senha" nas etapas a seguir. Lembre-se de alterar seu método de login no Console do 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 para nome de usuário, um campo para senha, e um botão de envio. Eu usei o ChatGPT para gerar um HTML de exemplo, e aqui está uma página de login rosa e charmosa.

Eu omiti os estilos CSS para simplificar, e aqui está como o HTML é simples:

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

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

Configuração do CLI do Logto tunnel#

O CLI do Logto tunnel é uma ferramenta que não só serve suas páginas HTML, mas também permite que você interaja com a API Experience do Logto a partir das 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 o ID do seu tenant Logto é foobar, você pode executar o comando desta forma:

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

Depois de executar o comando, o serviço de túnel será iniciado em sua máquina local http://localhost:9000/.

Iniciar login a partir do seu aplicativo#

Vá para o aplicativo que você criou anteriormente, e altere o endpoint do Logto de https://foobar.logto.app/ para http://localhost:9000/ na configuração do SDK do Logto.

Vamos tomar nosso projeto de exemplo em React como exemplo:

Clique no botão "Entrar" em seu aplicativo. Em vez de ver a interface de login do Logto embutida, você agora será redirecionado para sua página de login personalizada.

Interagir com a API Experience do Logto#

Neste passo, iremos interagir com a API Experience do Logto na sua interface personalizada. Primeiro, crie um arquivo script.js e adicione a referência no seu index.html.

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

Este script concluirá o fluxo de login por nome de usuário e senha com a ajuda dessas APIs:

• PUT /api/experience - Inicia a interação de login
• POST /api/experience/verification/password - Verifica o nome de usuário e senha
• POST /api/experience/identification - Identifica o usuário para a interação atual
• POST /api/experience/submit - Envia a interação de login

Consulte a documentação da API Experience do Logto para mais detalhes.

Teste sua página de login personalizada#

1. Vá para o seu aplicativo 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 senha, e clique no botão "Enviar".
4. Se tudo estiver configurado corretamente, você deve ser redirecionado novamente para o seu aplicativo, com as informações de usuário autenticado.

Implante 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 da pasta de sua interface de usuário personalizada e carregá-lo na seção "UI Personalizada" do seu Console do Logto.

Após o upload, salve as alterações, e sua interface de login personalizada estará ativa no seu tenant do Logto Cloud, substituindo a experiência de login embutida do Logto.

Finalmente, volte para o seu aplicativo e altere o URI do endpoint de volta para o endpoint cloud do Logto: https://foobar.logto.app/. Desta vez, você pode parar o serviço do túnel Logto, e seu aplicativo agora deve funcionar diretamente com a UI personalizada hospedada online.

Conclusão#

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

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

Feliz codificação! 🚀