Webflow é uma plataforma SaaS para criação e hospedagem de sites, oferecendo um editor visual online que simplifica o processo de design, construção e lançamento de sites com pouco código.
Este artigo irá guiá-lo na integração do Logto com seus projetos Webflow, permitindo autenticação de usuários de forma contínua.
Navegue até o Console do Logto, crie um aplicativo utilizando o modelo “Vanilla JS” ou “Criar sem framework,” e selecione “Aplicação de página única” como o tipo de aplicação.
Neste passo, vamos adicionar código personalizado de nível global ao seu site. Como o Webflow é um site estático, usaremos o SDK @logto/browser (Vanilla JS) para autenticação de usuários. Como o NPM não pode ser utilizado, iremos importar nosso SDK via um serviço CDN como o jsdelivr.com.
No painel do Webflow, passe o mouse sobre o seu site recém-criado e clique no ícone de “Engrenagem” no canto superior direito.
Na página de configurações que se abrir, encontre “Código personalizado” no menu de navegação à esquerda e cole o seguinte código JavaScript na seção “Código do cabeçalho”. Você pode encontrar seu ID de aplicativo e URL de endpoint nos detalhes do aplicativo no Logto.
Vá para o Console do Logto, nas configurações do aplicativo, encontre o campo “URIs de redirecionamento”, e insira https://your-awesome-site.webflow.io/callback, depois clique em “Salvar alterações”.
Volte ao designer do Webflow e adicione um botão “Login” na página inicial. Para simplificar este tutorial, também atribuiremos um ID “sign-in” ao botão para referência posterior usando getElementById().
Agora vamos adicionar algum código personalizado no nível da página inicial. Clique no ícone de engrenagem no menu da página e encontre a seção de código personalizado na parte inferior. Cole o código abaixo para vincular o manipulador de clique para o botão de login.
Crie uma nova página “Callback” no Webflow e simplesmente coloque algum texto estático “Redirecionando…” nela. Vamos lidar com a lógica de retorno de login nesta página com o seguinte código personalizado.
Agora, você pode testar o fluxo de login implantando seu site Webflow. Após a implantação, o botão “Login” deve aparecer na sua página inicial. Clique nele para navegar até a página de login hospedada pelo Logto. Após o login, você será redirecionado primeiro para a página de “Callback”, onde você verá o texto “Redirecionando...”, e depois de volta para sua página inicial.
No Console do Logto, localize o campo “URIs de redirecionamento pós logout” nas configurações do aplicativo, e insira a URL do seu site Webflow https://your-awesome-site.webflow.io.
Volte ao designer do Webflow e adicione um botão “Logout” na sua página inicial. Da mesma forma, atribua um ID “sign-out” ao botão e adicione o seguinte código na “Código personalizado” da página.
No SDK do Logto, geralmente podemos usar o método logtoClient.isAuthenticated() para verificar o estado de autenticação; se o usuário estiver logado, o valor será true; caso contrário, será false.
No seu site Webflow, você também pode usá-lo para mostrar e esconder programaticamente os botões de login e logout. Aplique o seguinte código personalizado para ajustar o CSS do botão conforme necessário.
Buscar nome de usuário e exibir uma mensagem de boas-vindas#
Adicione um contêiner flex com o ID “container” na página inicial, e insira um elemento “Cabeçalho 1” dentro do contêiner com o ID “username”.
Automaticamente busque as informações do usuário após logar com sucesso, substitua o nome de usuário no elemento “Cabeçalho 1” e exiba o contêiner. Podemos fazer isso com o seguinte código personalizado.
Este tutorial guiou você na integração do Webflow com o Logto. Usando o SDK @logto/browser, você pode facilmente integrar a autenticação de usuário em qualquer um dos seus sites Webflow com apenas algumas etapas.
Por favor, consulte o guia completo de integração com Webflow no nosso site de documentação para mais detalhes, como buscar o token de acesso JWT e lidar com RBAC (Controle de acesso baseado em funções), etc.
