Technische Details des Frontends

Nachfolgend wird beschrieben, wie Sie Trustcaptcha in Ihre Webseite einbauen.

Unterstützte Technologien

Sie können Trustcaptcha grundsätzlich mit allen gängigen Technologien und Frameworks verwenden, die auf JavaScript basieren. Unterstützt werden sowohl Server-Side-Rendering (SSR), Static-Site-Generation (SSG) und Single-Page-Applications (SPA). Eine Anleitung zur Integration finden Sie hier.

Nachfolgend finden Sie eine aktuelle Liste mit derzeit bereitgestellten Bibliotheken:

Angular

Javascript

React

Vue

Verwendung

Nachfolgend erfahren Sie, wie das grundlegende Konzept der Implementierung der Trustcaptcha-Komponente in Ihrem Frontend funktioniert.

Trustcaptcha-Komponente

So oder so ähnlich kann die Implementierung der Trustcaptcha-Komponente in Ihrer Webseite aussehen. Die konkrete Implementation entnehmen Sie bitte dem jeweiligen Tutorial, das zu Ihrer Programmiersprache oder Framework passt.

Bitte beachten Sie, dass die Trustcaptcha-Komponente sich innerhalb eines form-Elementes befinden muss. Geben Sie des Weiteren den site-key Ihres CAPTCHAs an.

Die Trustcaptcha-Komponente enthält eine Reihe von Eigenschaften, Methoden und Ereignisse. Nachfolgend finden Sie eine Aufstellung aller vorhandenen Eigenschaften und Ereignisse.

Name	Typ	Beschreibung
sitekey	Eigenschaft	Sitekey des CAPTCHA. Diesen finden Sie auf der Verwaltungsseite Ihres CAPTCHA.
width v1.4+	Eigenschaft	Bereite der Trustcaptcha-Komponente. Verfügbare Einstellungen: fixed (feste, maximale Breite), full (maximal mögliche Breite) Standard: fixed
language	Eigenschaft	Anzeigesprache der Trustcaptcha-Komponente. Verfügbare Sprachen / Modi: auto (Automatische Spracherkennung, Fallback Englisch), ar (Arabisch), be (Belarussisch), bg (Bulgarisch), bs (Bosnisch), ca (Katalanisch), cs (Tschechisch), da (Dänisch), de (Deutsch), el (Griechisch), en (Englisch), es (Spanisch), et (Estnisch), fi (Finnisch), fr (Französisch), hi (Hindi), hr (Kroatisch), hu (Ungarisch), it (Italienisch), ko (Koreanisch), lb (Luxemburgisch), lt (Litauisch), lv (Lettisch), mk (Mazedonisch), nl (Niederländisch), no (Norwegisch), pl (Polnisch), pt (Portugiesisch), ro (Rumänisch), ru (Russisch), sk (Slowakisch), sl (Slowenisch), sq (Albanisch), sr (Serbisch), sv (Schwedisch), tr (Türkisch), uk (Ukrainisch), zh (Chinesisch). Standard: auto (Automatische Spracherkennung)
theme	Eigenschaft	Anzeigemodus der Trustcaptcha-Komponente. Verfügbare Modi: light (Hell), dark (Dunkel), media (Geräteeinstellung) Standard: light (Hell)
autostart	Eigenschaft	Einstellung, ob das CAPTCHA automatisch starten soll. Verfügbare Einstellungen: true, false Standard: true
license v1.6+	Eigenschaft	Lizenzschlüssel für besondere Funktionen wie 'slider', 'hideBranding' oder 'invisible'. Den Lizenzschlüssel finden Sie auf der Verwaltungsseite Ihres CAPTCHA.
slider v1.7+	Eigenschaft	Einstellung, ob der Slider angezeigt werden soll. Voraussetzung: Funktion muss im Captcha Preisplan enthalten sein und der dazugehörige Lizenzschlüssel bei der Implementierung angegeben werden. Verfügbare Einstellungen: disabled, inline, popup Standard: disabled
hide-branding v1.6+	Eigenschaft	Einstellung, ob das Trustcaptcha-Logo ausgeblendet werden soll. Voraussetzung: Funktion muss im Captcha Preisplan enthalten sein und der dazugehörige Lizenzschlüssel bei der Implementierung angegeben werden. Verfügbare Einstellungen: true, false Standard: false
invisible v1.6+	Eigenschaft	Einstellung, ob das CAPTCHA ausgeblendet werden soll. Voraussetzung: Funktion muss im Captcha Preisplan enthalten sein und der dazugehörige Lizenzschlüssel bei der Implementierung angegeben werden. Verfügbare Einstellungen: true, false Standard: false
bypass-token v1.3+	Eigenschaft	Für automatisierte Tests können in den Einstellungen Bypass-Keys erstellt werden, mit denen das CAPTCHA immer erfolgreich bestanden wird.
mode v1.3+	Eigenschaft	Stellen Sie den Datenmodus des CAPTCHA ein. Muss mit den Einstellungen des CAPTCHA übereinstimmen. Verfügbare Modi: standard, minimal (Minimaldatensatzmodus) Standard: standard
token-field-name v1.1+	Eigenschaft	Name des Feldes innerhalb des Formulars, in dem das Verifikationstoken nach erfolgreichem Abschluss des Verifikationsprozesses bereitgestellt wird. Standard: tc-verification-token
startVerification() v1.6.1+	Methode	Manueller Start der Trustcaptcha-Komponente.
reset()	Methode	Setzt die Trustcaptcha-Komponente zurück.
captchaStarted v1.6+	Ereignis	Wird ausgelöst, wenn das CAPTCHA gestartet wird.
captchaSolved	Ereignis	Wird ausgelöst, wenn das CAPTCHA erfolgreich gelöst wurde.
captchaFailed	Ereignis	Wird ausgelöst, wenn das Lösen des CAPTCHA fehlgeschlagen ist.
captchaReset v1.7+	Ereignis	Wird ausgelöst, wenn das Lösen des CAPTCHA fehlgeschlagen ist.

