Cette page explique comment activer et personnaliser le reCAPTCHA invisible sur votre page Web.
Pour appeler le reCAPTCHA invisible, vous pouvez:
- Associer automatiquement le défi à un bouton ou
- Associer le défi à un bouton de manière programmatique ou
- Relever le défi de façon programmatique
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.
Créez un div avec
data-size="invisible"
.<div class="g-recaptcha" data-sitekey="_your_site_key_" data-callback="onSubmit" data-size="invisible"> </div>
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>