Installation von Websiteschlüsseln (Kästchen) (Kästchen)

Auf dieser Seite wird erläutert, wie Sie einen Kästchenschlüssel Ihrer Website mit der Kästchen Ich bin kein Roboter auf Ihrer Website installieren. Je nachdem, wie Sie die Sicherheitsoption für die Identität beim Erstellen des Kästchens für die Website des Kästchens konfiguriert haben, fordert reCAPTCHA Enterprise den Endnutzer möglicherweise auf, eine CAPTCHA-Herausforderung zu lösen, bevor ein gültiges Token generiert wird.

Hinweis

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

  2. Erstellen Sie einen Kästchen für den Websiteschlüssel.

reCAPTCHA-Widget im Front-End rendern

Zum Anzeigen des reCAPTCHA-Widgets auf Ihrer Webseite verwenden Sie eine der folgenden Methoden:

Widget automatisch rendern

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

Fügen Sie auf der Webseite die erforderliche JavaScript-Ressource und ein HTML-Element mit der Klasse g-recaptcha ein.

Fügen Sie im Element mit der Klasse g-recaptcha auch das Attribut data-sitekey ein und legen Sie es auf den Websiteschlüssel des Kästchens fest.

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

Das folgende 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 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 basierend auf der bestehenden JavaScript-Logik anzuzeigen.

Beachten Sie die folgenden Hinweise, um zu sorgen, dass beim Rendern des Widgets keine Race-Bedingungen vorliegen:

  • Ordnen Sie Ihre Skripts zuerst mit der Callback-Funktion und dann 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 Widget:

    1. Geben Sie Ihre 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 zum Rendern des reCAPTCHA-Widgets. 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": "your_site_key", "theme": "light"}.

      grecaptcha.enterprise.render('html_element', {
         'sitekey' : ' site_key',
       });
      
  2. Um das Widget zu rendern, fügen Sie die JavaScript-Ressource ein. Legen Sie onload auf den Namen Ihrer Onload-Callback-Funktion fest und schließen Sie 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 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 ein explizites Rendering mehrerer Widgets gezeigt:

<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>

Nächste Schritte