Integração com Webflow

Introdução#

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.

Pré-requisitos#

1. Uma conta Webflow com o recurso de código personalizado habilitado (requer pelo menos o plano “Básico”).
2. Uma instância do Logto em execução, seja auto-hospedada ou utilizando o Logto Cloud.

Passos de Integração#

Preparação#

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

Integrar SDK JS#

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.

1. No painel do Webflow, passe o mouse sobre o seu site recém-criado e clique no ícone de “Engrenagem” no canto superior direito.
2. 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.

Implementar login#

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

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

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

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

Implementar logout#

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

Lidar com o estado de autenticação#

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#

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

Ponto de verificação: Teste sua aplicação#

Agora, teste seu site Webflow:

1. Implemente e visite a URL do seu site, o botão de login deve estar visível.
2. Clique no botão de login, o SDK iniciará o processo de login, redirecionando você para a página de login do Logto.
3. Após o login, você será redirecionado de volta ao seu site, vendo o nome de usuário e o botão de logout.
4. Clique no botão de logout para sair.

Resumo#

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.

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