Webflow è 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.
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.
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.
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.
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.
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”.
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().
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.
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.
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.
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.
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.
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.
Recuperare il nome utente e mostrare un messaggio di benvenuto#
Aggiungi un contenitore flex con ID “container” nella home page e inserisci un elemento “Heading 1” all'interno del contenitore con ID “username”.
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.
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 nel nostro sito di documentazione.
