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.
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.
Antes de começar, certifique-se de ter o seguinte:
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.
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.
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 loginPOST /api/experience/verification/password - Verificar o usuário e a senhaPOST /api/experience/identification - Identificar usuário para a interação atualPOST /api/experience/submit - Enviar a interação de loginConsulte a documentação da API de Experiência do Logto para mais detalhes.
http://localhost:9000/.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.
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! 🚀