Ajax reCaptcha 2.0验证

Question

I have a form that submits via Ajax. I want to implement Google's Recaptcha 2.0 on this form. My ajax is posting to a PHP script. Everyone works great until I try to implement captcha.

I just want to know how to verify in my ajax that the recaptcha was checked.

My code is below:

HTML

<div class="container">
<div class="row">
    <div class="col-lg-4">
    <form role="form" id="contactForm">
    <div id="msgSubmit" class="h3 text-center hidden"></div>
        <div class="row">
            <div class="form-group col-sm-6">
                <label for="name" class="h4">Name</label>
                <input type="text" name="name" class="form-control" id="name" placeholder="Enter name" required data-error="Please enter your name">
                <div class="help-block with-errors"></div>
            </div>
            <div class="form-group col-sm-6">
                <label for="email" class="h4">Email</label>
                <input type="email" name="email" class="form-control" id="email" placeholder="Enter email" required data-error="Please enter your email">
                <div class="help-block with-errors"></div>
            </div>
        </div>
        <div class="form-group">
            <label for="message" class="h4 ">Message</label>
            <textarea id="message" name="message" class="form-control" rows="5" placeholder="Enter your message" required data-error="Please enter your message"></textarea>
            <div class="help-block with-errors"></div>
        </div>
        <div class="form-group">
            <div class="g-recaptcha" id="captcha" data-sitekey="#mySiteKey#" data-error="Please prove your human"></div>
            <div class="help-block with-errors"></div>
        </div>
        <button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right">Submit</button>
    </form>
    </div>
</div>

Javascript

function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();

$.ajax({
    type: "POST",
    url: "includes/core/class.contact2.php",
    data: "name=" + name + "&email=" + email + "&message=" + message,
    success : function(text){
        if (text == "success"){
            formSuccess();
        } else {
            formError();
            submitMSG(false,text);
        }
    }
});

}

PHP

//set error message
$errorMSG = "";
//check if fields are filled in
if(empty($_POST['name'])) {
    $errorMSG = "Name is required";
}   else {
    $name = $db->quote($_POST['name']);
}
if(empty($_POST['email'])) {
    $errorMSG = "Email is missing";
} else {
    $email = $db->quote($_POST['email']);
}
if(empty($_POST['message'])) {
    $errorMSG = "Message is missing";
} else {
    $message = $db->quote($_POST['message']);
}

//insert result
$result = $db->query("INSERT into requests (name,email,message) VALUES (". $name ."," . $email . "," . $message . ")");

Answer 1

I just want to know how to verify in my ajax that the recaptcha was checked

You have to know how reCaptcha works. After user clicks reCaptcha and google server returns result, google api on client side creates a new hidden form field with returned encoded value (that contains info if test is passed or not), docs. So you add this field value into your submission procedure:

function submitForm(){
// Initiate Variables With Form Content
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var g_captcha_response = $("#g-recaptcha-response").val();
$.ajax({
type: "POST",
url: "includes/core/class.contact2.php",
data: "name=" + name + "&email=" + email + "&message=" + message, "&resp=" + $("#g-recaptcha-response").val(),
success : function(text){
    if (text == "success"){
        formSuccess();
    } else {
        formError();
        submitMSG(false,text);
      }
   }
});

And after that you need to verify this response (server side) using secret key:

header('Content-type: application/json');
$url='https://www.google.com/recaptcha/api/siteverify';
$response=$_POST['resp'];
$secret = "[secter_key]"; 
$params = array('secret'=> $secret, 'response'=> $response);
$json=file_get_contents( $url  . '?secret=' . $secret . '&response=' .    $response);
echo $json;