reCaptcha Invisible
Salut à tous,
La nouvelle verison de reCaptcha est sortie depuis peu et j'essaye tant bien que mal de l'intégrer dans des sites.
Dans la doc, ils expliquent comment faire pour soumettre le formulaire mais faire une validation des champs avants. Parfait c'est justement ce que je souhaite faire. Mais le problème, c'est que je n'arrive pas à soumettre mon form par la suite. Visiblement je suis obligé de le faire en AJAX. Et je ne veux pas le faire en AJAX.
Voici mon code :
<?php
// https://developers.google.com/recaptcha/docs/invisible
$key = "A";
$secret = "B";
if(isset($_POST) && !empty($_POST)) {
$params = array(
'secret' => $secret,
'response' => $_POST['g-recaptcha-response'],
'remoteip' => $_SERVER['REMOTE_ADDR'],
);
$url = "https://www.google.com/recaptcha/api/siteverify?" . http_build_query($params);
if (function_exists('curl_version')) {
$curl = curl_init();
curl_setopt_array($curl, array(
CURLOPT_URL => $url,
CURLOPT_POST => 0,
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_SSL_VERIFYPEER => false,
CURLOPT_SSL_VERIFYHOST => false,
CURLOPT_VERBOSE => 1,
CURLOPT_HEADER => false,
));
$response = curl_exec($curl);
} else {
$response = file_get_contents($url);
}
if (empty($response) || is_null($response)) {
return false;
}
$response = json_decode($response);
if($response->success === TRUE) {
die('YEAH !');
} else {
die('OOPS !');
}
}
?>
<!DOCTYPE HTML>
<html lang="fr">
<head>
<title>reCAPTCHA Invisible</title>
</head>
<body>
<form method="post" id="demo-form" action="index.php">
Name: (required) <input id="field" name="field">
<div id="recaptcha" class="g-recaptcha" data-sitekey="<?php echo $key ?>" data-callback="onSubmit" data-size="invisible"></div>
<button id="submit" type="button">submit</button>
</form>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
var onSubmit = function(token) {
console.log(token);
jQuery(document).find('#demo-form').submit();
};
jQuery(function($){
$(document).on('click', '#submit', function(e) {
e.preventDefault();
if ($(document).find('#field').val() === "") {
alert("You must add text to the required field");
} else {
grecaptcha.execute();
}
});
});
</script>
</body>
</html>J'ai bien mon token dans la console, donc il passe bien dans ma fonction onSubmit. Mais par contre, il ne fait pas le
jQuery(document).find('#demo-form').submit();Vous avez des idées ? Car là je sèche totalement
Merci à tous par avance
19 réponses
déjà si tu ne veux pas le faire en Ajax il est tout à fait possible de ne pas le faire.
Une fois que reCaptcha s'affiche tu auras droit de créer une variable php pour gerer ton captcha.Tu fais les verifications d'existence ou celle que tu as l'habitude faire.
Après que cela soit fait et ça une fois que l'utilisateur aura rempli le captcha tu auras une reponse qui sera égale à : file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=[TA_CLE_SECRETE]&response=[TA_VARIABLE_RECAPTCHA]") ceci te renvoi un objet JSON que tu vas decoder avec la function json_decode([TA_REPONSE])généralement cet objet renvoie true ou false tu n'auras qu'à faire des verifications sur le resultat de l'utilisateur:
Du genre : si true....
sinon ....
et puis à ce niveau : <div id="recaptcha" class="g-recaptcha" data-sitekey="<?php echo $key ?>" data-callback="onSubmit" data-size="invisible"></div> pas besoin de faire un truc dynamique (<?php echo $key ?>).
tu copies colle ta clé publique sans problème : <div class="g-recaptcha" lang="fr" data-sitekey="[CLE_PUBLIQUE]"></div>
au niveau des scripts JS :
<!-- Google reCaptcha script -->
<script src="https://www.google.com/recaptcha/api.js?hl=fr" async defer></script>
Le ?hl=fr pour la traduction des texte en français async pour l'asynchronicité
Salut,
Je ne suis pas sûr que tu ai bien compris ma demande.
Je sais comment foncitonne reCAPTCHA, j'ai déjà mis en place la version 2, classique.
Je sais comment valider la captcha après, si tu regardes mon script cURL, c'est exactement la même chose qu'avec le file_get_content. Mais je le fais avec une requête POST comme demandé dans la doc.
Il n'est pas obligatoire de mettre le async et defer. Et idem pour le paramètre hl=fr car le script détecte la langue du navigateur. Cela est utile si dans le site, tu gères du multilangue et ainsi forcer la langue du captcha.
Ma question est : Pourquoi mon formulaire ne veut pas se soumettre dans ma fonction onSubmit ?
Car si je ne fais pas de validation des données de mon formulaire, que je fais juste un bouton submit, la validation se fait correctement.
Et vu que tu me dis que je ne suis pas obligé de mettre la clé en dynamique, 1) c'est un script de test donc normal que le PHP ne soit pas optimisé et/ou que le code soit "salle" et 2) si en fait je suis obligé car je génère une clé par client avec qui je travaille.
J'espère avoir pu donner un peu plus de lumière quant à mon problème.
Merci
hello,
tu récupères bien ton form avec jQuery(document).find('#demo-form') ?
tu as debugguer pour voir ?
Salut,
Oui j'ai débuggé et j'ai bien le contenu de mon form quand je fais jQuery(document).find('#demo-form').serialize();, donc la fonction onSubmit est bien lancée. Mais le form n'est pas soumis
jQuery(document).find('#demo-form').attr('action'), est bon aussi donc...
tu as tenté un var_dump($_POST) ?
Je voudrais bien mais le soucis c'est que je ne peux pas avoir de $_POST tant que le formulaire n'est pas soumis. C'est comme si j'avais un return false à la soumission du formulaire. C'est bloqué, il ne se passe rien
S'il était soumis je verrai forcément quelque chose dans mon onglet network dans le devtool, et en plus s'il est soumis, le contenu de mon formulaire ne serai plus présent, or, c'est encore présent
hummm.... cho...
tu ne peux pas récupérer la valeur de tes inputs dans ta function callback ? genre : var onSubmit = function(token, inputs) { ?
parce qu'au pire dans ton callback tu pourrais récupérer la valeur de tes inputs et faire un window.location avec tes params en get....
c moche mais si tu ne veux pas utiliser ajax, je ne vois que ça... d'ailleurs, pourquoi tu ne veux pas utiliser ajax ?
C'est une idée, mais comment je fais si je dois envoyer des fichiers ? Ce qui m'arrivera forcément un jour ou l'autre
Et tu sais comment sa se comporte niveau compatibilité ? J'ai besoin d'un support IE9 et supérieur
Bonsoir.
Je garde ça sous le coude. Merci.
D'autres personnes ont des idées ?
Avant de demander d'autres pistes, commences déjà par celles qui te sont déja proposées.
Merci Lartak, mais n'étant pas au bureau je ne peux pas tester ça.
Et puis sincèrement je prefèrerai utiliser quelque chose sans polyfils. Google a forcément pensé à quelque chose sans passer par des polyfils