Installer des clés à cocher (cases à cocher) sur les sites Web

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

Avant de commencer

  1. Préparez votre environnement pour reCAPTCHA Enterprise.

  2. Créez une clé de case à cocher.

    Vous pouvez également copier l'ID d'une clé de case à cocher existante en effectuant l'une des opérations suivantes:

    • Pour copier l'ID d'une clé existante à partir de la console Google Cloud, 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, pointez sur la clé que vous souhaitez copier, puis cliquez sur .
    • Pour copier l'ID d'une clé existante à l'aide de l'API REST, utilisez la méthode projects.keys.list.
    • Pour copier l'ID d'une clé existante à l'aide de la gcloud CLI, exécutez 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 la clé de votre case à cocher.

Pour spécifier une action, incluez l'attribut data-action et définissez-le sur un nom d'action. Pour en savoir plus, consultez Actions.

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.

reCAPTCHA Enterprise utilise la langue du navigateur par défaut. Si vous souhaitez spécifier une autre langue, utilisez l'attribut hl=LANG dans votre script. Par exemple, pour utiliser le français, spécifiez ce qui suit : <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Pour en savoir plus sur les langues compatibles, consultez la page Codes de langue pour reCAPTCHA Enterprise.

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="KEY_ID" data-action="LOGIN"></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 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 permettant d'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": " KEY_ID", "theme": "light"}.

      • action: spécifiez le nom d'action associé à l'élément protégé.

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

  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.

    reCAPTCHA Enterprise utilise la langue du navigateur par défaut. Si vous souhaitez spécifier une autre langue, utilisez l'attribut hl=LANG dans votre script. Par exemple, pour utiliser le français, spécifiez ce qui suit : <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Pour en savoir plus sur les langues compatibles, consultez la page Codes de langue pour reCAPTCHA Enterprise.

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

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

Étapes suivantes