Searching about setting up reCaptcha seems to lead to using jQuery validation. However I'm not sure how to do this in the context of an ajax form submission.
Presently I'm using Validity, not jQuery Validation. I have the script reference in my header and the key in place.
Where in the process should I validate the reCaptcha?
<form id="intake-form" class="grid-form" action="javascript:void(0);">
...
<div class="g-recaptcha" data-sitekey="key_here"></div>
<input type="submit" name="submit" value="Send!" />
<br />
<p id="formstatus"></p>
</form>
$("#intake-form").submit(function () {
var str = $(this).serialize();
if (validateIntakeForm()) { // validate intake fields with validity
$.ajax({
type: "POST",
url: global['base']+"intakeform",
data: str,
success: function (msg) {
$("#formstatus").ajaxComplete(function (event, request, settings) {
if (msg == 'success') {
result = '<div class="successmsg">Your request has been sent.';
$('#intake-form').clearForm();
} else {
result = 'There was a problem sending your message.<br />' + msg;
}
$(this).html(result);
});
}
});
return false;
}
});
Google will validate your re-captacha for you. Check below example.
<?php
//first i retrieved the recaptcha coming through post method.
//i have used post method, you can use any method you want.
$recaptcha = $_POST['g-recaptcha-response'];
//After retrieving send a post curl request to verify it.
//you will have to send your secret key along with it.
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS,"secret=*******************************=".$recaptcha);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$server_output = curl_exec ($ch);
$server_output = json_decode($server_output,true);
curl_close ($ch);
if($server_output['success']){
// captacha validated successfully.
}else{
// invalid captcha
}
?>
You can refer the docs.
You can use google plugin to validate recaptcha in php try this link and then include this code in your php validation script
$recaptcha = new \ReCaptcha\ReCaptcha( RECAPTCHA_SECRET_KEY );
$resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER["REMOTE_ADDR"] );
if(!$resp->isSuccess()) //ERROR CAPTCHA NOT VALIDATED
I have successfully implemented recaptcha on one of my websites. I've not played with it since a long time so I don't know exactly how Google handles this.
But anyway, here is a simplified version of my working code, hopefully it can help you.
<body>
<form method="post" action="">
<!-- your regular form fields here... -->
<div class="g-recaptcha" data-callback="processCaptcha" data-sitekey="THE_KEY_HERE"></div>
<!-- or your regular form fields here... -->
<input type="submit" value="Send"/>
</form>
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=eng"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</body>
For the script with src="https://www.google.com/recaptcha/api.js?hl=eng", I noted a reference to this link: https://developers.google.com/recaptcha/docs/language.
And server side:
<?php
$secret = "THE_KEY_HERE";
$errors = [];
$gRecaptchaResponse = $_POST["g-recaptcha-response"];
$recaptcha = new \ReCaptcha\ReCaptcha($secret); // this class is provided by google
$resp = $recaptcha->verify($gRecaptchaResponse, $_SERVER['REMOTE_ADDR']);
if (false === $resp->isSuccess()) {
// $errors = $resp->getErrorCodes();
$errors[] = "Boo, you are a bot";
}
if (empty($errors)) {
// your success routine here
}
else {
// your error routine here
}