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

Cette page explique comment installer une clé avec case à cocher avec le Je ne suis pas un robot test sur votre site Web. Selon la façon dont vous avez configuré l'option de sécurité du test lors de la création de la clé avec case à cocher, reCAPTCHA 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 Google Cloud Fraud Defense.

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

    Vous pouvez également copier l'ID d'une clé avec case à cocher existante en procédant de l'une des manières suivantes :

    • Pour copier l'ID d'une clé existante à partir de la Google Cloud console, procédez comme suit :

      1. Accédez à la page Google Cloud Fraud Defense.

        Accéder à Google Cloud Fraud Defense

      2. Sélectionnez l'onglet Keys (clés).
      3. Dans la liste des clés reCAPTCHA, recherchez 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 gcloud CLI, utilisez la commande gcloud recaptcha keys list.

Afficher le widget reCAPTCHA sur le frontend

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é avec 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.

Par défaut, reCAPTCHA utilise la langue du navigateur. 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 : <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Pour en savoir plus sur les langues acceptées, consultez 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"></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 éviter les conditions de concurrence lors de l'affichage explicite du widget, ordonnez vos scripts en commençant par la fonction de rappel, puis par l'API reCAPTCHA.

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 d'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 grecaptcha.enterprise.render() méthode avec les paramètres suivants 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 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.

    Par défaut, reCAPTCHA utilise la langue du navigateur. 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 : <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Pour en savoir plus sur les langues acceptées, consultez Codes de langue pour reCAPTCHA.

     <script src="https://www.google.com/recaptcha/enterprise.js?onload=onload_Callback_function&render=explicit">
 </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',
          'action': 'LOGIN',
        });
      };
    </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">
    </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',
          'action': 'action1',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'KEY_ID',
          'action': 'action2',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : 'KEY_ID',
          'action': 'action3',
          '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">
    </script>
  </body>
</html>

Étape suivante