TrustCaptcha – Bot-Schutz

JavaScript CAPTCHA-Integration

Binde TrustCaptcha in wenigen Minuten auf jeder JavaScript-Website ein – mit einem einfachen Formular-Widget. Schütze Aktionen wie Registrierungen, Passwort-Resets, Lead-Formulare und Checkouts vor automatisiertem Missbrauch – ganz ohne Rätsel. EU-gehostet, DSGVO-konform und barrierefreundlich.

Schnellstart

So funktioniert die Integration

1. CAPTCHA erstellen

Erstellen Sie ein Benutzerkonto oder melden Sie sich mit einem bestehenden Konto an. Anschließend erstellen Sie ein neues CAPTCHA oder wählen Sie ein bereits vorhandenes aus. Wenn Sie sich nicht sicher sind, ob TrustCaptcha das Richtige für Sie ist, können Sie unseren CAPTCHA-Service 14 Tage lang kostenlos und ohne Risiko testen.

Auf der CAPTCHA-Übersichtsseite finden Sie alle wichtigen Informationen wie den site-key, den secret-key und den license-key. Ermöglichen Sie Ihren Websites den Zugriff auf Ihr CAPTCHA, indem Sie diese einfach zur Liste der autorisierten Domains in den CAPTCHA-Sicherheitsregeln hinzufügen.

Start des Formulars zur Erstellung eines CAPTCHA.

CAPTCHA-Sicherheitsregeln eines Demo-CAPTCHAs.

2. CAPTCHA-Widget in Ihr Frontend integrieren

Die folgenden Schritte geben Ihnen einen groben Überblick, wie Sie das TrustCaptcha CAPTCHA-Widget in ein JavaScript-Frontend integrieren. Für genaue, detaillierte Anweisungen lesen Sie bitte die CAPTCHA-Integrationsanleitung für JavaScript in unserer Dokumentation.

Dokumentation lesen

Installieren Sie zunächst unser TrustCaptcha JavaScript-Paket:

Install

HTML

ECMAScript Modules (esm)
<script type="module" src="https://cdn.trustcomponent.com/trustcaptcha/2.1.x/trustcaptcha.esm.min.js"></script>

CommenJS (cjs)
<script src="https://cdn.trustcomponent.com/trustcaptcha/2.1.x/trustcaptcha.cjs.min.js"></script>

Universal Module Definition (umd)
<script src="https://cdn.trustcomponent.com/trustcaptcha/2.1.x/trustcaptcha.umd.min.js"></script>

Fügen Sie nun das CAPTCHA-Widget – den sogenannten trustcaptcha-component-HTML-Tag – in ein beliebiges HTML-Formular ein:

example.html

HTML

<form>
  <!-- your input fields -->
  <trustcaptcha-component
    sitekey="<your_site_key>"
  ></trustcaptcha-component>
  <!-- further input fields / submit button -->
</form>

<script>
  const trustcaptchaComponent = document.getElementsByTagName('trustcaptcha-component')[0];
  trustcaptchaComponent.addEventListener('captchaSolved', (event) => {
  console.log('Verification token:', event.detail); <!-- handle success -->
});
  trustcaptchaComponent.addEventListener('captchaFailed', (event) => {
  console.error(event.detail); <!-- handle error -->
});
</script>

Das CAPTCHA-Widget wird nun auf Ihrer JavaScript-Website angezeigt:

Benötigen Sie detaillierte Informationen zur JavaScript-CAPTCHA-Integration?
Detaillierte Anweisungen zur Integration von TrustCaptcha finden Sie in unserer JavaScript CAPTCHA-Integrationsanleitung. Ein vollständiges Integrationsbeispiel für das JavaScript CAPTCHA finden Sie in unserem CAPTCHA-Samples-Repository auf Github.

Andere Frontend-Technologie statt JavaScript?
Wenn Sie JavaScript nicht verwenden möchten oder mehrere Websites bzw. Anwendungen haben, können Sie hier ein anderes Framework oder eine andere Plattform auswählen. Wenn es von uns keine vorgefertigte Integration für Ihre bevorzugte Frontend-Technologie gibt, können Ihre Softwareentwickler das CAPTCHA selbst integrieren – mithilfe unserer Dokumentation – oder unser Support-Team nach einer vorgefertigten Integrationslösung fragen.

3. CAPTCHA-Ergebnis in Ihrem Backend validieren

Sobald das CAPTCHA abgeschlossen ist, nehmen Sie das Verifikationstoken und senden es an Ihr Backend. Rufen Sie in Ihrem Backend das CAPTCHA-Verifikationsergebnis von unseren Servern ab und validieren Sie das Ergebnis. Abhängig davon, wie hoch das Bot-Risiko ist, entscheiden Sie, wie Sie weiter vorgehen. Detaillierte Informationen zur Backend-Integration und Ergebnisvalidierung finden Sie in unserer Dokumentation.

