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

Auf dieser Seite erfahren Sie, wie Sie einen Kästchenschlüssel mit der Ich bin kein Roboter Aufgabe auf Ihrer Website installieren. Je nachdem, wie Sie die Sicherheitsoption für die Aufgabe beim Erstellen des Kästchenschlüssels konfiguriert haben, muss der Endnutzer möglicherweise eine CAPTCHA-Aufgabe lösen, bevor ein gültiges Token generiert wird.

Hinweis

  1. Bereiten Sie Ihre Umgebung für Google Cloud Fraud Defense 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, gehen Sie wie folgt vor:

      1. Rufen Sie die Seite Google Cloud Fraud Defense auf.

        Google Cloud Fraud Defense aufrufen

      2. Wählen Sie den Tab Schlüssel aus.
      3. Suchen Sie in der Liste der reCAPTCHA-Schlüssel den Schlüssel, den Sie kopieren möchten, und klicken Sie dann auf .
    • Wenn Sie die ID eines vorhandenen Schlüssels mit der REST API kopieren möchten, 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 Frontend 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 g-recaptcha Klasse hinzu.

Fügen Sie dem Element mit der Klasse g-recaptcha auch das Attribut data-sitekey hinzu und legen Sie es auf Ihren Kästchenschlüssel fest.

Wenn Sie eine Aktion angeben möchten, fügen Sie das Attribut data-action hinzu 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.

Standardmäßig verwendet reCAPTCHA die Sprache des Browsers. Wenn Sie eine andere Sprache angeben möchten, verwenden Sie das Attribut hl=LANG in Ihrem Skript. 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"></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 ein vorhandenes JavaScript-Skript mit der Methode grecaptcha.enterprise.render() rendern. Verwenden Sie diese Methode, um Race-Bedingungen zu vermeiden oder um das Widget auf Basis der vorhandenen JavaScript-Logik anzuzeigen.

Um Race-Bedingungen beim expliziten Rendern des Widgets zu vermeiden, ordnen Sie Ihre Skripts so an, dass zuerst die Callback-Funktion und dann die reCAPTCHA API aufgerufen werden.

So rendern Sie das Widget explizit:

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

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

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

    2. Nachdem Ihre Callback-Funktion ausgeführt wurde, rufen Sie die grecaptcha.enterprise.render() Methode 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.

      • Parameter: Ein Objekt mit Parametern als Schlüssel/Wert-Paare, z. B. {"sitekey": "KEY_ID", "theme": "light"}.

      • Aktion: 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 Ihrer Onload-Callback-Funktion fest und fügen Sie render=explicit hinzu.

    Standardmäßig verwendet reCAPTCHA die Sprache des Browsers. Wenn Sie eine andere Sprache angeben möchten, verwenden Sie das Attribut hl=LANG in Ihrem Skript. 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">
 </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',
          'action': 'LOGIN',
        });
      };
    </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">
    </script>
  </body>
</html>

Beispiel 2

Das folgende Codebeispiel zeigt ein explizites Rendering 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',
          'action': 'action1',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'KEY_ID',
          'action': 'action2',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : 'KEY_ID',
          'action': 'action3',
          '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">
    </script>
  </body>
</html>

Nächste Schritte