Der Verifikationstoken

Das Ereignis captchaSolved gibt beim erfolgreichen Lösen des CAPTCHAs den Verifikationstoken zurück. Auf diesen können Sie über $event.detail zugreifen. Speichern Sie diesen bei Bedarf zwischen und senden Sie ihn mit Ihren restlichen Formulardaten an Ihr Backend.

Sobald Sie den Verifikationstoken an Ihr Backend übermittelt haben, müssen Sie das Verifikationsergebnis abrufen und Ihr weiteres Vorgehen basierend darauf festlegen. Bitte schauen Sie sich hierzu das Tutorial Das Backend an.

Fehlermeldung

Wenn das CAPTCHA fehlschlägt, gibt die Trustcaptcha-Komponente über das captchaFailed Ereignis eine Fehlermeldung zurück. Diese können Sie nutzen, um weitere Schritte festzulegen oder den Fehler direkt zu beheben. Auf die Fehlermeldung können Sie über $event.detail zugreifen.

Die Fehlermeldung beinhaltet einen Fehlercode namens errorCode. Dieser gibt Auskunft über den eigentlichen Fehler und kann genutzt werden, um den Fehler direkt zu beheben oder eine Fehlerbehandlung zu implementieren.

Fehlercode (errorCode)	Beschreibung
UNKNOWN_ERROR	Unbekannter Fehler.
NO_FORM_FOUND	Kein Formular gefunden. Bitte beachten Sie, dass sich die Trustcaptcha-Komponente innerhalb eines Formularelements befinden muss.
COMMUNICATION_FAILURE	Kommunikation fehlgeschlagen. Es kann Probleme mit der Internetverbindung oder Fehler beim Trustcaptcha-Anbieter geben.
NO_SITE_KEY_SPECIFIED	Es wurde kein Site-Schlüssel angegeben. Bitte entnehme den Site-Schlüssel deinen Captcha-Einstellungen und hinterlege diese auf deiner Website.
SITE_KEY_NOT_VALID	Der Site-Schlüssel ist nicht gültig. Bitte überprüfen Sie den gespeicherten Site-Schlüssel.
MODES_NOT_MATCHING	Der eingestellte CAPTCHA-Modus der Trustcaptcha-Komponente stimmt nicht mit dem in den CAPTCHA-Einstellungen eingestellten Modus überein.
CAPTCHA_NOT_ACCESSIBLE	Das CAPTCHA ist nicht zugänglich. Bitte überprüfen Sie, ob die Domain oder IP-Adresse Ihrer Website in den CAPTCHA-Einstellungen aufgeführt ist.
POW_FAILURE	Die kryptografischen Aufgaben wurden vom Client nicht korrekt gelöst.
PAYMENT_REQUIRED	Das Captcha auf Grund fehlender Bezahlung und eines limitierten Preisplans gesperrt. Bitte prüfen Sie ihren Preisplan und Zahlungsstatus oder wenden Sie sich an den Support.
LOCKED	Das Captcha ist gesperrt. Bitte wenden Sie sich an den Support.
LICENSE_INVALID	Der angegebene Lizenzschlüssel ist ungültig oder stimmt nicht mit Ihrem Captcha / dem angegebenen siteKey überein. Bitte prüfen Sie den angegebenen Lizenzschlüssel.
OPTION_NOT_AVAILABLE	Die ausgewählte Funktion, beispielsweise 'hideBranding'oder 'invisible' steht aktuell nicht nur Verfügung. Bitte prüfen Sie Ihren aktuellen Preisplan und den angegeben Lizenzschlüssel.

