Diese Seite wurde von der Cloud Translation API übersetzt.

reCAPTCHA, Version 2

Auf dieser Seite wird erläutert, wie Sie das reCAPTCHA v2-Widget auf Ihrer Webseite anzeigen und anpassen.

Zum Anzeigen des Widgets haben Sie folgende Möglichkeiten:

Widget automatisch rendern oder
Das Widget explizit rendern

Unter Konfigurationen können Sie nachlesen, wie Sie Ihr Widget anpassen. Sie können beispielsweise die Sprache oder das Design für das Widget festlegen.

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

reCAPTCHA-Widget automatisch rendern

Die einfachste Methode zum Rendern des reCAPTCHA-Widgets auf Ihrer Seite besteht darin, die erforderliche JavaScript-Ressource und ein g-recaptcha-Tag hinzuzufügen. Das g-recaptcha-Tag ist ein DIV-Element mit dem Klassennamen g-recaptcha und Ihrem Websiteschlüssel in der Attribut data-sitekey:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Das Skript muss mit dem HTTPS-Protokoll geladen werden und kann von jedem Punkt der Seite aus ohne Einschränkung eingeschlossen werden.

reCAPTCHA-Widget explizit rendern

Das Verzögern des Renderns kann erreicht werden, indem Sie Ihre Onload-Callback-Funktion angeben und der JavaScript-Ressource Parameter hinzufügen.

Geben Sie die Callback-Funktion onload an. Diese Funktion wird aufgerufen, wenn ob alle Abhängigkeiten geladen sind.

<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>

Fügen Sie die JavaScript-Ressource ein und setzen Sie den Parameter onload auf den Namen Ihrer Onload-Callback-Funktion und den Parameter render auf explicit.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>
```
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. Um sicherzustellen, dass es keine Race-bedingungen gibt:
- 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	Parameter „grecaptcha.render“	Wert	Default	Beschreibung
`data-sitekey`	`sitekey`			Ihren Sitekey
`data-theme`	`theme`	`dark light`	`light`	Optional. Das Farbdesign des Widgets.
`data-size`	`size`	`compact normal`	`normal`	Optional. Die Größe des Widgets
`data-tabindex`	`tabindex`		0	Optional. Der Tabindex des Widgets und der Challenge. 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.

JavaScript API

Method	Beschreibung
`grecaptcha.render`( container, Parameter )	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
`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 type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Explizites Rendering für mehrere Widgets

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>