Webflow é uma plataforma SaaS para construção e hospedagem de sites, oferecendo um editor visual online que simplifica o processo de desenhar, construir e lançar sites com código mínimo.
Este artigo irá guiar-te na integração do Logto com os teus projetos Webflow, permitindo a autenticação de utilizadores de forma fluida.
Navega até ao Logto Console, cria uma aplicação utilizando o template “Vanilla JS” ou “Create without framework” e seleciona “Single page application” como o tipo de aplicação.
Neste passo, vamos adicionar código personalizado a nível global no teu site. Como o Webflow é um site estático, vamos utilizar o SDK @logto/browser (Vanilla JS) para autenticação do utilizador. Como não é possível utilizar o NPM, vamos importar o nosso SDK via um serviço CDN como jsdelivr.com.
No dashboard do Webflow, paira sobre o teu site recém-criado e clica no ícone “Engrenagem” no canto superior direito.
Na página de configurações que se abre, encontra “Custom code” no menu de navegação à esquerda e cola o seguinte código JavaScript na secção “Head code”. Podes encontrar o teu app ID e URL do endpoint nos detalhes da aplicação Logto.
Vai ao Logto Console, nas configurações da aplicação, encontra o campo “Redirect URIs” e introduz https://teu-site-incrível.webflow.io/callback, depois clica em “Save changes”.
Volta ao designer do Webflow e adiciona um botão “Sign in” na página inicial. Para simplificar este tutorial, vamos também atribuir o ID “sign-in” ao botão para referência futura utilizando getElementById().
Agora vamos adicionar algum código personalizado ao nível da página inicial. Clica no ícone de engrenagem no menu da página e encontra a secção de código personalizado na parte inferior. Cola o código abaixo para associar o handler de clique ao botão de início de sessão.
Cria uma nova página “Callback” no Webflow e simplesmente coloca algum texto estático “A redirecionar...” nela. Vamos tratar da lógica de callback do início de sessão nesta página com o seguinte código personalizado.
Agora, podes testar o fluxo de início de sessão ao publicar o teu site Webflow. Depois de publicado, o botão “Sign in” deve aparecer na tua página inicial. Clica nele para navegar até à página de início de sessão hospedada pelo Logto. Após iniciar sessão, serás redirecionado primeiro para a página “Callback”, onde poderás ver o texto “A redirecionar...”, e depois de volta para a tua página inicial.
No Logto Console, localiza a seção “Post logout redirect URIs” nas configurações da aplicação e introduz o URL do teu site Webflow https://teu-site-incrível.webflow.io.
Volta ao designer do Webflow e adiciona um botão “Sign out” na tua página inicial. De maneira semelhante, atribui o ID “sign-out” ao botão e adiciona o seguinte código na “Custom code” ao nível da página.
No SDK Logto, geralmente podemos usar o método logtoClient.isAuthenticated() para verificar o estado de autenticação; se o utilizador estiver autenticado, o valor será true; caso contrário, será false.
No teu site Webflow, também podes utilizá-lo para mostrar e ocultar programaticamente os botões de início e término de sessão. Aplica o seguinte código personalizado para ajustar o CSS dos botões conforme necessário.
Buscar o nome de utilizador e exibir uma mensagem de boas-vindas#
Adiciona um contêiner flexível com o ID “container” na página inicial e insere um elemento “Heading 1” dentro do contêiner com o ID “username”.
Busca automaticamente as informações do utilizador após um início de sessão bem-sucedido, substitui o nome de utilizador no elemento “Heading 1” e exibe o contêiner. Podemos fazer isso com o seguinte código personalizado.
Este tutorial guiou-te na integração do Webflow com o Logto. Utilizando o SDK @logto/browser, podes facilmente integrar a autenticação do utilizador em qualquer um dos teus sites Webflow com apenas alguns passos.
Consulta 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 tratar do RBAC (Controle de Acesso Baseado em Funções), etc.
