Installer des clés de site de case à cocher (test par case à cocher) sur des sites Web

Cette page explique comment installer une clé de site de case à cocher avec le test de case à cocher Je ne suis pas un robot sur votre site Web. Selon la façon dont vous avez configuré l'option de sécurité de test lors de la création de la clé de site de case à cocher, reCAPTCHA Enterprise peut demander à l'utilisateur final d'effectuer 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 de case à cocher. Vous pouvez également copier l'ID d'une clé de site de case à cocher existante en effectuant l'une des opérations suivantes :

    • Pour copier l'ID d'une clé de site de case à cocher existante à partir de Google Cloud Console, procédez comme suit :

      1. Accédez à la page reCAPTCHA Enterprise.

        Accéder à la page reCAPTCHA Enterprise

      2. Dans la liste des clés reCAPTCHA, maintenez le pointeur sur l'ID de clé que vous souhaitez copier, puis cliquez sur .

    • Pour copier l'ID d'une clé de site de case à cocher existante à l'aide de l'API REST, utilisez la méthode projects.keys.list.

    • Pour copier l'ID d'une clé de site de case à cocher existante à l'aide de l'outil gcloud, utilisez la commande gcloud recaptcha keys list.

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

Avec cette méthode, vous pouvez afficher le widget sur n'importe quel objet (tel qu'un div ou un 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 votre clé de 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 est un extrait d'exemple 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

Cette méthode vous permet d'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 si vous souhaitez afficher le widget basé sur la logique JavaScript existante.

Pour vous assurer qu'il n'y a pas de conditions de concurrence lors de l'affichage explicite du widget, consultez les points suivants :

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

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

  1. Pour différer l'affichage 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 la fonction de rappel exécutée, appelez la méthode grecaptcha.enterprise.render() avec les paramètres suivants depuis l'API JavaScript.

      • container : élément HTML permettant d'afficher le widget reCAPTCHA. Indiquez l'ID du conteneur (chaîne) ou l'élément DOM proprement dit.

      • 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 affichage 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 l'affichage explicite 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