Este tutorial irá guiá-lo através do processo de criação e implementação da sua própria interface de autenticação personalizada no Logto Cloud.
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.
Antes de começar, assegure-se de que possui o seguinte:
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.
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.
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/.
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.
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çãoPOST /api/experience/verification/password - Verifica o username e a passwordPOST /api/experience/identification - Identifica o utilizador para a interação atualPOST /api/experience/submit - Submete a interação de autenticaçãoConsulte os documentos da API do Logto Experience para mais detalhes.
http://localhost:9000/.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.
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! 🚀