reCAPTCHA invisible

Cette page explique comment activer et personnaliser le reCAPTCHA invisible sur votre page Web.

Pour appeler le reCAPTCHA invisible, vous pouvez:

Consultez la section Configurations pour découvrir comment personnaliser le reCAPTCHA invisible. Par exemple, vous pouvez spécifier la langue ou l'emplacement du badge.

Consultez la section Vérifier la réponse de l'utilisateur pour vérifier si l'utilisateur a réussi le test CAPTCHA.

Associer automatiquement le défi à un bouton

La méthode la plus simple pour utiliser le widget reCAPTCHA invisible sur votre page consiste à inclure la ressource JavaScript nécessaire et à ajouter quelques attributs à votre bouton HTML. Les attributs requis sont les suivants : nom de classe "g-recaptcha", clé de votre site dans l'attribut data-sitekey et nom d'un rappel JavaScript pour gérer la fin du captcha dans l'attribut data-callback.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

Le script doit être chargé à l'aide du protocole HTTPS et peut être inclus à n'importe quel endroit de la page sans restriction.

Associez le défi à un bouton par programmation ou invoquez le défi.

Vous pouvez différer la liaison en spécifiant votre fonction de rappel onload et en ajoutant des paramètres à la ressource JavaScript. Cela fonctionne de la même manière que le défi reCAPTCHA normal.

Défi programmatique lancé.

Il est possible d'appeler la validation reCAPTCHA de manière programmatique en affichant le défi dans un élément div avec un attribut data-size="invisible" et en exécutant la commande par programmation.

  1. Créez un élément div avec data-size="invisible".

    <div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

  2. Appelez grecaptcha.execute à partir d'une méthode JavaScript.

    grecaptcha.execute();

    Lorsque votre rappel est exécuté, vous pouvez appeler la méthode grecaptcha.render à partir de l'API JavaScript.

Configuration

Paramètres de ressource JavaScript (api.js)

Paramètre Valeur Description
Lors du chargement Facultatif. Nom de la fonction de rappel à exécuter une fois que toutes les dépendances sont chargées.
Rendu explicit
onload		 Facultatif. Indique si le widget doit être affiché explicitement. La valeur par défaut est "onload", qui affichera le widget dans la première balise g-recaptcha trouvée.
hl Voir les codes de langue Facultatif. Force l'affichage du widget dans une langue spécifique. Si aucune valeur n'est spécifiée, détecte automatiquement la langue de l'utilisateur.

Attributs du tag g-recaptcha et paramètres grecaptcha.render

Attribut de la balise g-recaptcha Paramètre grecaptcha.render Valeur Par défaut Description
data-sitekey Clé du site Votre clé de site.
badge-données badge en bas à droite en bas à gauche alignés en bas à droite Facultatif. Repositionnez le badge reCAPTCHA. "inline" vous permet de le positionner avec CSS.
Taille des données size invisible Facultatif. Permet de créer un widget invisible lié à un élément div et exécuté automatiquement.
data-tabindex tabIndex 0 Facultatif. Indice de tabulation du défi. Si d'autres éléments de votre page utilisent des tabindex, il doit être défini pour faciliter la navigation de l'utilisateur.
data-callback rappel Facultatif. Nom de votre fonction de rappel exécutée lorsque l'utilisateur envoie une réponse réussie. Le jeton g-recaptcha-response est transmis à votre rappel.
data-expired-callback expired-callback Facultatif. Nom de votre fonction de rappel exécutée lorsque la réponse reCAPTCHA expire et que l'utilisateur doit à nouveau effectuer la validation.
data-error-callback error-callback Facultatif. Nom de votre fonction de rappel exécutée lorsque reCAPTCHA rencontre une erreur (généralement un problème de connectivité réseau) et ne peut pas poursuivre tant que la connectivité n'est pas rétablie. Si vous spécifiez ici une fonction, il vous incombe d'indiquer à l'utilisateur qu'il doit réessayer.
isolé false Facultatif. Pour que les propriétaires de plug-ins n'interfèrent pas avec les installations reCAPTCHA existantes sur une page. Si la valeur est "true", cette instance reCAPTCHA fait partie d'un espace d'ID distinct.

API JavaScript

Méthode Description
grecaptcha.render(
Conteneur,
paramètres,
hériter
) 		Affiche le conteneur sous la forme d'un widget reCAPTCHA et renvoie l'ID du widget nouvellement créé.
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"}. Voir les paramètres grecaptcha.render
hériter
Utilisez les attributs data-* existants sur l'élément si le paramètre correspondant n'est pas spécifié. Les paramètres ont priorité sur les attributs.
grecaptcha.execute(
opt_widget_id
) 		Appelez le test reCAPTCHA de manière automatisée. Utilisé si l'élément reCAPTCHA invisible se trouve sur un élément div au lieu d'un bouton.
opt_widget_id
ID facultatif du widget. Par défaut, en l'absence de valeur spécifiée, il s'agit du premier widget créé.
grecaptcha.reset(
)
opt_widget_id
) 		Réinitialise le widget reCAPTCHA.
opt_widget_id
ID facultatif du widget. Par défaut, en l'absence de valeur spécifiée, il s'agit du premier widget créé.
grecaptcha.getResponse(
)
opt_widget_id
) 		Récupère la réponse du widget reCAPTCHA.
opt_widget_id
ID facultatif du widget. Par défaut, en l'absence de valeur spécifiée, il s'agit du premier widget créé.

Exemples

Affichage explicite après un rappel onload

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Appeler le défi reCAPTCHA invisible après la validation côté client.

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>