Installation de clés de site de case à cocher (case à cocher) pour les sites Web

Cette page explique comment installer une clé de case à cocher avec la case à cocher Je ne suis pas un robot sur votre site Web. Selon la configuration de l'option de sécurité du défi lors de la création de la clé de site de case à cocher, reCAPTCHA Enterprise peut exiger de l'utilisateur final de résoudre un test CAPTCHA avant de générer un jeton valide.

Avant de commencer

  1. Choisissez la meilleure méthode pour configurer reCAPTCHA Enterprise dans votre environnement et terminez la configuration.

  2. Créez une clé de site pour les cases à cocher.

Afficher le widget reCAPTCHA sur l'interface

Pour afficher le widget reCAPTCHA sur votre page Web, utilisez l'une des méthodes suivantes:

Afficher automatiquement le widget

Cette méthode vous permet d'afficher le widget de n'importe quel objet (tel que div ou span) avec la classe g-recaptcha.

Sur votre page Web, incluez la ressource JavaScript nécessaire et un élément HTML avec la classe g-recaptcha.

Dans l'élément avec la classe g-recaptcha, incluez également l'attribut data-sitekey et définissez-le sur la clé de votre site de case à cocher.

Le script doit être chargé via le protocole HTTPS et peut être intégré à partir de n'importe quel point de la page sans restriction.

L'exemple suivant présente un extrait de code:

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

Afficher explicitement le widget

Avec cette méthode, vous pouvez afficher le widget via un script JavaScript existant à l'aide de la méthode grecaptcha.enterprise.render(). Utilisez cette méthode pour éviter les conditions de concurrence ou pour afficher le widget en fonction de la logique JavaScript existante.

Pour vous assurer qu'il n'y a pas de condition de concurrence lors du rendu explicite du widget, examinez les points suivants:

  • Commandez d'abord vos scripts avec la fonction de rappel, puis l'API reCAPTCHA Enterprise.
  • Utilisez les paramètres async et defer dans les tags script.

Pour afficher le widget explicitement, procédez comme suit:

  1. Pour différer le rendu du widget, procédez comme suit:

    1. Spécifiez votre fonction de rappel onload avant le chargement de l'API reCAPTCHA Enterprise et des autres dépendances.

       <script type="text/javascript">
       var onloadCallback = function() {
          alert("grecaptcha is ready!");
       };
       </script>
      
    2. Une fois votre fonction de rappel exécutée, appelez la méthode grecaptcha.enterprise.render() avec les paramètres suivants à partir de l'API JavaScript.

      • container: élément HTML pour afficher le widget reCAPTCHA. Spécifiez l'ID du conteneur (chaîne) ou l'élément DOM lui-même.

      • parameters: objet contenant des paramètres sous forme de paires clé/valeur, par exemple {"sitekey": "your_site_key", "theme": "light"}.

      grecaptcha.enterprise.render('html_element', {
         'sitekey' : ' site_key',
       });
      
  2. Pour afficher le widget, insérez la ressource JavaScript. Définissez onload sur le nom de votre fonction de rappel onload et incluez render=explicit.

     <script src="https://www.google.com/recaptcha/enterprise.js?onload=onload_Callback_function&render=explicit"
        async defer>
     </script>
    

Exemple 1

L'exemple de code suivant montre un rendu explicite après un rappel onload:

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

Exemple 2

L'exemple de code suivant montre explicitement l'affichage de plusieurs 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' : '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>

Étape suivante