Kästchen-Websiteschlüssel (Kästchen-Abfrage) auf Websites installieren

Auf dieser Seite erfahren Sie, wie Sie ein Kästchen-Websiteschlüssel mit der Abfrage Ich bin kein Roboter auf Ihrer Website installieren. Je nachdem, wie Sie die Sicherheitsoption „Abfrage“ bei der Erstellung des Kästchen-Websiteschlüssels konfiguriert haben, verlangt reCAPTCHA Enterprise möglicherweise, dass der Nutzer eine CAPTCHA-Abfrage löst, bevor ein gültiges Token erzeugt wird.

Hinweis

  1. Wählen Sie die beste Methode zum Einrichten von reCAPTCHA Enterprise in Ihrer Umgebung aus und schließen Sie die Einrichtung ab.

  2. Erstellen Sie einen Kästchen-Websiteschlüssel. Alternativ können Sie die ID eines vorhandenen Kästchen-Websiteschlüssels kopieren. Führen Sie dazu einen der folgenden Schritte aus:

    • So kopieren Sie die ID eines vorhandenen Website-Schlüssels aus der Google Cloud Console:

      1. Rufen Sie die Seite reCAPTCHA Enterprise auf.

        Zur Seite „reCAPTCHA Enterprise“

      2. Halten Sie in der Liste der reCAPTCHA-Schlüssel den Mauszeiger auf die Schlüssel-ID, die Sie kopieren möchten, und klicken Sie dann auf .

    • Verwenden Sie die Methode projects.keys.list, um die ID eines vorhandenen Kästchen-Websiteschlüssels mithilfe der REST API zu kopieren.

    • Kopieren Sie mit dem Befehl gcloud die ID eines vorhandenen Kästchens für den Websiteschlüssel. Verwenden Sie dazu den Befehl gcloud recaptcha keys list.

reCAPTCHA-Widget im Front-End rendern

Mit einer der folgenden Methoden kannst du das reCAPTCHA-Widget auf deiner Webseite anzeigen lassen:

Widget automatisch rendern

Mit dieser Methode können Sie das Widget für jedes Objekt (z. B. div oder span) mit der Klasse g-recaptcha rendern.

Fügen Sie Ihrer Webseite die erforderlichen JavaScript-Ressourcen und ein HTML-Element mit der Klasse g-recaptcha hinzu.

Fügen Sie auch in das Element mit der Klasse g-recaptcha das Attribut data-sitekey ein und setzen Sie es gleich Ihrem Kästchen-Websiteschlüssel.

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

Folgendes Beispiel ist ein Snippet mit Beispielcode:

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

Das Widget explizit rendern

Mit dieser Methode können Sie das Widget unter Einsatz der grecaptcha.enterprise.render()-Methode über ein vorhandenes JavaScript-Skript rendern. Verwenden Sie diese Methode, um Race-Bedingungen zu vermeiden oder um das Widget auf Basis der vorhandenen JavaScript-Logik anzuzeigen.

Achten Sie auf folgende Punkte, um sicherzustellen, dass es beim Rendering des Widgets keine Race-Bedingungen gibt:

  • Ordnen Sie Ihre Skripts zuerst mit der Callback-Funktion und dann mit der reCAPTCHA Enterprise API an.
  • Verwenden Sie die Parameter async und defer in den script-Tags

So kannst du das Widget explizit rendern:

  1. So verschieben Sie das Rendering des Widgets auf später:

    1. Geben Sie die Callback-Funktion onload an, bevor die reCAPTCHA Enterprise API und andere Abhängigkeiten geladen werden.

       <script type="text/javascript">
       var onloadCallback = function() {
          alert("grecaptcha is ready!");
       };
       </script>
      
    2. Rufen Sie nach der Ausführung Ihrer Callback-Funktion die grecaptcha.enterprise.render()-Methode mit folgenden Parametern über die JavaScript-API auf.

      • Container: Das HTML-Element, das das reCAPTCHA-Widget rendert. 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“}.

      grecaptcha.enterprise.render('html_element', {
         'sitekey' : ' site_key',
       });
      
  2. Fügen Sie die JavaScript-Ressource ein, um das Widget zu rendern. Lege für onload den Namen der Callback-Funktion zum Laden fest und füge render=explicit ein.

     <script src="https://www.google.com/recaptcha/enterprise.js?onload=onload_Callback_function&render=explicit"
        async defer>
     </script>
    

Beispiel 1

Das folgende Codebeispiel zeigt ein explizites Rendering nach einem onload-Callback:

<html>
   <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
     <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.enterprise.render('html_element', {
          'sitekey' : ' 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/enterprise.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Beispiel 2

Im folgenden Codebeispiel wird das explizite Rendering mehrerer Widgets dargestellt:

<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.enterprise.render('example1', {
          'sitekey' : 'site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'site_key',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : '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.enterprise.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.enterprise.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/enterprise.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Weitere Informationen