## Introdução [Webflow](https://webflow.com/) é 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](https://cloud.logto.io/). ## 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](https://www.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. ```html ``` ### Implementar o início de sessão Assumindo que o teu site Webflow está a correr em `https://teu-site-incrível.webflow.io`. 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()`. Configurações do botão de início de sessão

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

```html ``` 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. ```html ``` 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. ```js const signOutButton = document.getElementById('sign-out'); const onClickSignOut = () => logtoClient.signOut('https://teu-site-incrível.webflow.io'); signOutButton.addEventListener('click', onClickSignOut); ``` ### **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. ```js const isAuthenticated = await logtoClient.isAuthenticated(); signInButton.style.display = isAuthenticated ? 'none' : 'block'; signOutButton.style.display = isAuthenticated ? 'block' : 'none'; ``` ### 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. ```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: 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](https://docs.logto.io/quick-starts/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](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 somente leitura, e o site publicado está disponível em [https://charless-trendy-site-f191c0.webflow.io/](https://charless-trendy-site-f191c0.webflow.io/).