Bonsoir à tous, j'ai un problème concernant Recaptcha et Ajax.

Comme vous le savez très probablement, Recaptcha charge sa iframe au chargement de la page. Seulement, moi j'utilise du Ajax pour valider mon formulaire, donc pas de rafraichissement de page.

Ma question est donc, comment je peux faire pour rafraichir mon recaptcha sans rafraichir toute ma page ?

12 réponses


otakodes
Réponse acceptée

EDIT :

après avoir lu la doc et quelques recherches (je savais que c'était dedans) faire la ligne suivant dans ton callback ajax règle le soucis :

grecaptcha.reset()

OLD :
sans bout de code, compliqué de t'aider, un seul conseil, lire la doc reCaptcha :) https://developers.google.com/recaptcha/docs/display
Toutefois, comme dit dans mon commentaire précédent, un bot ne peut pas activer de JS, donc ne peut pas déclencher d'ajax. Si ton serveur vérifie que chaque requête venant du form est en ajax t'es sûre à 90% que ce sera pas un bot
10% chance que les bots les plus perfectionné (qui savent parler js) viennent le risque est assez minime :)

tu reload l'iframe, donc le recaptcha :

document.getElementById('id_de_ton_iframe').contentWindow.location.reload();

vu que je ne sais pas si tu utilises que du html/js ou avec php, voilà une solution alternative http://www.bonneville.be/post/recaptcha-en-ajax/

Brokeos
Auteur

Merci de ta réponse rapide darkylmnx.

Seulement, la 1ère méthode ne fonctionne malheuresement pas.

Pour la 2ème, c'est pareil, j'avais déjà essayé avant de poster, mais je ne sais pas comment remplir la variable $captcha du script php.

c'est parce qu'il s'est trompé dans son code, il voulait écrire

$recaptchaJs = str_replace('document.write','$("body").append',$recaptchaJs);

en gros il dit : replace le document.write par un jQuery append (si tu n'a pas jQuery dans ta page pour le coup ça ne marchera pas)

Sur la doc google je vois aussi que on peut faire appel au sdk de reCaptcha en js donc au succes de ton ajax :

grecaptcha.render('html_element', {
'   sitekey' : 'your_site_key'
});

ça devrait remettre en nouveau captcha, à toi d'enlever l'ancien.

PS : je ne sais pas comment est fait le script server mais bon, un bot ne peux pas executer de js, donc pas besoin de captch si ton formulaire en back vérifie bien que la reqûet est en Ajax avant de la valider, tu vois ce que je veux dire ?

Brokeos
Auteur

Je n'arrive toujours pas à le mettre en place ! xD

Brokeos
Auteur

Super. Je regarde ça demain ! :)
Et je sécurise mon formulaire ajax car il pointe vers du PHP. D'où le captcha. Sinon je n'aurais pas utiliser de captcha :).

même si il pointait vers du ruby ou autre ce serait pareil. Sur ton serveur quand tu fais de l'ajax, la bonne pratique serait de faire un truc du genre :

// server
<?php

// fonction qui detect une requête AJAX
functnion isAjax() {
   return !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

if( isAjax() ) { ... ton code php ici ... }

et ça "HTTP_X_REQUESTED_WITH" ne pourrai jamais être déclenché par un bot, après on peut même mieux faire c'est setter un header lors du call ajax et detecter ce header côté serveur

Brokeos
Auteur

Ah merci ! J'ignorais complètement cette fonction ! :)

Pour le header, ça serais inutile dans le cas où le header est visible dans le JS, donc facile de le c/c pour le simuler :).

Brokeos
Auteur

Super ! grecaptcha.reset() fonctionne à merveille !

Et merci pour la fonction ! Elle fonctionne à merveille aussi ! :)

non je parle d'un HEADER http un bot ne peut le simuler si tu crée un HEADER perso envoyé en ajax car le bot ne lis pas le js. Avec jquery c'est un truc du genre :

$.ajax({
    url: 'YourRestEndPoint',
    headers: {
        'X_CSRF_TOKEN':'xxxxxxxxxxxxxxxxxxxx',
    },
    method: 'POST',
    data: YourData,
    success: function(data){ }
  });

mais bon la fonction php ajax fonction en général :)