reCAPTCHA invisible

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

Pour appeler le reCAPTCHA invisible, vous pouvez:

Pour savoir comment personnaliser le reCAPTCHA invisible, consultez la section Configurations. Par exemple, vous pouvez indiquer la langue ou l'emplacement du badge.

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

Lier automatiquement le test à 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 nécessaires sont le nom de classe "g-recaptcha", la clé de votre site dans l'attribut data-sitekey et le nom d'un rappel JavaScript pour gérer la saisie 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 où sur la page sans restriction.

Associez le défi à un bouton de manière programmatique ou appelez le défi.

Pour différer la liaison, spécifiez votre fonction de rappel de chargement et ajoutez des paramètres à la ressource JavaScript. Cela fonctionne de la même manière que le test reCAPTCHA standard.

Appelez le défi de manière programmatique.

Vous pouvez appeler la validation reCAPTCHA de façon programmatique en affichant le test dans un élément div avec un attribut data-size="invisible" et en appelant la méthode "execute" de manière programmatique.

  1. Créez un 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ètres Valeur Description
onload 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 de 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 de données badge aligné en bas à droite et en bas à gauche en bas à droite Facultatif. Repositionnez le badge reCAPTCHA. L'option "inline" vous permet de la positionner avec CSS.
data-size size invisible Facultatif. Permet de créer un widget invisible lié à un élément div et exécuté de manière programmatique.
data-tabindex tabIndex 0 Facultatif. Onglet "Tabindex" 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 fera partie d'un espace d'ID distinct.

API JavaScript

Méthode Description
grecaptcha.rendu(
Conteneur,
de 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"}. Consultez 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 prévalent sur les attributs.
grecaptcha.execute(
opt_widget_id
)
Appelez par programmation la vérification reCAPTCHA. Utilisé si le 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 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>