## Introduzione [Webflow](https://webflow.com/) è una piattaforma SaaS per la creazione e l'hosting di siti web, che offre un editor visivo online che semplifica il processo di design, costruzione e lancio di siti web con un codice minimo. Questo articolo ti guiderà attraverso l'integrazione di Logto nei tuoi progetti Webflow, abilità l'autenticazione degli utenti senza interruzioni. ## Prerequisiti 1. Un account Webflow con la funzione codice personalizzato abilitata (richiede almeno il piano “Basic”). 2. Un'istanza Logto in esecuzione, sia auto-ospitata che utilizzando [Logto Cloud](https://cloud.logto.io/). ## Passaggi di integrazione ### Preparazione 1. Naviga al Logto Console, crea un'applicazione utilizzando il modello “Vanilla JS” o “Crea senza framework”, e seleziona “Applicazione a pagina singola” come tipo di app. 2. Nel dashboard di Webflow, crea un nuovo sito. ### Integrare JS SDK In questo passaggio, aggiungeremo codice personalizzato a livello globale al tuo sito. Poiché Webflow è un sito web statico, utilizzeremo l'SDK **`@logto/browser`** (Vanilla JS) per l'autenticazione degli utenti. Poiché NPM non può essere utilizzato, importeremo il nostro SDK tramite un servizio CDN come [jsdelivr.com](https://www.jsdelivr.com/). 1. Nel dashboard di Webflow, passa con il mouse sul tuo nuovo sito creato e fai clic sull'icona “Ingranaggio” nell'angolo in alto a destra. 2. Nella pagina delle impostazioni che si apre, trova “Codice personalizzato” nel menu di navigazione a sinistra e incolla il seguente codice JavaScript nella sezione “Codice Head”. Puoi trovare il tuo ID app e l'URL dell'endpoint nei dettagli dell'applicazione Logto. ```html ``` ### Implementare il login Supponendo che il tuo sito Webflow sia in esecuzione su `https://tuo-sito-straordinario.webflow.io`. 1. Vai al Logto Console, nelle impostazioni dell'applicazione, trova il campo “Redirect URIs” e inserisci `https://tuo-sito-straordinario.webflow.io/callback`, quindi fai clic su “Salva modifiche”. 2. Torna al designer di Webflow e aggiungi un pulsante “Accedi” nella home page. Per semplicità in questo tutorial, assegneremo anche un ID “sign-in” al pulsante per il successivo riferimento utilizzando `getElementById()`. Impostazioni del pulsante di accesso

3. Ora aggiungiamo del codice personalizzato a livello di pagina nella home page. Fai clic sull'icona dell'ingranaggio nel menu della pagina e trova la sezione del codice personalizzato in fondo. Incolla il codice qui sotto per associare il gestore clic al pulsante di accesso. Modifica impostazioni della pagina

```html ``` 4. Crea una nuova pagina “Callback” in Webflow, e inserisci semplicemente del testo statico “Reindirizzamento…” su di essa. Gestiremo la logica del callback di accesso su questa pagina con il seguente codice personalizzato. ```html ``` 5. Ora puoi testare il flusso di accesso distribuendo il tuo sito Webflow. Dopo la distribuzione, il pulsante “Accedi” dovrebbe apparire nella tua home page. Fai clic su di esso per navigare alla pagina di accesso ospitata da Logto. Dopo aver effettuato l'accesso, sarai reindirizzato prima alla pagina “Callback”, dove potrai vedere il testo “Reindirizzamento…”, e poi di nuovo alla tua home page. ### Implementare il logout 1. Nel Logto Console, individua “Post logout redirect URIs” nelle impostazioni dell'applicazione e inserisci l'URL del tuo sito Webflow `https://tuo-sito-straordinario.webflow.io`. 2. Torna al designer di Webflow e aggiungi un pulsante “Esci” nella tua home page. Allo stesso modo, assegna un ID “sign-out” al pulsante e aggiungi il seguente codice alla “Custom code” a livello di pagina. ```js const signOutButton = document.getElementById('sign-out'); const onClickSignOut = () => logtoClient.signOut('https://tuo-sito-straordinario.webflow.io'); signOutButton.addEventListener('click', onClickSignOut); ``` ### **Gestire lo stato di autenticazione** Nell'SDK di Logto, generalmente possiamo usare il metodo `logtoClient.isAuthenticated()` per controllare lo stato di autenticazione: se l'utente è loggato, il valore sarà `true`; in caso contrario, sarà `false`. Nel tuo sito Webflow, puoi anche usarlo per mostrare e nascondere programmaticamente i pulsanti di accesso e di uscita. Applica il seguente codice personalizzato per regolare i CSS dei pulsanti di conseguenza. ```js const isAuthenticated = await logtoClient.isAuthenticated(); signInButton.style.display = isAuthenticated ? 'none' : 'block'; signOutButton.style.display = isAuthenticated ? 'block' : 'none'; ``` ### Recuperare il nome utente e mostrare un messaggio di benvenuto 1. Aggiungi un contenitore flex con ID “container” nella home page e inserisci un elemento “Heading 1” all'interno del contenitore con ID “username”. 2. Recupera automaticamente le informazioni utente dopo l'avvenuto accesso, sostituisci il nome utente nell'elemento “Heading 1” e mostra il contenitore. Possiamo farlo con il seguente codice personalizzato. ```js const container = document.getElementById('container'); container.style.display = isAuthenticated ? 'flex' : 'none'; if (isAuthenticated) { (async () => { const user = await logtoClient.fetchUserInfo(); username.innerText = 'Bentornato: ' + user.name; })(); } ``` ### Checkpoint: Testa la tua applicazione Ora, testa il tuo sito Webflow: 1. Distribuisci e visita l'URL del tuo sito, il pulsante di accesso dovrebbe essere visibile. 2. Fai clic sul pulsante di accesso, l'SDK inizierà il processo di autenticazione, reindirizzandoti alla pagina di accesso Logto. 3. Dopo aver effettuato l'accesso, sarai reindirizzato al tuo sito, vedendo il nome utente e il pulsante di uscita. 4. Fai clic sul pulsante di uscita per disconnetterti. ## Riassunto Questo tutorial ti ha guidato attraverso l'integrazione di Webflow con Logto. Utilizzando l'SDK **`@logto/browser`**, puoi facilmente integrare l'autenticazione degli utenti in qualsiasi dei tuoi siti Webflow con pochi passaggi. Per ulteriori dettagli, come ottenere il token di accesso JWT e gestire il controllo degli accessi basato sui ruoli (RBAC), consulta la [guida completa all'integrazione di Webflow](https://docs.logto.io/quick-starts/webflow/) nel nostro sito di documentazione. Il demo di Webflow può essere trovato [qui](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) in modalità di sola lettura, e il sito distribuito è disponibile su [https://charless-trendy-site-f191c0.webflow.io/](https://charless-trendy-site-f191c0.webflow.io/).