使用ajax和php的google recaptcha v2

Question

I am trying to validate google recaptcha v2 using ajax php but it submitted without validating my code.

if((fnameerr == "no") && (lnameerr == "no") && (emailerr == "no") && (cnameerr == "no") && (discounterr == "no") && (addresserr == "no") && (descerr == "no")){
                $.ajax({
                    url:"promoform.php",
                    method:"POST",
                    data:{fname:fname, lname:lname, email:email, cname:cname, discount:discount, address:address, desc:desc, website:website, captcha: grecaptcha.getResponse()},
                    success: function(data){
                        if($("#promotionSuccess").hasClass("hidden")){
                            $("#promotionSuccess").removeClass("hidden");
                        }
                        $("#mailErrorMessage").html(data);
                    }
                    });

from here I'm sending all info to my another php page and I am validating recaptcha there:

$secret = "my secret key is here which I got from google";
$response = $_POST["captcha"];
$remoteip = $_SERVER['REMOTE_ADDR'];
$url = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$response&remoteip=$remoteip");
$content = json_decode($url, TRUE);
if($content['success'] ==1){ do somthing}

Answer 1

If you are to submit the form with ajax, first you have to intercept the submit action and block the default behavior. This can be done in two ways.

1. via prevendDefault() method:

   \n$('#form').submit(function(e){ \n     e.preventDefault(); \n\n   // process here \n}) \n

2. by returning false:

   \n$('#form').submit(function(e){ \n    // process here \n\n   return false; \n}) \n

Instead of capturing the submit() event, you can also achieve the same behavior by capturing the submit button's click event:

$('#mysubmitbutton').click(function(e){
   e.preventDefault();
   // process here
})

or again you can return false.

When your captcha validation is done, if it is successful you can process your data. for example save in a db, emailing etc. Also you have to echo some response back to the browser indicating whether the operation was successful or not. Then your ajax call can pick it up and take the necessary action:

if($content['success'] ==1){
    // valid -> do something

    echo json_encode(array('status' => 'true'));
    exit;
}
else{
    // not valid
    echo json_encode(array('status' => 'false'));
}

Now back in where you made your ajax call, you can process the response as follows:

success: function(data){
  res = JSON.parse(data);    // parse response to a js object

  if(res.status == 'true')
  {
     alert('Form was submitted successfully!');
  }
  else
  {
     alert('Captcha validation falied! Please try again');
  }
}

Hope this helps.

Answer 2

1. Your must get key on https://developers.google.com/recaptcha/docs/display

Your form

<form id="order-form">
    <input  id="Name" type="text" placeholder="Name" name="name" required/>
    <input id="email" type="email" placeholder="Email" required/>
    <textarea id="message" name="message" required cols="50" rows="5" maxlength="1000"></textarea>

    <div class="g-recaptcha" data-sitekey="YOUR KEY"></div>
    <button type="submit">Send</button>
</form>

AJAX script

    var contactForm = $("#order-form");
              contactForm.on("submit", function(e) {
                e.preventDefault();
                var name = $("#name").val();
                var email = $("#email").val();
                var message = $("#message").val();

                $.ajax({
                  type: "POST",
                  url: "callback.php", //Our file 
                  data: {
                    name: name,
                    email: email,
                    message: message,                    
                    captcha: grecaptcha.getResponse()

                  },
                  success: function(response) {
                   //Here add to front-end message
                    $('#order-form +.result-form').html(response);
                    grecaptcha.reset(); // Reset reCaptcha
                  }
                })
              });

OUR file "CallBack"

$username = $_POST['name'];
$usermail = $_POST['email'];
$usermessage = $_POST['message'];

$secret=" OUR SECRET KEY FROM reCaptcha"; 
$response=$_POST["captcha"];
$verify=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret}&response={$response}");
$captcha_success=json_decode($verify);
if ($captcha_success->success==false) {
echo "Error, you are a robot?";
}
else if ($captcha_success->success==true) {
echo "successful!!";
}