reCaptcha Invisible

Par BaBeuloula, il y a 9 ans

Javascript

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

Ekim Kael, il y a 9 ans

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 ....

Ekim Kael, il y a 9 ans

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é

BaBeuloula, il y a 9 ans

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

saibe, il y a 9 ans

hello,
tu récupères bien ton form avec jQuery(document).find('#demo-form') ?
tu as debugguer pour voir ?

BaBeuloula, il y a 9 ans

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

saibe, il y a 9 ans

jQuery(document).find('#demo-form').attr('action'), est bon aussi donc...
tu as tenté un var_dump($_POST) ?

BaBeuloula, il y a 9 ans

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

saibe, il y a 9 ans

il est peut être soumis mais rien ne se passe...
et dernière question curl est activé ?

BaBeuloula, il y a 9 ans

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

saibe, il y a 9 ans

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 ?

BaBeuloula, il y a 9 ans

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

saibe, il y a 9 ans

bonne question : peut-être ça ...

BaBeuloula, il y a 9 ans

Et tu sais comment sa se comporte niveau compatibilité ? J'ai besoin d'un support IE9 et supérieur

saibe, il y a 9 ans

je ne trouve pas les infos... mais g ça plus complet...

saibe, il y a 9 ans

oups, il te faudra un polyfill, g trouvé ceci

BaBeuloula, il y a 9 ans

Je garde ça sous le coude. Merci.

D'autres personnes ont des idées ?

saibe, il y a 9 ans

ok, je passe la main ;) ++

Lartak, il y a 9 ans

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.

BaBeuloula, il y a 9 ans

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