Traga a sua própria interface de autenticação para o Logto Cloud

Antecedentes#

O Logto oferece uma experiência de autenticação pronta a usar que abrange todas as funcionalidades do Logto, incluindo autenticação, registo, recuperação de senha, single sign-on (SSO), e mais. Os utilizadores podem também personalizar o aspeto e a sensação da interface de autenticação utilizando a nossa funcionalidade "Custom CSS".

No entanto, alguns utilizadores ainda querem personalizar profundamente a sua experiência de autenticação (tanto a interface como os fluxos de autenticação) para corresponder à sua marca e requisitos específicos de negócio. Ouvimos vocês! E estamos entusiasmados em anunciar que a funcionalidade "Traga a sua própria interface" está agora disponível no Logto Cloud.

Neste tutorial, iremos guiá-lo através dos passos para criar e implementar a sua própria interface de autenticação personalizada no Logto Cloud.

Pré-requisitos#

Antes de começar, assegure-se de que possui o seguinte:

• Uma conta Logto Cloud com um plano de subscrição
• Uma aplicação integrada com o Logto (Quick-starts)
• Logto tunnel CLI instalado
• Conhecimentos básicos de HTML, CSS e JavaScript

Para simplificar, iremos utilizar o método clássico "username & password" nos passos seguintes. Lembre-se de mudar o seu método de autenticação no Logto Console.

Crie a sua interface de autenticação personalizada#

O requisito mínimo para uma interface de autenticação é possuir um ficheiro index.html, com um formulário de autenticação que inclui pelo menos um campo de username, um campo de password e um botão de submissão. Usei o ChatGPT para gerar um exemplo de HTML, e aqui está esta adorável página de autenticação cor-de-rosa.

Omiti os estilos CSS para simplificar, e aqui está como o HTML simples parece:

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

Dado que 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 de autenticação do Logto integrada e com todas as funcionalidades, escrita em React e TypeScript.

Configuração do Logto tunnel CLI#

O Logto tunnel CLI é uma ferramenta que não só serve as suas páginas HTML, mas também permite-lhe interagir com a API do Logto Experience a partir das suas páginas HTML em ambiente de desenvolvimento local.

Supondo que a sua página index.html está localizada em /path/to/your/custom-ui, e o seu ID de inquilino Logto é foobar, pode executar o comando desta forma:

Ou, se estiver a utilizar um framework de interface que possui um servidor de desenvolvimento integrado, e a sua página está a ser servida em http://localhost:4000, 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/.

Acionar autenticação a partir da sua aplicação#

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

Vamos tomar o nosso projeto de exemplo em React como exemplo:

Clique no botão "Entrar" na sua aplicação. Em vez de ver a interface de autenticação interna do Logto, deverá agora ser redirecionado para a sua página de autenticação personalizada.

Interagir com a API do Logto Experience#

Nesta etapa, iremos interagir com a API do Logto Experience na sua interface personalizada. Primeiro, vamos criar um ficheiro script.js e adicionar a referência no seu index.html.

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

Este script completará o fluxo de autenticação com username e password com a ajuda destas APIs:

• PUT /api/experience - Inicia a interação de autenticação
• POST /api/experience/verification/password - Verifica o username e a password
• POST /api/experience/identification - Identifica o utilizador para a interação atual
• POST /api/experience/submit - Submete a interação de autenticação

Consulte os documentos da API do Logto Experience para mais detalhes.

Teste a sua página de autenticação personalizada#

1. Vá à sua aplicação e clique no botão "Entrar".
2. Deverá ser redirecionado para a sua página de autenticação personalizada em http://localhost:9000/.
3. Introduza o username e a password, e clique no botão "Submeter".
4. Se tudo estiver configurado corretamente, deverá ser redirecionado de volta para a sua aplicação, com as informações do utilizador autenticado.

Implemente a sua interface de autenticação personalizada no Logto Cloud#

Depois de terminar de desenvolver e testar a sua interface de autenticação personalizada localmente, pode implementá-la no Logto Cloud. Basta criar um ficheiro zip da sua pasta de UI personalizada e carregá-lo na secção "Custom UI" no seu Logto Console.

Após carregar, salve as alterações, e a sua interface de autenticação personalizada ficará disponível no seu inquilino Logto Cloud, substituindo a experiência de autenticação integrada do Logto.

Finalmente, volte à sua aplicação e altere o URI do endpoint de volta para o seu endpoint do Logto cloud: https://foobar.logto.app/. Desta vez, pode parar o serviço de túnel do Logto, e a sua aplicação deverá agora funcionar diretamente com a interface personalizada hospedada online.

Conclusão#

Neste tutorial, guiamos você através do processo de implementação e implantação da sua própria interface de autenticação personalizada no Logto Cloud.

Com esta funcionalidade, poderá agora personalizar profundamente a sua interface de autenticação e fluxos de autenticação para corresponder à sua marca e requisitos específicos de negócio.

Feliz codificação! 🚀