Integreren met Webflow

Inleiding#

Webflow is een SaaS-platform voor het bouwen en hosten van websites, dat een online visuele editor biedt die het proces van ontwerpen, bouwen en lanceren van websites met minimale code vereenvoudigt.

Dit artikel leidt je door het integreren van Logto in je Webflow-projecten, waardoor gebruikersauthenticatie naadloos verloopt.

Vereisten#

1. Een Webflow-account met de mogelijkheid voor aangepaste code (vraagt minimaal het “Basic” abonnement).
2. Een draaiende Logto-instantie, ofwel zelf-gehost of gebruikmakend van Logto Cloud.

Integratiestappen#

Voorbereiding#

1. Navigeer naar de Logto Console, maak een applicatie aan met behulp van de “Vanilla JS” template of “Create without framework,” en selecteer “Single page application” als het app-type.
2. Maak een nieuwe site aan in het Webflow-dashboard.

Integreer JS SDK#

In deze stap voegen we code op globaal niveau toe aan je site. Aangezien Webflow een statische website is, zullen we de @logto/browser (Vanilla JS) SDK gebruiken voor gebruikersauthenticatie. Omdat NPM niet kan worden gebruikt, zullen we onze SDK via een CDN-service zoals jsdelivr.com importeren.

1. Beweeg in het Webflow-dashboard over je pas aangemaakte site en klik op het “Tandwiel”-icoon in de rechterbovenhoek.
2. Zoek op de geopende instellingenpagina naar “Custom code” in het linker navigatiemenu en plak de volgende JavaScript-code in de “Head code” sectie. Je kunt je app-ID en eindpunt-URL vinden in de Logto applicatiegegevens.

Implementeer inloggen#

1. Ga naar de Logto Console, vind in de applicatie-instellingen het veld “Redirect URIs” en voer https://your-awesome-site.webflow.io/callback in, klik vervolgens op “Wijzigingen opslaan”.
2. Ga terug naar de Webflow-ontwerper en voeg een “Log in” knop toe op de homepage. Voor de eenvoud van deze handleiding zullen we ook een ID “sign-in” toekennen aan de knop voor latere referentie met behulp van getElementById().

3. Laten we nu enkele pagina-niveau aangepaste code toevoegen aan de homepage. Klik op het tandwielicoon in het paginamenu en zoek het gedeelte aangepaste code onderaan. Plak de onderstaande code om de click-handler voor de inlogknop te binden.

4. Maak een nieuwe “Callback” pagina in Webflow, en plaats simpelweg wat statische tekst “Redirecting…” erop. We zullen de sign-in callback logica op deze pagina afhandelen met de volgende aangepaste code.

5. Nu kun je de inlogstroom testen door je Webflow-site te implementeren. Na implementatie zou de “Log in” knop op je homepage moeten verschijnen. Klik erop om naar de inlogpagina gehost door Logto te navigeren. Na het inloggen word je eerst doorgestuurd naar de “Callback” pagina, waar je de tekst “Redirecting…” kunt zien, en daarna terug naar je homepage.

Implementeer uitloggen#

1. Zoek in de Logto Console naar “Post logout redirect URIs” in de applicatie-instellingen en voer de URL van je Webflow-site https://your-awesome-site.webflow.io in.
2. Ga terug naar de Webflow-ontwerper en voeg een “Log uit” knop toe op je homepage. Ken ook hier een ID “sign-out” toe aan de knop en voeg de volgende code toe aan de pagina-niveau “Custom code”.

Beheer authenticatiestatus#

In de Logto SDK kunnen we over het algemeen de logtoClient.isAuthenticated() methode gebruiken om de authenticatiestatus te controleren, als de gebruiker is ingelogd, is de waarde true; anders zal het false zijn.

Op je Webflow-site kun je het ook gebruiken om op programmatische wijze de inlog- en uitlogknoppen te tonen en te verbergen. Pas de volgende aangepaste code toe om de CSS van de knoppen dienovereenkomstig aan te passen.

Gebruikersnaam ophalen en welkomstbericht weergeven#

1. Voeg een flex-container met ID “container” toe op de homepage en plaats een “Heading 1” element binnen de container met ID “username”.
2. Haal automatisch gebruikersinformatie op nadat je succesvol bent ingelogd, vervang de gebruikersnaam in het “Heading 1” element en toon de container. We kunnen dit doen met de volgende aangepaste code.

Controlepunt: Test je applicatie#

Test nu je Webflow-site:

1. Implementeer en bezoek je site-URL, de inlogknop zou zichtbaar moeten zijn.
2. Klik op de inlogknop, de SDK start het inlogproces en leidt je om naar de Logto inlogpagina.
3. Na het inloggen word je teruggeleid naar je site, waar je de gebruikersnaam en de uitlogknop ziet.
4. Klik op de uitlogknop om uit te loggen.

Samenvatting#

Deze handleiding heeft je begeleid bij het integreren van Webflow met Logto. Door gebruik te maken van de @logto/browser SDK kun je eenvoudig gebruikersauthenticatie integreren in al je Webflow-sites met slechts enkele stappen.

Raadpleeg de volledige Webflow-integratiehandleiding op onze documentatiesite voor meer details, zoals het ophalen van JWT-toegangstokens en het omgaan met RBAC (Role-based access control), etc.

De Webflow-demo kan hier in alleen-lezen modus worden gevonden, en de geïmplementeerde site is beschikbaar op https://charless-trendy-site-f191c0.webflow.io/.