## Introdução [Webflow](https://webflow.com/) é 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](https://cloud.logto.io/). ## 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](https://www.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. ```html ``` ### Implementar login Assumindo que seu site Webflow está rodando em `https://your-awesome-site.webflow.io`. 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()`. Configurações do botão de login

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. Editar configurações da página

```html ``` 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. ```html ``` 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. ```js const signOutButton = document.getElementById('sign-out'); const onClickSignOut = () => logtoClient.signOut('https://your-awesome-site.webflow.io'); signOutButton.addEventListener('click', onClickSignOut); ``` ### **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. ```js const isAuthenticated = await logtoClient.isAuthenticated(); signInButton.style.display = isAuthenticated ? 'none' : 'block'; signOutButton.style.display = isAuthenticated ? 'block' : 'none'; ``` ### 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. ```js const container = document.getElementById('container'); container.style.display = isAuthenticated ? 'flex' : 'none'; if (isAuthenticated) { (async () => { const user = await logtoClient.fetchUserInfo(); username.innerText = 'Bem-vindo de volta: ' + user.name; })(); } ``` ### 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](https://docs.logto.io/quick-starts/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](https://preview.webflow.com/preview/charless-trendy-site-f191c0?utm_medium=preview_link&utm_source=designer&utm_content=charless-trendy-site-f191c0&preview=0eae5f73661a8a5791787f0438bc29de&workflow=preview) em modo de leitura, e o site implantado está disponível em [https://charless-trendy-site-f191c0.webflow.io/](https://charless-trendy-site-f191c0.webflow.io/).