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

Cette page explique comment installer une clé 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 case à cocher, reCAPTCHA peut demander à l'utilisateur final d'effectuer un test CAPTCHA avant de générer un jeton valide.

Avant de commencer

  1. Préparez votre environnement pour reCAPTCHA.

  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.

        Accéder à reCAPTCHA

      2. Dans la liste des clés reCAPTCHA, maintenez le pointeur 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 CLI 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 case à cocher.

Pour spécifier une action, incluez l'attribut data-action et attribuez-lui un nom d'action. Pour obtenir plus de conseils, consultez la section 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 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 acceptées, consultez les codes de langue pour reCAPTCHA.

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.
  • 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 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": "KEY_ID", "theme": "light"}.

      • action: spécifiez le nom de l'action associée à 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 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 acceptées, consultez les codes de langue pour reCAPTCHA.

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

Étape suivante