Integration mit Webflow

Einführung#

Webflow ist eine SaaS-Plattform für den Website-Bau und -Hosting, die einen visuellen Online-Editor bietet, der den Prozess des Entwerfens, Bauens und Startens von Websites mit minimalem Code vereinfacht.

Dieser Artikel wird dich durch die Integration von Logto in deine Webflow-Projekte führen, um eine nahtlose Benutzerauthentifizierung zu ermöglichen.

Voraussetzungen#

1. Ein Webflow-Konto mit aktivierter benutzerdefinierter Code-Funktion (erfordert mindestens den „Basic“-Plan).
2. Eine laufende Logto-Instanz, entweder selbst gehostet oder unter Verwendung von Logto Cloud.

Integrationsschritte#

Vorbereitung#

1. Navigiere zur Logto-Konsole, erstelle eine Anwendung mit der Vorlage „Vanilla JS“ oder „Ohne Rahmenwerk erstellen“ und wähle „Single Page Application“ als App-Typ.
2. Erstelle im Webflow-Dashboard eine neue Website.

JS-SDK integrieren#

In diesem Schritt fügen wir globalen benutzerdefinierten Code zu deiner Website hinzu. Da Webflow eine statische Website ist, verwenden wir das @logto/browser (Vanilla JS) SDK für die Benutzerauthentifizierung. Da NPM nicht verwendet werden kann, importieren wir unser SDK über einen CDN-Dienst wie jsdelivr.com.

1. Bewege im Webflow-Dashboard den Mauszeiger über deine neu erstellte Website und klicke auf das „Zahnrad“-Symbol in der oberen rechten Ecke.
2. Auf der sich öffnenden Einstellungsseite finde „Custom Code“ im linken Navigationsmenü und füge den folgenden JavaScript-Code in den Abschnitt „Head Code“ ein. Deine App-ID und die Endpunkt-URL findest du in den Logto-Anwendungsdetails.

Anmeldung implementieren#

1. Gehe zur Logto-Konsole, finde im Anwendungseinstellungen-Feld „Redirect URIs“, und gib https://deine-tolle-website.webflow.io/callback ein, dann klicke auf „Änderungen speichern“.
2. Kehre zum Webflow-Designer zurück und füge auf der Startseite eine „Anmelden“-Schaltfläche hinzu. Zur Vereinfachung dieses Tutorials weisen wir der Schaltfläche auch die ID „sign-in“ zu, um sie später mit getElementById() referenzieren zu können.

3. Jetzt fügen wir benutzerdefinierten Code auf Seitenebene zur Startseite hinzu. Klicke auf das Zahnrad-Symbol im Seitenmenü und finde den benutzerdefinierten Code-Bereich unten. Füge den folgenden Code ein, um den Klick-Handler für die Anmelden-Schaltfläche zu binden.

4. Erstelle in Webflow eine neue „Callback“-Seite und füge einfach etwas statischen Text „Weiterleiten…“ hinzu. Wir werden die Logik für den Anmelderückruf auf dieser Seite mit dem folgenden benutzerdefinierten Code behandeln.

5. Nun kannst du den Anmeldevorgang testen, indem du deine Webflow-Website bereitstellst. Nach der Bereitstellung sollte die „Anmelden“-Schaltfläche auf deiner Startseite erscheinen. Klicke darauf, um zur Anmeldeseite von Logto zu navigieren. Nach der Anmeldung wirst du zuerst zur „Callback“-Seite weitergeleitet, auf der du den Text „Weiterleiten…“ siehst, und dann zurück zur Startseite.

Abmeldung implementieren#

1. Finde in der Logto-Konsole den Punkt „Post-Logout-Redirect-URIs“ in den Anwendungseinstellungen und gib die URL deiner Webflow-Website https://deine-tolle-website.webflow.io ein.
2. Kehre zum Webflow-Designer zurück und füge eine „Abmelden“-Schaltfläche auf deiner Startseite hinzu. Weise der Schaltfläche ähnlich die ID „sign-out“ zu und füge den folgenden Code zum Seitenebenen-„Custom Code“ hinzu.

Authentifizierungsstatus verwalten#

Im Logto-SDK können wir im Allgemeinen die Methode logtoClient.isAuthenticated() verwenden, um den Authentifizierungsstatus zu überprüfen. Wenn der Benutzer angemeldet ist, wird der Wert true sein; andernfalls wird er false sein.

Auf deiner Webflow-Website kannst du es auch verwenden, um die Anmelde- und Abmelde-Schaltflächen programmgesteuert anzuzeigen oder auszublenden. Verwende den folgenden benutzerdefinierten Code, um die CSS-Einstellung der Schaltflächen entsprechend anzupassen.

Benutzername abrufen und Begrüßungsnachricht anzeigen#

1. Füge auf der Startseite einen Flex-Container mit der ID „container“ hinzu und setze ein „Heading 1“-Element mit der ID „username“ hinein.
2. Hole automatisch Benutzerinformationen nach erfolgreicher Anmeldung ab, ersetze den Benutzernamen im „Heading 1“-Element und zeige den Container an. Wir können dies mit dem folgenden benutzerdefinierten Code tun.

Checkpoint: Teste deine Anwendung#

Teste jetzt deine Webflow-Website:

1. Stelle deine Website bereit und besuche deine URL, die Anmelden-Schaltfläche sollte sichtbar sein.
2. Klicke auf die Anmelden-Schaltfläche, das SDK wird den Anmeldevorgang einleiten, dich zur Logto-Anmeldeseite weiterleiten.
3. Nach der Anmeldung wirst du zurück zu deiner Website weitergeleitet, wo du den Benutzernamen und die Abmelden-Schaltfläche siehst.
4. Klicke auf die Abmelden-Schaltfläche, um dich abzumelden.

Zusammenfassung#

Dieses Tutorial hat dich durch die Integration von Webflow mit Logto geführt. Mit dem @logto/browser-SDK kannst du mit nur wenigen Schritten ganz einfach eine Benutzerauthentifizierung in jede deiner Webflow-Websites integrieren.

Bitte siehe dir die vollständige Webflow-Integrationsanleitung auf unserer Dokumentationsseite für weitere Details an, z. B. wie man ein JWT-Access-Token abruft und RBAC (Role-Based Access Control) verwaltet.

Das Webflow-Demo findest du hier im schreibgeschützten Modus, und die bereitgestellte Website ist unter https://charless-trendy-site-f191c0.webflow.io/ verfügbar.