Hilfreiche Informationen

Hier finden Sie hilfreiche Tipps und Tricks rund um die Integration der Trustcaptcha-Komponente in Ihr Frontend.

Autostart konfigurieren

Grundsätzlich startet der Verifikationsprozess automatisch mit der Eingabe oder dem Fokus von Eingabefeldern, die sich innerhalb des gleichen Form-Elementes befinden. Sollte das Verhalten für ausgewählte Felder explizit nicht erwünscht sein, lässt sich dies ausschalten mit dem setzen der Eigenschaft data-autostart="false" auf das geweilige Eingabefeld.

Wenn Sie den Autostart komplett für alle Eingabefelder deaktivieren möchten, setzen Sie einfach die Eigenschaft autostart="false" direkt auf die Trustcaptcha-Komponente.

Veröffentlichungshinweise

Hier sehen Sie alle Änderungen und Anpassungen an der Trustcaptcha-Frontend-Bibliothek.

Version	Datum	Änderungen
1.7.3	Nov 19, 2024	Hinzugefügt: Statische UMD-JavaScript-Bundles ab Version 1.7 bereitstellen Hinzugefügt: Cache-Regeln für statische Assets Geändert: Verbesserte Proof-of-Work- und Datenschutzmaßnahmen
1.7.2	Nov 8, 2024	Aktualisiert: Links in den README.md-Dateien
1.7.1	Nov 5, 2024	Hinzugefügt: Statische CJS-JavaScript-Bundles ab Version 1.7 bereitstellen Hinzugefügt: Maßnahmen zur zukünftigen Optimierung der Captcha-Box Geändert: Unternehmens-Webseite durch Datenschutz-URL ersetzt
1.7.0	Nov 1, 2024	Hinzugefügt: Neue Sicherheitsmaßnahme mit Schieberegler in der Captcha-Box Hinzugefügt: Öffentliches JavaScript-Ereignis captchaReset() Geändert: Verbesserte Cache-Methoden zur Steigerung der Ladeleistung statischer JavaScript-Bundle-Dateien Geändert: Verbesserte Textminimierung und -komprimierung zur Steigerung der Ladeleistung Geändert: Codeoptimierungen zur Reduzierung der Codegröße Geändert: Verbesserung von Datenschutzmaßnahmen Entfernt: Sprachunterstützung für Armenisch (hy), Aserbaidschanisch (az), Bengalisch (bn), Hebräisch (he), Indonesisch (id), Japanisch (ja), Kasachisch (kk), Malaiisch (ms), Persisch (fa), Swahili (sw), Tagalog (tl), Tamil (ta), Thailändisch (th), Urdu (ur), Vietnamesisch (vi) Aktualisiert: Interne Abhängigkeiten aktualisiert
1.6.1	Oct 24, 2024	Hinzugefügt: Öffentliche JavaScript-Funktion startVerification(), um die Captcha-Box manuell zu starten Behoben: StencilJs auf Version 4.17.2 herabgestuft, um Probleme mit Vue zu beheben
1.6.0	Oct 17, 2024	Hinzugefügt: Option zum Ausblenden des Brandings in der Captcha-Box Hinzugefügt: Unsichtbare Captcha-Box-Option Hinzugefügt: Öffentliches JavaScript-Ereignis captchaStarted() Entfernt: Altes Button-Design entfernt Aktualisiert: StencilJS auf Version 4.20.0 aktualisiert
1.5.0	Sep 7, 2024	Hinzugefügt: Fehlermeldung, wenn das Captcha gesperrt ist Hinzugefügt: Fehlermeldung, wenn das Captcha vorübergehend aufgrund von Zahlungsproblemen gesperrt ist
1.4.2	Aug 14, 2024	Hinzugefügt: Sprachunterstützung für Albanisch (sq), Armenisch (hy), Aserbaidschanisch (az), Bosnisch (bs), Bulgarisch (bg), Katalanisch (ca), Estnisch (et), Hebräisch (he), Kasachisch (kk), Mazedonisch (mk), Malaiisch (ms), Persisch (fa), Serbisch (sr), Slowenisch (sl), Tamil (ta), Ukrainisch (uk) Geändert: Verbesserte Kompatibilität für Screenreader
1.4.1	Aug 11, 2024	Behoben: Problem mit den bereitgestellten statischen ESM-JavaScript-Bundle-Dateien
1.4.0	Aug 11, 2024	Hinzugefügt: Neues, kästchenförmiges Design Hinzugefügt: Captcha-Box-Breite mit den Optionen 'voll' und 'fixiert' Hinzugefügt: Sprachunterstützung für: Arabisch (ar), Bengalisch (bn), Chinesisch (zh), Hindi (hi), Indonesisch (id), Japanisch (ja), Koreanisch (ko), Swahili (sw), Tagalog (tl), Thailändisch (th), Urdu (ur), Vietnamesisch (vi) Hinzugefügt: Statische ESM-JavaScript-Bundles für Version 1.2, 1.3 und 1.4 Geändert: Verbesserte Fehlermeldungsanzeige bei Fehlern vom Typ COMMUNICATION_FAILURE Veraltet: Das aktuelle Button-Design wird in Version 1.6.0 entfernt
1.3.2	Jul 3, 2024	Geändert: Verbesserte Captcha-Box-Gestaltung Behoben: Fehler bei der automatischen Spracherkennung
1.3.1	May 3, 2024	Behoben: Problem im Build-Prozess
1.3.0	May 3, 2024	Hinzugefügt: Automatische Spracherkennung Hinzugefügt: Modus für minimale Datenerfassung Hinzugefügt: Bypass-Schlüssel für Testzwecke Behoben: Falsche Fehlerinformation bei einer 422-Serverantwort
1.2.0	Mar 27, 2024	Hinzugefügt: Dynamische Namen für das Honeypot-Feld Behoben: Proof-of-Work-Berechnung in Web-Worker ausgelagert, um Leistungsprobleme in verschiedenen Frameworks (wie Angular) zu beheben und Proof-of-Work effizienter zu gestalten Behoben: Datenschutz- und Leistungsproblem bei Datenerfassung und -analyse Behoben: Cursor-Gestaltung auf deaktivierten Schaltflächen Aktualisiert: StencilJS auf Version 4.13.0 aktualisiert Aktualisiert: Interne Abhängigkeiten aktualisiert
1.1.1	Mar 18, 2024	Aktualisiert: Datenschutzlink in der Captcha-Box Aktualisiert: Links in den README.md-Dateien
1.1.0	Feb 29, 2024	Hinzugefügt: Sprachunterstützung für Belarussisch (be), Kroatisch (hr), Tschechisch (cs), Dänisch (da), Niederländisch (nl), Finnisch (fi), Französisch (fr), Griechisch (el), Ungarisch (hu), Italienisch (it), Lettisch (lv), Litauisch (lt), Luxemburgisch (lb), Norwegisch (no), Polnisch (pl), Portugiesisch (pt), Rumänisch (ro), Russisch (ru), Slowakisch (sk), Spanisch (es), Schwedisch (sv), Türkisch (tr) Hinzugefügt: Feldname des Verifizierungstokens anpassbar Hinzugefügt: Abschaltmöglichkeit des Autostarts für bestimmte Eingabefelder Geändert: Design und Verhalten der Ladeanimationsanzeige Aktualisiert: StencilJS auf Version 4.12.4 aktualisiert
1.0.1	Jan 23, 2024	Refaktoriert: Proof-of-Work-Berechnung Refaktoriert: Überflüssiger Code entfernt Aktualisiert: StencilJS auf Version 4.11.0 aktualisiert
1.0.0	Jan 12, 2024	Veröffentlichungsversion
0.0.4	Jan 11, 2024	Open-Beta
0.0.3	Jan 11, 2024	Open-Beta
0.0.2	Nov 23, 2024	Open-Beta
0.0.1	Aug 15, 2024	Closed-Beta