Zum Hauptinhalt springen

2. Hinzufügen des Widgets

✅ Ein voll funktionsfähiges und ideales Frontend-Beispiel finden Sie am Ende dieser Seite.

Außerdem finden Sie Beispiele für Angular, React und Vue hier.

E-Mail-Adressen unabhängig überprüfen

Wenn Sie nur E-Mail-Adressen ohne CAPTCHA verifizieren möchten, benötigen Sie das Widget nicht. Weitere Informationen finden Sie unter "E-Mail-Adressen verifizieren".

Zencaptcha-Widget zu Ihrer Webseite hinzufügen​

Um das Zencaptcha-Widget in eine bestimmte Seite Ihrer Website zu integrieren, wie z.B. die Login-Seite, die Registrierungsseite, die Kontaktseite, die Newsletter-Seite, usw., müssen Sie zwei kleine Teile des clientseitigen Codes hinzufügen, um das Captcha-Widget zu rendern.

  1. Kopieren Sie den ersten Codeschnipsel und fügen Sie es in den Abschnitt <head> des HTML-Codes der Seite ein, auf der Sie das Widget anzeigen möchten.
In dem html:
<script src="https://www.zencaptcha.com/captcha/widget.js" onload="zencaptchaInit() async defer></script>
  1. Kopieren Sie den zweiten Code-Snippet und fügen Sie ihn an der Stelle in Ihr HTML-Code ein, an der das Widget erscheinen soll. Sie können den .zenc-captcha-Container in ein HTML-Formular oder innerhalb von
    einbinden, um von Funktionen wie data-start="auto" oder data-start="focus" zu profitieren. Wenn ein Captcha erfolgreich gelöst wurde, wird automatisch ein verstecktes Token zu Ihrem Formular hinzugefügt, das Sie dann zur Überprüfung an Ihren Server senden müssen. Sie können es serverseitig mit dem POST-Parameter zenc-captcha-solution abrufen.
In dem html:
<div class="zenc-captcha" data-sitekey="SITEKEY-HIER-EINGEBEN"></div>
Vergessen Sie dies nicht

Ersetzen Sie SITEKEY-HIER-EINGEBEN aus dem obigen Ausschnitt durch Ihren eigenen sitekey.

Vollständiges Frontend-Beispiel​

Hier ist ein vollständiges Beispiel, wie Zencaptcha verwendet werden kann, um ein Registrierungsformular vor Missbrauch und Spam zu schützen. Beim Absenden des Formulars wird das Token zenc-captcha-solution zu den anderen POST-Daten hinzugefügt, nachdem das Captcha vollständig gelöst wurde.

<html>
  <head>
    <title>Zencaptcha Demo 1</title>
    <script src="https://www.zencaptcha.com/captcha/widget.js" onload="zencaptchaInit()" async defer></script>
  </head>
  <body>
    <form action="" method="POST">
      <input type="text" name="email" placeholder="E-mail" />
      <input type="password" name="password" placeholder="Passwort" />
      <div class="zenc-captcha" data-sitekey="SITEKEY-HIER-EINGEBEN"></div>
      <br />
      <input type="submit" value="Absenden" />
    </form>
  </body>
</html>

Lösung - Callback​

Optimales Verfahren

Verhindern Sie, dass Benutzer das Formular absenden, indem Sie ihre eigene Schaltfläche "Absenden" deaktivieren, bis das CAPTCHA erfolgreich abgeschlossen wurde. Sie können data-callback="myCallback" zum zenc-captcha-Container hinzufügen. Dieser wird sofort und automatisch aufgerufen, wenn das Captcha abgeschlossen ist.

`<div class="zenc-captcha" data-sitekey="SITEKEY-HIER-EINGEBEN" data-callback="zenCallback"></div>`

und erhalten Sie die Lösung (Token) in Javascript wie folgt:

Javascript
function zenCallback(solution) {
    //hier müssen Sie ihre Schaltfläche "Absenden" aktivieren
    console.log("Die Captcha-Lösung ist" + solution);
    //Sie könnten nun auch "solution" (das Token) mit den anderen Benutzereingaben an Ihr Backend senden
}

Die Captcha-Lösung erhalten​

Siehe den Punkt "Starten, Zurücksetzen und Löschen des Widgets" weiter unten. Sie können das Token (die Lösung aus dem CAPTCHA) mit dem obigen Callback-Beispiel abrufen oder es einfach bei Bedarf abrufen, wie hier:

Javascript
zencap.getResponse();
Weitere mögliche CAPTCHA-Werte

