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	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	Eigenschaft	Lizenzschlüssel für besondere Funktionen wie 'slider', 'hideBranding' oder 'invisible'. Den Lizenzschlüssel finden Sie auf der Verwaltungsseite Ihres CAPTCHA.
slider	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	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	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	Eigenschaft	Für automatisierte Tests können in den Einstellungen Bypass-Keys erstellt werden, mit denen das CAPTCHA immer erfolgreich bestanden wird.
mode	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	Eigenschaft	Name des Feldes innerhalb des Formulars, in dem das Verifikationstoken nach erfolgreichem Abschluss des Verifikationsprozesses bereitgestellt wird. Standard: tc-verification-token
startVerification()	Methode	Manueller Start der Trustcaptcha-Komponente.
reset()	Methode	Setzt die Trustcaptcha-Komponente zurück.
captchaStarted	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	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.