Vorgefertigte Backend-Integrationen
Sie können eine unserer vorgefertigten Integrationen nutzen, um den CAPTCHA-Validierungsprozess in Ihren Backend-Service zu integrieren. Wenn es von uns keine vorgefertigte Integration für Ihre bevorzugte Backend-Technologie gibt, können Ihre Softwareentwickler das CAPTCHA selbst integrieren – mithilfe unserer Dokumentation – oder unser Support-Team nach einer vorgefertigten Integrationslösung fragen.

4. Glückwunsch 🎉

Sie sind jetzt durch TrustCaptcha geschützt – Glückwunsch!

FAQs

Was brauche ich, um TrustCaptcha auf einer reinen JavaScript-Webseite zu integrieren?

Du fügst das Widget-Skript in deine Seite ein, platzierst das CAPTCHA-Element innerhalb deines <form> und konfigurierst deinen Site Key. Anschließend muss dein Backend den Verifikationstoken über unsere API prüfen, bevor du die Anfrage akzeptierst.

Funktioniert das nur mit JavaScript oder auch mit anderen Frameworks und CMS-Plattformen?

Die JavaScript-Integration funktioniert auf jeder Webseite, die JavaScript ausführen kann. Wenn du eine Plattform wie WordPress, TYPO3, Magento, Keycloak oder ein Framework wie Angular/React/Vue nutzt, kannst du alternativ auch ein fertiges Plugin oder einen Wrapper verwenden.

Warum muss das CAPTCHA innerhalb eines <form> eingebunden werden?

Weil das Widget für die Arbeit mit Formularen ausgelegt ist: Es erstellt automatisch ein verborgenes Token-Feld und verknüpft den Verifikationsablauf mit diesem <form>. Wenn es nicht innerhalb eines <form> liegt, kann es nicht korrekt funktionieren.

Wie bekomme ich den Verifikationstoken und sende ihn an meinen Server?

Das Widget fügt deinem <form> automatisch ein verborgenes Input-Feld hinzu (standardmäßig mit dem Namen "tc-verification-token"). Wenn du das Formular normal abschickst, wird der Verifikationstoken automatisch mitgesendet. Wenn du das Formular individuell sendest (z. B. per AJAX), kannst du das Hidden Field auslesen oder auf das Event "captchaSolved" hören.

Brauche ich trotzdem eine serverseitige Validierung oder reicht das Frontend-Widget?

Du solltest immer serverseitig validieren. Das Frontend-Widget erzeugt nur einen Verifikationstoken; dein Backend muss diesen Verifikationstoken über unsere API prüfen, um eine sichere Entscheidung zu treffen.

Können wir die JavaScript-Datei selbst hosten, statt sie von eurem CDN zu laden?

Ja. Du kannst die JavaScript-Datei auf deiner eigenen Infrastruktur hosten und damit externe Abhängigkeiten reduzieren. Wenn du selbst hostest, bist du dafür verantwortlich, die Datei zu aktualisieren, wenn du Bugfixes und Verbesserungen übernehmen möchtest.

Wie richten wir autorisierte Webseiten (Domains) für Produktion und Entwicklung ein?

Trage die Domain oder Subdomain ein, die du schützen möchtest (z. B. "example.com" oder "app.example.com"). Für lokale Tests kannst du "localhost" oder eine IP-Adresse eintragen. Verwende dabei kein Protokoll, keine Ports, keine Pfade und keine Query-Parameter. Wildcard-Domains sind standardmäßig nicht aktiviert und können bei Bedarf über den Support freigeschaltet werden.

Kann ich mehrere CAPTCHAs auf derselben Seite verwenden?

Ja, das ist möglich. Empfohlen ist ein CAPTCHA pro <form>. Falls du mehrere CAPTCHAs innerhalb desselben <form> verwendest, solltest du unterschiedliche Token Field Names setzen, um Konflikte zu vermeiden.

Leads verlieren wegen CAPTCHAs?

TrustCaptcha blockiert Spam und Bots – nicht Ihre Kunden. Keine Rätsel, DSGVO-konform, in der EU gehostet.

Rätsel-freie UX

Läuft im Hintergrund, während Besucher tippen – so schließen mehr Personen Ihre Formulare ab und weniger brechen ab.

DSGVO-ready

EU-gehostet und privacy-first: keine Cookies, verschlüsselte Übertragung, automatische Bereinigung – inklusive sofort nutzbarer rechtlicher Ressourcen.

Mehrstufige Sicherheit

Adaptive Schutzmechanismen plus intelligentes Risiko-Scoring stoppen Missbrauch frühzeitig – selbst bei plötzlichen Angriffsspitzen.

Volle Kontrolle

Stellen Sie die Sensitivität ein, definieren Sie Allow-/Block-Listen und nutzen Sie Geoblocking – Sie entscheiden, wie streng die Verifizierung sein soll.

Schützen Sie Ihre JavaScript-Anwendung mit TrustCaptcha – in nur wenigen Schritten!

EU-hosted & DSGVO-ready
Keine Rätsel
14 Tage kostenlos testen

Loslegen Vertrieb kontaktieren