Integrar com Webflow

Introdução#

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.

Pré-requisitos#

1. Uma conta Webflow com a funcionalidade de código personalizado ativada (requer pelo menos o plano “Basic”).
2. Uma instância Logto em funcionamento, seja auto-hospedada ou utilizando o Logto Cloud.

Passos de integração#

Preparação#

1. 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.
2. No dashboard do Webflow, cria um novo site.

Integrar JS SDK#

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.

1. No dashboard do Webflow, paira sobre o teu site recém-criado e clica no ícone “Engrenagem” no canto superior direito.
2. 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.

Implementar o início de sessão#

1. 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”.
2. 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().

3. 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.

4. 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.

5. 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.

Implementar o término de sessão#

1. 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.
2. 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.

Tratar do estado de autenticação#

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#

1. 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”.
2. 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.

Ponto de verificação: Testar a tua aplicação#

Agora, testa o teu site Webflow:

1. Publica e visita o URL do teu site, o botão de início de sessão deve ser visível.
2. Clica no botão de início de sessão, o SDK irá iniciar o processo de início de sessão, redirecionando-te para a página de início de sessão do Logto.
3. Depois de iniciar sessão, serás redirecionado de volta para o teu site, onde verás o nome de utilizador e o botão de término de sessão.
4. Clica no botão de término de sessão para terminar a sessão.

Resumo#

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.

O demo do Webflow pode ser encontrado aqui em modo somente leitura, e o site publicado está disponível em https://charless-trendy-site-f191c0.webflow.io/.