Unsichtbares reCAPTCHA

Auf dieser Seite wird erläutert, wie Sie das unsichtbare reCAPTCHA auf Ihrer Webseite aktivieren und anpassen.

Zum Aufrufen des unsichtbaren reCAPTCHA haben Sie folgende Möglichkeiten:

Unter Konfigurationen erfahren Sie, wie Sie das unsichtbare reCAPTCHA anpassen. Beispielsweise können Sie die Sprache oder die Position des Logos angeben.

Wie Sie herausfinden, ob der Nutzer das CAPTCHA erfolgreich eingegeben hat, erfahren Sie unter Antwort des Nutzers überprüfen.

Wettkampf automatisch an eine Schaltfläche binden

Am einfachsten können Sie das unsichtbare reCAPTCHA-Widget auf Ihrer Seite verwenden, indem Sie die erforderliche JavaScript-Ressource und einige Attribute zu Ihrer HTML-Schaltfläche hinzufügen. Die erforderlichen Attribute sind ein Klassenname "g-recaptcha", Ihr Websiteschlüssel im Attribut data-sitekey und der Name eines JavaScript-Callbacks, mit dem die Vervollständigung des Captcha im Attribut data-callback verarbeitet wird.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

Das Skript muss mithilfe des HTTPS-Protokolls geladen werden und kann von jeder Stelle auf der Seite ohne Einschränkung eingefügt werden.

Binden Sie die Herausforderung programmatisch an eine Schaltfläche oder rufen Sie die Herausforderung auf.

Sie können die Bindung zurückstellen, indem Sie Ihre Onload-Callback-Funktion angeben und der JavaScript-Ressource Parameter hinzufügen. Das funktioniert genauso wie bei der normalen reCAPTCHA-Aufgabe.

Die Herausforderung programmatisch aufrufen.

Ein programmatischen Aufruf der reCAPTCHA-Überprüfung kann erreicht werden, indem die Aufgabe in einem div-Element mit dem Attribut data-size="invisible" gerendert und „execute“ programmatisch aufgerufen wird.

  1. Erstellen Sie ein div-Element mit data-size="invisible".

    <div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

  2. Rufen Sie grecaptcha.execute über eine JavaScript-Methode auf.

    grecaptcha.execute();

    Wenn dein Callback ausgeführt wird, kannst du die grecaptcha.render-Methode über die JavaScript API aufrufen.

    <ph type="x-smartling-placeholder">

Konfiguration

JavaScript-Ressourcenparameter (api.js)

Parameter Wert Beschreibung
onload Optional Der Name Ihrer Callback-Funktion, die ausgeführt werden soll, sobald alle Abhängigkeiten geladen wurden.
render explicit
onload		 Optional Gibt an, ob das Widget explizit gerendert werden soll. Standardmäßig ist Onload verwendet. Dadurch wird das Widget im ersten g-recaptcha-Tag, das gefunden wird, gerendert.
hl Siehe Sprachcodes Optional Erzwingt das Rendern des Widgets in einer bestimmten Sprache. Erkennt automatisch die Sprache des Nutzers.

Attribute des g-recaptcha-Tags und der Parameter „grecaptcha.render“

g-recaptcha-Tag-Attribut Parameter „grecaptcha.render“ Wert Default Beschreibung
Daten-Websiteschlüssel sitekey Ihren Websiteschlüssel.
Datenbadge Logo unten rechts, unten links inline unten rechts Optional. Positionieren Sie das reCAPTCHA-Logo neu. 'Inline' können Sie es mit CSS positionieren.
data-size Größe unsichtbar Optional. Wird zum Erstellen eines unsichtbaren Widgets verwendet, das an ein div-Element gebunden und programmatisch ausgeführt wird.
data-tabindex tabIndex  0 Optional. Der Tabindex der Aufgabe. Wenn andere Elemente auf Ihrer Seite tabindex verwenden, sollte sie so eingestellt werden, dass eine einfachere Navigation möglich ist.
data-callback callback Optional Der Name Ihrer Callback-Funktion, die ausgeführt wird, wenn der Benutzer eine erfolgreiche Antwort sendet. Das g-recaptcha-response -Token wird an Ihren Callback übergeben.
data-expired-callback expired-callback Optional Der Name Ihrer Callback-Funktion, die ausgeführt wird, wenn die Antwort reCAPTCHA abläuft und der Benutzer erneut eingeben muss.
data-error-callback error-callback Optional Der Name Ihrer Callback-Funktion, die ausgeführt wird, wenn reCAPTCHA einen Fehler feststellt (in der Regel die Netzwerkverbindung) und erst dann fortgesetzt werden kann, wenn die Verbindung wiederhergestellt ist. Wenn Sie hier eine Funktion angeben, müssen Sie den Nutzer informieren.
isoliert falsch Optional. Für Plug-in-Inhaber, vorhandene reCAPTCHA-Installationen auf einer Seite nicht zu beeinträchtigen. Bei Einstellung auf „true“ ist diese reCAPTCHA-Instanz Teil eines separaten ID-Bereichs.

JavaScript API

Method Beschreibung
grecaptcha.render(
container,
Parameter
Vererbt
) 		Rendert den Container als reCAPTCHA-Widget und gibt die ID des neu erstellten Widgets zurück.
Container
Das HTML-Element, das das reCAPTCHA-Widget darstellt Geben Sie entweder die ID des Containers (String) oder das DOM-Element selbst an.
Parameter
Ein Objekt, das Parameter als Schlüssel/Wert-Paare enthält, z. B. {„sitekey“: „your_site_key„, „theme“: „light“}. Siehe „grecaptcha.render“-Parameter
übernehmen
Verwenden Sie vorhandene data-*-Attribute für das Element, wenn der entsprechende Parameter nicht angegeben ist. Die Parameter haben Vorrang vor den Attributen.
grecaptcha.execute(
opt_widget_id
) 		Rufen Sie die reCAPTCHA-Prüfung programmatisch auf. Wird verwendet, wenn sich das unsichtbare reCAPTCHA auf einem div-Element befindet statt auf eine Schaltfläche.
opt_widget_id
Optionale Widget-ID. Falls kein Wert angegeben ist, wird standardmäßig das erste Widget erstellt.
grecaptcha.reset(
opt_widget_id
) 		Setzt das reCAPTCHA-Widget zurück.
opt_widget_id
Optionale Widget-ID. Falls kein Wert angegeben ist, wird standardmäßig das erste Widget erstellt.
grecaptcha.getResponse(
opt_widget_id
) 		Ruft die Antwort für das reCAPTCHA-Widget ab.
opt_widget_id
Optionale Widget-ID. Falls kein Wert angegeben ist, wird standardmäßig das erste Widget erstellt.

Beispiele

Explizites Rendern nach einem Onload-callback

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Unsichtbare reCAPTCHA-Abfrage nach clientseitiger Validierung aufrufen.

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>