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: Gehen Sie so vor:

      1. Rufen Sie die Seite reCAPTCHA auf.

        Zu reCAPTCHA

      2. Halten Sie in der Liste der reCAPTCHA-Schlüssel den Mauszeiger über 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.
    • So kopieren Sie die ID eines vorhandenen Schlüssels mit der gcloud CLI: verwenden Sie den Befehl gcloud remarketingtcha keys list.

reCAPTCHA-Widget im Frontend rendern

Verwenden Sie eine der folgenden Optionen, um das reCAPTCHA-Widget auf Ihrer Webseite anzuzeigen Methoden:

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 im Element mit der Klasse g-recaptcha auch das Element data-sitekey ein. und legen Sie es auf den Wert Ihres Kästchenschlüssels fest.

Fügen Sie zum Angeben einer Aktion das Attribut data-action ein und legen Sie es auf einen Aktionsname. 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 Sie eine andere Sprache angeben möchten, verwenden Sie das Attribut hl=LANG in Ihrem 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 über eine vorhandene JavaScript- Skript mit der Methode grecaptcha.enterprise.render(). 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. reCAPTCHA API.
  • Verwenden Sie die Parameter async und defer in den script-Tags

So rufen Sie das Widget explizit ab:

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

    1. Geben Sie die Callback-Funktion onload vor dem Tag Die reCAPTCHA API und andere Abhängigkeiten werden geladen.

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

      • 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 Sie eine andere Sprache angeben möchten, verwenden Sie das Attribut hl=LANG in Ihrem 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