## Einführung [Webflow](https://webflow.com/) 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](https://cloud.logto.io/). ## 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](https://www.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. ```html ``` ### Anmeldung implementieren Angenommen, deine Webflow-Website läuft unter `https://deine-tolle-website.webflow.io`. 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. Anmelde-Schaltflächeneinstellungen

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. Seiteneinstellungen bearbeiten

```html ``` 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. ```html ``` 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. ```js const signOutButton = document.getElementById('sign-out'); const onClickSignOut = () => logtoClient.signOut('https://deine-tolle-website.webflow.io'); signOutButton.addEventListener('click', onClickSignOut); ``` ### **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. ```js const isAuthenticated = await logtoClient.isAuthenticated(); signInButton.style.display = isAuthenticated ? 'none' : 'block'; signOutButton.style.display = isAuthenticated ? 'block' : 'none'; ``` ### 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. ```js const container = document.getElementById('container'); container.style.display = isAuthenticated ? 'flex' : 'none'; if (isAuthenticated) { (async () => { const user = await logtoClient.fetchUserInfo(); username.innerText = 'Willkommen zurück: ' + user.name; })(); } ``` ### 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](https://docs.logto.io/quick-starts/webflow/) 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](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) im schreibgeschützten Modus, und die bereitgestellte Website ist unter [https://charless-trendy-site-f191c0.webflow.io/](https://charless-trendy-site-f191c0.webflow.io/) verfügbar.