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. Sie können beispielsweise die Sprache oder die Position des Logos angeben.

Unter Antwort des Nutzers überprüfen erfahren Sie, ob der Nutzer das CAPTCHA korrekt eingegeben hat.

Wettkampf automatisch an eine Schaltfläche binden

Die einfachste Methode zur Verwendung des unsichtbaren reCAPTCHA-Widgets auf Ihrer Seite besteht darin, die erforderliche JavaScript-Ressource und einige Attribute zu Ihrer HTML-Schaltfläche hinzuzufügen. Die erforderlichen Attribute sind ein Klassenname (g-recaptcha), Ihr Websiteschlüssel im Attribut data-sitekey und der Name eines JavaScript-Callbacks, mit dem das Captcha im Attribut data-callback ausgefüllt werden muss.

<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 mit dem HTTPS-Protokoll geladen werden und kann von jedem Punkt der Seite uneingeschränkt eingefügt werden.

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

Sie können die Bindung aufschieben, indem Sie die Onload-Callback-Funktion angeben und der JavaScript-Ressource Parameter hinzufügen. Das funktioniert genauso wie die normale reCAPTCHA-Abfrage.

Rufen Sie die Herausforderung programmatisch auf.

Die reCAPTCHA-Überprüfung kann programmatisch aufgerufen werden, indem die Aufgabe in einem div-Element mit dem Attribut data-size="invisible" gerendert und programmatisch „execute“ 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 mit einer JavaScript-Methode auf.

    grecaptcha.execute();

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

Konfiguration

Parameter der JavaScript-Ressource (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.

g-recaptcha-Tag-Attribute und grecaptcha.render-Parameter

g-recaptcha-Tag-Attribut Parameter „grecaptcha.render“ Wert Standard Beschreibung
Daten-Websiteschlüssel sitekey Ihren Websiteschlüssel.
Daten-Badge Auszeichnung Unten rechts unten links inline Unten rechts Optional. Positioniere das reCAPTCHA-Logo neu. Mit „inline“ können Sie ihn mit CSS positionieren.
data-size Größe unsichtbar Optional. Wird verwendet, um ein unsichtbares Widget zu erstellen, das an ein div-Element gebunden ist und programmatisch ausgeführt wird.
data-tabindex tabIndex  0 Optional. Der Tabindex der Herausforderung. 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 false Optional. Für Plug-in-Inhaber, die vorhandene reCAPTCHA-Installationen auf einer Seite nicht beeinträchtigen. Bei „true“ ist diese reCAPTCHA-Instanz Teil eines separaten ID-Bereichs.

JavaScript API

Methode 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 und nicht auf einer Schaltfläche befindet.
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>