React

Wenn Sie noch kein Konto bei uns haben, registrieren Sie sich bitte hier. Wenn Sie bereits ein Konto haben, melden Sie sich bitte an.

Erstellen Sie ein neues CAPTCHA oder wählen Sie ein bestehendes CAPTCHA aus. Auf Ihrem Dashboard sehen Sie eine Übersicht über alle bestehenden CAPTCHAs, auf die Sie Zugriff haben.

Wenn Sie noch unsicher sind, ob TrustCaptcha das Richtige für Sie ist, können Sie unseren Service 14 Tage lang risikofrei und kostenlos testen.

In der CAPTCHA-Übersicht finden Sie alle wichtigen Informationen, Statistiken und Einstellmöglichkeiten. Hier finden Sie auch Ihren Site-Key, den Secret-Key und – falls verfügbar – den License-Key. Diese benötigen Sie später bei der Integration Ihres CAPTCHAs.

Fügen Sie Ihre Websites hinzu
Auf Ihr CAPTCHA darf nur von Websites zugegriffen werden, die Sie ausdrücklich autorisieren. Um Websites für den Zugriff auf das CAPTCHA freizuschalten, tragen Sie alle Websites, auf denen Sie das CAPTCHA-Widget integrieren möchten, in den CAPTCHA-Sicherheitsregeln ein.

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

Installieren Sie zunächst unser TrustCaptcha React-Paket:

npm i @trustcomponent/trustcaptcha-react

Fügen Sie nun das CAPTCHA-Widget – die TrustcaptchaComponent – in ein beliebiges HTML-Formular ein:

import {TrustcaptchaComponent} from "@trustcaptcha/trustcaptcha-react";

function App() {

  function handleSuccess(verificationToken) { /* handle success */ }

  function handleError(error) { /* handle error */ }

  return (
    <div>
      <form>
        <!-- your input fields -->
        <TrustcaptchaComponent
          sitekey="<your_site_key>"
          onCaptchaSolved={event => handleSuccess(event.detail)}
          onCaptchaFailed={event => handleError(event.detail)}
        ></TrustcaptchaComponent>
        <!-- further input fields / submit button -->
      </form>
    </div>
  );
}

export default App;

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

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

Andere Frontend-Technologie statt React?
Wenn Sie React 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.

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.

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