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

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

Hinweise

  1. Umgebung für reCAPTCHA vorbereiten

  2. Erstellen Sie einen Kästchenschlüssel.

    Alternativ können Sie die ID eines vorhandenen Kästchenschlüssels kopieren. Führen Sie dazu einen der folgenden Schritte aus:

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

      1. Rufen Sie die Seite reCAPTCHA auf.

        Zu reCAPTCHA

      2. Halten Sie in der Liste der reCAPTCHA-Schlüssel den Mauszeiger auf den Schlüssel, den Sie kopieren möchten, und klicken Sie dann auf .
    • Verwenden Sie die Methode projects.keys.list, um die ID eines vorhandenen Schlüssels mithilfe der REST API zu kopieren.
    • Verwenden Sie den Befehl gcloud recaptcha keys list, um die ID eines vorhandenen Schlüssels mit der gcloud CLI zu kopieren.

reCAPTCHA-Widget im Frontend rendern

Sie können das reCAPTCHA-Widget auf Ihrer Webseite mit einer der folgenden Methoden 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ästchenschlüssel.

Wenn Sie eine Aktion angeben möchten, fügen Sie das Attribut data-action ein und legen Sie es auf einen Aktionsnamen fest. Weitere Informationen finden Sie unter Aktionen.

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

reCAPTCHA verwendet standardmäßig die Sprache des Browsers. Wenn du eine andere Sprache angeben möchtest, verwende das Attribut hl=LANG in deinem Script. Wenn Sie beispielsweise Französisch verwenden möchten, geben Sie Folgendes an: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Informationen zu den unterstützten Sprachen finden Sie unter Sprachcodes für reCAPTCHA.

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="KEY_ID" data-action="LOGIN"></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 Skripte zuerst mit der Callback-Funktion und dann mit der reCAPTCHA API an.
  • Verwenden Sie die Parameter async und defer in den script-Tags

So rendern Sie das Widget explizit:

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

    1. Geben Sie die Callback-Funktion onload an, bevor die reCAPTCHA 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“: „KEY_ID“, „theme“: „light“}.

      • action: Geben Sie den Namen der Aktion an, die mit dem geschützten Element verknüpft ist.

      grecaptcha.enterprise.render('html_element', {
   'sitekey' : 'KEY_ID',
   'action': 'LOGIN',
 });

  2. Fügen Sie zum Rendern des Widgets die JavaScript-Ressource ein. Legen Sie onload auf den Namen Ihrer Onload-Callback-Funktion fest und fügen Sie render=explicit hinzu.

    reCAPTCHA verwendet standardmäßig die Sprache des Browsers. Wenn du eine andere Sprache angeben möchtest, verwende das Attribut hl=LANG in deinem Script. Wenn Sie beispielsweise Französisch verwenden möchten, geben Sie Folgendes an: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Informationen zu den unterstützten Sprachen finden Sie unter Sprachcodes für reCAPTCHA.

     <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' : 'KEY_ID',
        });
      };
    </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

Das folgende Codebeispiel zeigt das explizite Rendern mehrerer 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.enterprise.render('example1', {
          'sitekey' : 'KEY_ID',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'KEY_ID',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : 'KEY_ID',
          '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>

Nächste Schritte