Question

我有一个通过Ajax提交的表单。我想在此表单上实现Google的Recaptcha 2.0。我的ajax发布到PHP脚本。在我尝试实施验证码之前，每个人都工作得很好。

我只是想知道如何在我的ajax中验证recaptcha已经过检查。

我的代码如下：

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

我只是想知道如何在我的ajax中验证recaptcha已被检查

您必须知道reCaptcha works的方式。用户点击reCaptcha并且google服务器返回结果后，客户端的google api会创建一个新的隐藏表单字段，其中包含返回的编码值（如果传递了测试，则包含信息），docs。因此，您将此字段值添加到提交过程中：

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);
      }
   }
});

之后，您需要使用密钥验证此响应（服务器端）：

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;

Ajax reCaptcha 2.0验证

1 个答案: