Hallo alle miteinander! Ich habe mich kürzlich mit der Aufgabe beschäftigt, Webflow OAuth in meine App zu integrieren, und als jemand, der nicht programmiert, wollte ich meinen Ansatz mit Xano als Backend und Webflow als Frontend teilen. Wenn Sie ein Programmierprofi sind, haben Sie bitte Geduld – werfen Sie keine faulen Tomaten! Dies ist ein No-Coder nach dem anderen, in der Hoffnung, Ihnen die Reise ein wenig zu erleichtern. TLDR: Ich habe jeden Schritt in einem Video für diejenigen zusammengestellt, die visuelles Lernen bevorzugen, aber unten finden Sie eine detaillierte Textversion des Prozesses. https://youtu.be/bTUatl6eTec?embedable=true OAuth verstehen Lassen Sie uns schnell das grundlegende Konzept der Funktionsweise von OAuth verstehen. Stellen Sie sich Folgendes vor: Sie sind im Urlaub und möchten eine Wohnung in einem fremden Land mieten. Sie finden ein Mehrfamilienhaus, in dem Sie eine Wohneinheit mieten können. Bei Ihrer Ankunft erhalten Sie vom Eigentümer keine Schlüssel für alle Wohnungen, sondern einen Einmalcode, mit dem Sie Zugang zum Schlüsselkasten Ihrer jeweiligen Wohnung erhalten. Mit diesem Code öffnen Sie das Schließfach und erhalten eine Schlüsselkarte, die Ihnen während Ihres Aufenthalts Zugang zum Apartment gewährt. In dieser Analogie repräsentiert Webflow den Wohnungseigentümer, der Einmalcode dient als Zugangscode und die Schlüsselkarte ist analog zu einem Zugangstoken. Wenn Sie Zugriff auf Informationen zu den Webflow-Projekten eines Benutzers benötigen, z. B. Seitenlisten, Assets, Sammlungen oder Formulare, benötigen Sie ein Zugriffstoken. Dieses Token wird mit allen API-Anfragen verwendet, die im Namen des Benutzers an Webflow gesendet werden. Im folgenden Beispiel zeige ich die Erstellung einer einfachen Webflow-App, die Informationen über das Projekt des Benutzers anzeigt, ohne das Zugriffstoken in meiner Datenbank zu speichern (obwohl es in realen Szenarien ratsam ist, den Benutzern zugeordnete Token zu speichern). Schritt 1: Erstellen Sie eine neue Webflow-App Navigieren Sie zur Registerkarte „Apps & Integrationen“ Ihres Webflow-Dashboards und erstellen Sie eine neue App. Geben Sie allgemeine Informationen zu Ihrer App an, einschließlich Name, Beschreibung und Homepage-URL. Geben Sie die erforderlichen Berechtigungen an. In meinem Beispiel verwende ich eine Daten-Client-App, die Lesezugriff auf „Sites“ gewährt. Sie können diese Berechtigungen später bei Bedarf anpassen. Die entscheidenden Informationen, die wir hier benötigen, sind die und , die automatisch für Ihre App generiert werden. Lassen Sie das Feld „Umleitungs-URL“ vorerst leer. Wir werden es uns im nächsten Schritt noch einmal ansehen. Client-ID das Client-Geheimnis Schritt 2: Einrichten eines neuen Webflow-Projekts als Frontend Erstellen Sie ein neues Webflow-Projekt mit zwei Seiten: Home und Sites. Fügen Sie auf der Startseite eine Schaltfläche mit der Bezeichnung „Sites anzeigen“ hinzu, die eine Anfrage an Webflow nach dem Zugangscode auslöst. Legen Sie die URL der Schaltfläche auf fest und ersetzen Sie YOUR_CLIENT_ID durch die tatsächliche zuvor erhaltene Client-ID. Passen Sie die URL an, wenn Ihre App zusätzliche Berechtigungen erfordert. https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread Wenn Sie auf diese Schaltfläche klicken, wird dem Benutzer ein Berechtigungsbildschirm angezeigt, in dem er auswählen kann, auf welche Projekte er Zugriff gewähren möchte. Nach der Autorisierung der App werden sie zur Umleitungs-URL weitergeleitet. Denken Sie daran, die URL der Sites-Seite (der zweiten Seite, die Sie erstellt haben) zu kopieren und in das Feld „Umleitungs-URL“ Ihrer App einzufügen. Nach Abschluss dieses Schritts werden Benutzer durch Klicken auf „Sites anzeigen“ zur Seite „Sites“ weitergeleitet, wobei der Zugriffscode in der URL enthalten ist. Schritt 3: Einrichten eines Xano-Projekts und Erstellen der ersten API Erstellen Sie ein neues Projekt in Xano und navigieren Sie zur Registerkarte „APIs“. Fügen Sie eine neue API-Gruppe hinzu und fügen Sie dann innerhalb dieser Gruppe einen neuen API-Endpunkt hinzu – nennen wir ihn „getToken“. Im „getToken“-Endpunkt: Fügen Sie eine Texteingabe mit dem Namen „accessCode“ hinzu, um den Zugangscode vom Frontend zu erhalten. Stellen Sie eine POST-Anfrage an mit Body-Parametern: https://api.webflow.com/oauth/access_token client_id: Ihre Kunden-ID client_secret: Ihr Client-Geheimnis grant_type: Autorisierungscode Code: accessCode (unter Verwendung der Variablen aus der Eingabe) Definieren Sie die Ausgabe der ersten API-Anfrage als „accessToken“, bei dem es sich um das dem Benutzer zugeordnete Zugriffstoken handelt. Stellen Sie eine zweite API-Anfrage (zu Demonstrationszwecken), um die Site-Liste des Benutzers abzurufen – eine GET-Anfrage an . Fügen Sie die folgenden Header ein: https://api.webflow.com/v2/sites akzeptieren: application/json Autorisierung: accessToken.response.result.access_token Definieren Sie die Ausgabe der zweiten API als „siteList“, die die Liste der Webflow-Projekte darstellt. Geben Sie die „siteList“ in der Antwort zurück. Kopieren Sie die API-Endpunkt-URL zur späteren Verwendung. Schritt 4: Konfigurieren einer Frontend-Anfrage aus Ihrem Webflow-Projekt Kehren Sie zum Webflow-Projekt zurück und öffnen Sie die Seite „Sites“ – die Seite, auf die Benutzer weitergeleitet werden, nachdem sie Zugriff auf ihre Webflow-Projekte gewährt haben. Fügen Sie hier die folgenden JavaScript-Funktionen im benutzerdefinierten Codebereich vor dem </body>-Tag hinzu. Erstellen wir zunächst die Funktion , um die Websites abzurufen: getSites() function getSites() { const url = window.location.search; const params = new URLSearchParams(url); const accessCode = params.get('code'); const options = { method: 'POST', headers: {accept: 'application/json', 'content-type': 'application/json'}, body: JSON.stringify({accessCode: accessCode}) }; fetch('YOUR_API_ENDPOINT', options) .then(response => response.json()) .then(response => { const siteList = response.response.result.sites; showSites(siteList); }) .catch(err => console.log(err)); } Dann erstellen wir die Funktion , um die abgerufenen Websites anzuzeigen: showSites() function showSites(sites) { const container = document.querySelector('#result'); sites.forEach(site => { const siteDiv = document.createElement('div'); siteDiv.classList.add('site'); const siteContent = `<h2>${site.displayName}</h2> <p><strong>ID:</strong> ${site.id}</p> <p><strong>Workspace ID:</strong> ${site.workspaceId}</p> <p><strong>Short Name:</strong> ${site.shortName}</p> <p><strong>Time Zone:</strong> ${site.timeZone}</p> <p><strong>Created On:</strong> ${site.createdOn}</p> <p><strong>Last Updated:</strong> ${site.lastUpdated}</p> <p><strong>Last Published:</strong> ${site.lastPublished}</p> <img src="${site.previewUrl}" alt="Preview"> `; siteDiv.innerHTML = siteContent; container.appendChild(siteDiv); }); } Stellen Sie abschließend sicher, dass die Funktion beim Laden der Seite ausgeführt wird: getSites() document.addEventListener('DOMContentLoaded', function() { getSites(); }); Und da haben Sie es! Ich hoffe, dieser Leitfaden erweist sich als hilfreich für meine Mit-No-Programmierer! Wenn Sie Fragen haben oder weitere Erläuterungen benötigen, können Sie sich gerne an uns wenden. Viel Spaß beim Codieren!