Es gibt 6 mögliche CAPTCHA-Werte, wenn die Lösung noch nicht existiert, wenn sie abgelaufen ist, wenn sie gerade geladen wird oder wenn ein anderer Fehler aufgetreten ist: NOTSTARTED, INCONSISTENT, ERROR, LOADING, NOTFINISHED, EXPIRED. Damit sollen Sie die Lösung nur an Ihr Backend senden, wenn die Lösung keinen dieser Werte aufweist. (Siehe Code-Beispiel Zencaptcha Demo 2 am Ende dieser Seite)

Starten, Zurücksetzen und Löschen des Widgets​

Wenn Sie das Widget programmatisch starten oder zurücksetzen wollen, sollten Sie nicht vergessen onload="zencaptchaInit()" zum Skript-Tag hinzufügen.

Ändern Sie Ihr html:
<script src="https://www.zencaptcha.com/captcha/widget.js" onload="zencaptchaInit()" async defer></script>

In Ihrem Javascript: Sie können die Verifizierung durch das Widget mit zencap.start(); automatisch starten und es mit zencap.reset(); zurücksetzen. Sie können auch die Lösung mit zencap.getResponse(); erhalten. Sie können das Widget mit zencap.destroy(); zerstören. Durch das Zerstören des Widgets werden das Widget und alle DOM-Elemente entfernt und alle laufenden Zencaptcha-Prozesse beendet.

Ideales Frontend-Beispiel​

Hier ist ein komplettes ideales Beispiel für die Verwendung von Zencaptcha im Frontend, indem die Lösung vom CAPTCHA abgerufen wird und die Lösung und andere Daten erst dann an das Backend gesendet werden, wenn das CAPTCHA seinen Verifizierungsprozess abgeschlossen hat. Außerdem wird das Widget zurückgesetzt, wenn es serverseitig überprüft wurde, aber ein Fehler aufgetreten ist. Der Benutzer muss dann erneut auf das Widget klicken, um zu beweisen, dass es sich nicht um einen Roboter handelt.

<!DOCTYPE html>
  <head>
    <title>Zencaptcha Demo 2</title>
    <script src="https://www.zencaptcha.com/captcha/widget.js" onload="zencaptchaInit()" async defer></script>
  </head>
<body>
  <h1>Anmelden</h1>
  <form>
    <label for="email">E-mail:</label>
    <input type="email" id="email" required><br><br>
    <label for="password">Passwort:</label>
    <input type="password" id="password" required><br><br>
    <div class="zenc-captcha" data-sitekey="SITEKEY" data-callback="zenCallback"></div>
    <input type="button" value="Senden" onclick="sendData()">
  </form>
</body>
</html>
<script>
    function zenCallback(solution) {
        //Optional: Sie können die Schaltfläche "Senden" jetzt anklickbar machen - Alternativ können Sie die Schaltfläche natürlich von Anfang an anklickbar machen und dem Benutzer eine Warnung anzeigen, wenn keine Lösung gefunden wird, wie unten in der Funktion sendData().
        //Sie können die Lösung (Token) auch wie folgt erfassen: let aktuellertoken = solution;
    }

    function sendData() {
      var email = document.getElementById("email").value;
      var password = document.getElementById("password").value;

      var zencaptchatoken = zencap.getResponse(); //Abrufen der CAPTCHA-Lösung
      if(zencaptchatoken=="NOTSTARTED" || zencaptchatoken=="NOTFINISHED" || zencaptchatoken=="EXPIRED" || zencaptchatoken=="INCONSISTENT" || zencaptchatoken=="ERROR" || zencaptchatoken=="LOADING"){
          //nicht fortfahren, da das Token aus der Verifizierung noch nicht fertig ist oder der Benutzer die Verifizierung noch nicht abgeschlossen hat - Hier können Sie eine Warnung anzeigen.
          alert("Verification not completed");
          return;
      }

      var data = {
        email: email,
        password: password,
        token: zencaptchatoken //Senden Sie die Zencaptcha-Lösung (Token) an Ihr Backend
      };
      
      // Senden Sie die Daten mit dem Token an Ihren Backend-Server, wo Sie einen API-Aufruf an /siteverify (unseren Server) tätigen müssen, um die Gültigkeit des Tokens zu überprüfen.
      fetch('http://your-backend-url.com/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
      })
      .then(function(response) {
        if (response.ok) {
          alert("Anmeldung erfolgreich!");
        } else {
          alert("Anmeldung fehlgeschlagen!");
          zencap.reset(); //das Widget wird zurückgesetzt, also muss der Nutzer die Überprüfung erneut durchführen
        }
      })
      .catch(function(error) {
        console.log(error);
      });
    }
  </script>