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

Auf dieser Seite wird erläutert, wie Sie einen Kästchenschlüssel mit der Kästchen-Challenge Ich bin kein Roboter auf Ihrer Website installieren. Je nachdem, wie Sie die Sicherheitsoption für die Identitätsbestätigung beim Erstellen des Kästchenschlüssels konfiguriert haben, muss reCAPTCHA Enterprise möglicherweise vom Endnutzer eine CAPTCHA-Abfrage lösen, bevor ein gültiges Token generiert werden kann.

Hinweise

  1. Bereiten Sie Ihre Umgebung für reCAPTCHA Enterprise vor.

  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 Enterprise auf.

        Zur Seite „reCAPTCHA Enterprise“

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

reCAPTCHA-Widget im Front-End rendern

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

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 Attribut data-sitekey ein und legen Sie es auf denselben Schlüssel wie das Kästchen fest.

Wenn Sie eine Aktion angeben möchten, fügen Sie das Attribut data-action hinzu und legen Sie dafür 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 Enterprise 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>. Weitere Informationen zu den unterstützten Sprachen finden Sie unter Sprachcodes für reCAPTCHA Enterprise.

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 mithilfe der Methode grecaptcha.enterprise.render() ü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 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 Enterprise API und andere Abhängigkeiten geladen werden.

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

    2. Nachdem die Callback-Funktion ausgeführt wurde, rufen Sie die Methode grecaptcha.enterprise.render() mit den folgenden Parametern aus der 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.

      • parameters: Ein Objekt, das Parameter als Schlüssel/Wert-Paare enthält, z. B. {"sitekey": " KEY_ID", "theme": "light"}.

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

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

  2. Fügen Sie die JavaScript-Ressource ein, um das Widget zu rendern. Legen Sie onload auf den Namen der Onload-Callback-Funktion fest und fügen Sie render=explicit hinzu.

    reCAPTCHA Enterprise 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>. Weitere Informationen zu den unterstützten Sprachen finden Sie unter Sprachcodes für reCAPTCHA Enterprise.

     <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

Im folgenden Codebeispiel wird das explizite Rendering mehrerer Widgets veranschaulicht:

<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