reCAPTCHA, Version 2

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

Zum Anzeigen des Widgets haben Sie folgende Möglichkeiten:

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 prüfen können Sie nachsehen, ob der Nutzer das CAPTCHA erfolgreich gelöst hat.

reCAPTCHA-Widget automatisch rendern

Die einfachste Methode zum Rendern des reCAPTCHA-Widgets auf deiner Seite ist die Einbindung der erforderlichen JavaScript-Ressource und eines g-recaptcha-Tags. Das Tag g-recaptcha ist ein DIV-Element mit dem Klassennamen g-recaptcha und Ihrem Websiteschlüssel im 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.

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

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

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

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

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 Ihr Websiteschlüssel.
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

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