Diese Seite wurde von der Cloud Translation API übersetzt.

Unsichtbares reCAPTCHA

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

Sie haben folgende Möglichkeiten, das unsichtbare reCAPTCHA aufzurufen:

Die Herausforderung automatisch an eine Schaltfläche binden oder
Binden Sie die Aufgabe programmatisch an eine Schaltfläche oder
Challenge programmatisch aufrufen

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

Unter Antwort des Nutzers überprüfen erfahren Sie, ob der Nutzer das CAPTCHA erfolgreich gelöst hat.

Herausforderung automatisch an eine Schaltfläche binden

Die einfachste Methode, das unsichtbare reCAPTCHA-Widget auf Ihrer Seite zu verwenden, besteht darin, die erforderliche JavaScript-Ressource einzufügen und Ihrer HTML-Schaltfläche einige Attribute hinzuzufügen. Die erforderlichen Attribute sind ein Klassenname „g-recaptcha“, Ihr Websiteschlüssel im Attribut data-sitekey und der Name eines JavaScript-Callbacks, der den Abschluss des Captchas im Attribut data-callback verarbeitet.

<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.

Binde die Herausforderung programmatisch an eine Schaltfläche oder rufe sie 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.

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>

Rufen Sie „grecaptcha.execute“ über eine JavaScript-Methode auf.
```
grecaptcha.execute();
```
Wenn Ihr Callback ausgeführt wird, können Sie die Methode grecaptcha.render über die JavaScript-API aufrufen.
Ihre onload-Callback-Funktion muss definiert werden, bevor die reCAPTCHA API geladen wird. So verhindern Sie Race-Bedingungen:
- Ordnen Sie Ihre Skripte so an, dass zuerst mit dem Callback und dann mit reCAPTCHA
- Verwenden Sie die Parameter „async“ und „defer“ in den „script“-Tags.

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	grecaptcha.render-Parameter	Wert	Default	Beschreibung
`data-sitekey`	sitekey			Ihren Sitekey
`data-badge`	Logo	unten rechts, unten links inline	bottomright	Optional. Positionieren Sie das reCAPTCHA-Logo neu. 'Inline' können Sie es mit CSS positionieren.
`data-size`	Größe	unsichtbar		Optional. Wird verwendet, um ein unsichtbares Widget zu erstellen, das an ein Div-Element gebunden 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		falsch	Optional. Damit Plug-in-Inhaber bestehende reCAPTCHA-Installationen auf einer Seite nicht beeinträchtigen. Wenn diese Option aktiviert ist, 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 das unsichtbare reCAPTCHA in einem Div-Element statt in einer Schaltfläche angezeigt wird. `opt_widget_id` Optionale Widget-ID; wird standardmäßig das erste erstellte Widget verwendet, falls keine Angabe gemacht wird.
`grecaptcha.reset( opt_widget_id )`	Setzt das reCAPTCHA-Widget zurück. `opt_widget_id` Optionale Widget-ID. Standardmäßig wird das erste erstellte Widget verwendet, wenn nichts angegeben ist.
`grecaptcha.getResponse( opt_widget_id )`	Ruft die Antwort für das reCAPTCHA-Widget ab. `opt_widget_id` Optionale Widget-ID; wird standardmäßig das erste erstellte Widget verwendet, falls keine Angabe gemacht wird.

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>