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 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 un tag g-recaptcha. La balise g-recaptcha est un élément DIV avec le nom de classe g-recaptcha et la clé de votre site dans 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 que toutes les dépendances sont 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
onload Facultatif. Nom de la fonction de rappel à exécuter une fois que toutes les dépendances sont chargées.
render 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 sitekey Votre clé de site.
data-theme theme dark light light Facultatif. Thème de couleur du widget.
data-size 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 callback 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

Method 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"}. Consultez 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>