Documentation Webflow
Im Folgenden wird beschrieben, wie du TrustCaptcha in deine Webflow-Site integrierst.
Vorbereitung
Nimm die folgenden Vorbereitungen vor, bevor du mit der Integration von TrustCaptcha in deine Webflow-Website startest.
Voraussetzungen
- Ein Konto bei TrustCaptcha und ein bestehendes CAPTCHA.
- Eine Website mit Webflow, in die TrustCaptcha integriert wird.
Integration
Die Integration von TrustCaptcha erfolgt in zwei Schritten. Zuerst wird das CAPTCHA-Widget in Webflow eingebunden. Im zweiten Schritt wird das Ergebnis serverseitig ausgewertet und die nächsten Schritte werden bestimmt.
1. CAPTCHA-Widget hinzufügen
Integriere das CAPTCHA-Widget schnell und einfach in Webflow mit der ‘TrustCaptcha’ Designer Extension.
- Installiere unsere TrustCaptcha-Erweiterung aus dem offiziellen Webflow Marketplace.
- Öffne deinen Webflow-Arbeitsbereich im Webflow Designer und wähle ein Formular, in das du das CAPTCHA-Widget integrieren möchtest.
- Starte die TrustCaptcha-App unter Apps -> TrustCaptcha -> Launch. Wähle Insert, setze den Site Key (erforderlich) und passe das CAPTCHA an deine Anforderungen an. Klicke anschließend auf Insert into selected form.
Nun siehst du im Designer einen Platzhalter für das CAPTCHA-Widget. Das Widget wird im Designer nicht gerendert, auf der öffentlichen Website jedoch schon. Optional kannst du deine Website jetzt als Zwischenschritt veröffentlichen und das CAPTCHA-Widget in seiner öffentlichen Form testen. Die serverseitige Validierung fehlt allerdings noch; diese fügen wir als Nächstes hinzu.
Das Video demonstriert die wichtigsten Schritte visuell.
2. CAPTCHA-Widget aktualisieren (optional)
Du kannst bestehende CAPTCHA-Widgets im Webflow Designer mit unserer App ganz einfach aktualisieren.
- Wähle das CAPTCHA aus, das du aktualisieren möchtest.
- Öffne die TrustCaptcha-App
- Wähle Update und klicke auf den Load selected Captcha Button.
- Passe das CAPTCHA an deine Bedürfnisse an und klicke anschließend auf den Update selected Captcha Button.
Das CAPTCHA wurde aktualisiert. Du kannst die Website nun optional erneut veröffentlichen und das aktualisierte CAPTCHA auf der öffentlichen Website ansehen.
Das Video demonstriert die wichtigsten Schritte visuell.
3. CAPTCHA-Ergebnis validieren
Wenn das CAPTCHA-Widget bereit ist, fügt es deinem Formular ein verstecktes Eingabefeld mit dem sogenannten verification token hinzu. Dieses wird beim Absenden des Formulars an dein Backend übertragen. Mithilfe dieses Tokens kannst du das Verifikationsergebnis des CAPTCHAs von unserem Server abrufen und festlegen, wie es weitergeht. Erfahre mehr darüber, wie TrustCaptcha funktioniert.
Du kannst das Ergebnis über einen einfachen REST-API-Aufruf von unseren Servern abrufen. Mehr dazu erfährst du in den technischen Backend-Details. Alternativ kannst du eine unserer fertigen Bibliotheken für die Backend-Integration verwenden. Derzeit gibt es z. B. fertige Integrationen für PHP, NodeJS, Python, Java, Kotlin, Ruby, Rust, Go und .Net.
Die folgenden drei Codebeispiele demonstrieren den Backend-Validierungsprozess für PHP, NodeJS und Python. Jedes Beispiel zeigt den Empfang des verification token, das Abrufen des Verifikationsergebnisses und die Bestimmung der nächsten Schritte auf Basis dieses Ergebnisses.
