Erste Schritte

Die Integration von CaptchaFox wird nur wenig Zeit in Anspruch nehmen. Führen Sie die folgenden Schritte aus, um das Widet zu Ihrer Anwendung hinzuzufügen.

Schlüssel erhalten

CaptchaFox-Portal öffnen

Erstellen Sie ein Konto (opens in a new tab) oder loggen Sie sich (opens in a new tab) auf dem CaptchaFox-Portal ein.

Seitenschlüssel kopieren

Navigieren Sie zur Registerkarte Seiten im Portal und erstellen Sie eine neue Seite. Kopieren Sie den in der Konfiguration aufgeführten Seitenschlüssel.

Geheimschlüssel kopieren

Gehen Sie im Portal auf die Registerkarte Organisation und kopieren Sie den Geheimschlüssel.

JavaScript-Tag integrieren

Um ein Captcha-Widget auf einer HTML-Seite mit CaptchaFox darzustellen, werden zwei Teile des clientseitigen Codes benötigt. Durch Nutzung unserer vorgefertigten Plugins und Bibliotheken wird dieser Prozess vereinfacht.

Wählen Sie die Art der Applikation aus, in die CaptchaFox eingebunden werden soll:

WordPress Single Page Application (React, Vue, etc.)Drupal CMS Keycloak CS-Cart Manuelle Integration

Manuelle Integration

Fügen Sie den Tag zu Ihrer HTML-Seite hinzu

Die Skript-Tags können innerhalb des head oder body Tags platziert werden.

<script async defer src="https://cdn.captchafox.com/api.js"></script>

Container-Element hinzufügen

Fügen Sie ein leeres HTML-Element an der Stelle ein, an der das CaptchaFox-Widget dargestellt werden soll. Dieses Element (z.B. ein <div>) benötigt die Klasse captchafox und das Attribut data-sitekey mit Ihrem zuvor kopierten sitekey.

<div class="captchafox" data-sitekey="IHR_SITEKEY"></div>

Nach einer erfolgreichen Captcha-Prüfung wird automatisch ein verstecktes Eingabefeld mit dem Antwort-Token hinzugefügt. Dieses Token wird dann in die Formulardaten aufgenommen, die an Ihren Server gesendet werden, wenn ein Benutzer das Formular abschickt, und kann auf der Serverseite mit dem POST-Parameter cf-captcha-response abgerufen werden.

Im Folgenden finden Sie ein Beispiel für eine einfache HTML-Seite mit einem Formular, das durch CaptchaFox geschützt ist:

<html>
  <head>
    <title>CaptchaFox Demo</title>
    <script async defer src="https://cdn.captchafox.com/api.js"></script>
  </head>
  <body>
    <form action="IHR_SERVER_ENDPUNKT" method="POST">
      <input type="text" name="email" placeholder="Email" />
      <input type="password" name="password" placeholder="Passwort" />
      <div class="captchafox" data-sitekey="IHR_SITEKEY"></div>
      <button type="submit">Abschicken</button>
    </form>
  </body>
</html>

Antwort-Token auf dem Server verifizieren

Nachdem Sie das Antwort-Token auf dem Server erhalten haben, müssen Sie mit dem API-Endpunkt /siteverify überprüfen, ob es echt und gültig ist. Einmal ausgestellte Token können nur für eine einzige Überprüfung verwendet werden und müssen innerhalb eines kurzen Zeitraums authentifiziert werden.

https://api.captchafox.com/siteverify

Der API-Endpunkt erwartet die folgenden Parameter unter Verwendung des Content-Typs application/x-www-form-urlencoded.

POST Parameter	Beschreibung
secret	Der Geheimschlüssel Ihrer Organisatioin
response	Der Antwort-Token vom Widget
sitekey	(Optional) Sitekey, der für die Ausstellung des Tokens verwendet wurde
remoteIp	(Optional) IP Adresse des Nutzers, der den Token einlösen möchte

Beispiel mit curl:

curl https://api.captchafox.com/siteverify \
  -X POST \
  -d "response=ANTWORT_TOKEN&secret=IHR_SECRET"

Verifizierungsantwort

Der API-Endpunkt antwortet mit einem JSON-Objekt, das Ihnen mitteilt, ob das CAPTCHA-Token gültig ist.

{
    "success": true|false, // Ob die Überprüfung erfolgreich war oder nicht
    "challenge_ts": string, // ISO-Zeitstempel der Herausforderung (yyyy-MM-dd'T'HH:mm:ssZZ). Nur bei Erfolg enthalten.
    "hostname": string, // Hostname der Seite, auf der die Herausforderung gelöst wurde. (Optional)
    "error-codes": [...], // Liste der Fehlercodes. Nur enthalten, wenn success "false" ist.
    "insights": {...} // Details über die Verifizierung. (Enterprise Pläne)
}

⚠️

Der Erhalt eines Statuscodes 200 von der API bedeutet nicht, dass die Überprüfung erfolgreich war. Verwenden Sie das zurückgegebene Feld success, um den Überprüfungsstatus zu bestimmen.

Fehlercodes

Fehlercode	Beschreibung
missing-input-secret	Der Geheimschlüssel fehlt.
invalid-input-secret	Der Geheimschlüssel ist ungültig oder falsch formatiert.
missing-input-response	Der Antwort-Token fehlt.
invalid-input-response	Der Antwort-Token ist ungültig oder fehlerhaft.
bad-request	Die Anfrage ist ungültig oder fehlerhaft formuliert.
timeout-or-duplicate	Die Anfrage ist nicht mehr gültig.

Wir bemühen uns um höchstmögliche Verfügbarkeit, dennoch können Ausfallzeiten oder Unterbrechungen nicht ausgeschlossen werden.
Im Falle eines kritischen Serverfehlers sollte der Nutzer dennoch in der Lage sein, die gewünschte Aktion durchzuführen. Wir empfehlen Ihnen, die Anfrage in Ihrem eigenen Code zu umgehen, wenn der Server-Statuscode größer als 200 ist und diese zu protokollieren.

Einführung Von reCAPTCHA zu CaptchaFox wechseln