reCAPTCHA 2

Cette page explique comment afficher et personnaliser le widget reCAPTCHA v2 sur votre page Web.

Pour afficher le widget, vous pouvez soit :

Pour découvrir comment personnaliser votre widget, consultez la section Configurations. Vous pouvez par exemple spécifier la langue ou le thème du widget.

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

Afficher automatiquement le widget reCAPTCHA

La méthode la plus simple pour afficher le widget reCAPTCHA sur votre page consiste à inclure la ressource JavaScript nécessaire et une balise g-recaptcha. La balise g-recaptcha est un élément DIV portant le nom de classe g-recaptcha et la clé de votre site dans l'attribut data-sitekey:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

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.

Afficher explicitement le widget reCAPTCHA

Il est possible de différer l'affichage en spécifiant votre fonction de rappel "onload" et en ajoutant des paramètres à la ressource JavaScript.

  1. Spécifiez votre fonction de rappel onload. Cette fonction est appelée une fois toutes les dépendances chargées.

    <script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>

  2. Insérez la ressource JavaScript en définissant le paramètre onload sur le nom de la fonction de rappel onload, et le paramètre render sur explicit.

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>

    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.
data-theme thème dark light light Facultatif. Thème de couleur du widget.
Taille des données size compact normal Normal Facultatif. Taille du widget.
data-tabindex tabIndex 0 Facultatif. Tabindex du widget et du challenge. 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.

API JavaScript

Méthode Description
grecaptcha.render(
Conteneur,
Paramètres
) 		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
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 type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </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/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

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.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.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/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>