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 apprendre à 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 à résoudre le 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 quelques attributs à votre bouton HTML. Les attributs nécessaires sont un 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 semi-automatique 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 à partir de n'importe quel point de la page sans restriction.

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

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 test reCAPTCHA normal.

Invoquez le défi par programmation.

Vous pouvez appeler la validation reCAPTCHA par programmation en affichant la question d'authentification dans un élément div avec un attribut data-size="invisible" et en appelant la méthode "execute" 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.

    <ph type="x-smartling-placeholder">

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 de balise g-recaptcha et paramètres grecaptcha.render

Attribut de la balise g-recaptcha Paramètre grecaptcha.render Value Par défaut Description
data-sitekey Clé du site Votre clé de site.
badge données badge intégrée en bas à droite en bas à gauche en bas à droite Facultatif. Repositionnez le badge reCAPTCHA. "inline" vous permet de le positionner à l'aide de CSS.
Taille des données taille invisible Facultatif. Permet de créer un widget invisible lié à un élément div et exécuté de manière automatisée.
data-tabindex tabIndex 0 Facultatif. Index 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és faux Facultatif. Pour que les propriétaires de plug-ins ne perturbent pas 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

Method 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"}. Consultez les paramètres grecaptcha.render.
hériter
Utilisez les attributs data-* existants de 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
) 		Invoquer le contrôle reCAPTCHA par programmation Utilisé si le reCAPTCHA invisible se trouve dans un tag 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>

Appel du test 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>