comment tester Recaptcha avec jQuery Valider plugin

Il n'y a pas de solution simple uniquement à l'aide de JavaScript ou jQuery. Depuis que vous avez à comparer les Re-Captcha code à l'aide de l'API avec votre privé clé, pour une bonne sécurité, vous doit faire de ce processus avec certains serveurcode côté.

1. Utilisateur remplit le formulaire correctement à l'exception de Re-Captcha code.

2. Si Re-Captcha code est vide, normal required règle en jQuery Valider les déclencheurs manquantes "Captcha" message. L'utilisateur peut essayer de nouveau.

3. Une Re-Captcha code d'entrée (à tort ou à raison), le formulaire est soumis à votre serveurcôté code via jQuery ajax dans le submitHandler fonction de rappel.

4. Votre serveurcôté code, PHP, Perl, que ce soit, puis utilise votre clé API pour vérifier les entrées Re-Captcha code contre la Re-Captcha code prévu par l'API.

5. Si Re-Captcha code est correct, votre serveurcode côté continue comme d'habitude, et renvoie un "succès" texte de réponse à votre jQuery ajax success fonction de rappel.

6. Si Re-Captcha code est incorrect, votre serveurcôté code seulement retour d'une "erreur" réponse de texte à votre jQuery ajax success fonction de rappel, et le code côté serveur ne fait rien d'autre.

7. Au sein de votre jQuery ajax success fonction de rappel, lire le texte du message retourné par le serveur-côté code.

8. Si le retour de message indique un succès, alors votre formulaire a déjà été soumis avec succès et vous pouvez rediriger, claire de la forme, faire une animation, imprimer un message, ne rien faire, ou que ce soit, etc.

9. Si le retour de message indique l'échec, de générer une nouvelle Re-Captcha code via JavaScript, afficher un message d'erreur, "incorrect Captcha entré", et l'utilisateur peut tout simplement essayer de nouveau.

---

C'est la façon dont j'ai fait le mien... vous aurez besoin de faire quelque chose de très semblable à la suivante.

Ajouter un submitHandler à votre .validate() options et l'utilisation ajax de contrôle de la soumission du formulaire. C'est la seule façon vous pouvez interagir avec le Captcha et de contrôle de la soumission du formulaire.

Vous aurez également besoin de modifier votre fonction côté serveur pour tester si le captcha est passé ou non, de faire la fonction appropriée, et de retourner le bon ajax message, msg. Sans rien savoir à propos de votre code côté serveur, il est impossible de dire quelque chose de plus spécifique.

(REMARQUE: toute solution est purement JavaScript/jQuery, sans modification de votre code côté serveur, est pas sécurisé. Captcha peut être facilement contourné et votre clé API est exposé au public.)

$(document).ready(function() {
$("#contact").validate({
//your other options and rules,
submitHandler: function (form) {
$.ajax({
type: 'POST',
data: $('form').serialize(),
url: 'formMail.pl', //<-- whatever your server-side script, mine is a perl form mailer
success: function (msg) {
if (msg.indexOf('captcha') != -1) {
Recaptcha.reload(); //reloads a new code
$('#recaptcha_response_field').before(msg); //error message
} else {
//anything else to do upon success, animations, etc.
//form was already submitted as per ajax
}
}
});
return false; //blocks normal form submit
}
});
});

Ce qui suit est seulement un PERL exemple de la façon dont j'ai modifié mon code côté serveur qui était une Forme Mailer script. Vous devrez vous adapter votre code côté serveur dans certains de la même façon.

La sous-routine check_captcha est appelée lorsque le script s'exécute en premier.

sub check_captcha {     
my $ua = LWP::UserAgent->new();
my $result=$ua->post(
'http://www.google.com/recaptcha/api/verify',
{
privatekey => 'xxxxxxxxxxxxx',  # insert your private key here
remoteip   => $ENV{'REMOTE_ADDR'},
challenge  => $Form{'recaptcha_challenge_field'},
response   => $Form{'recaptcha_response_field'}
}
);
if ( $result->is_success && $result->content =~ /^true/) {
return;  # OK - continue as normal with Form Mailer
} else {
# error, Form Mailer will not continue
&error('captcha_failed'); # failed Captcha code, call error subroutine to print an error message (msg) containing the word "captcha"
}
}

Rappelez-vous que ce code côté serveur doit retour un message indiquant que votre jQuery ramasse au sein de votre jQuery ajax success rappel que msg ci-dessus. Dans mon exemple, si le message contient le mot "captcha", cela signifie que le code a été entré mauvais et les utilisateurs doivent entrer un nouveau code Captcha.