google 使用 ajax 和 php 的 recaptcha v2

google recaptcha v2 with ajax and php

我正在尝试使用 ajax php 验证 google recaptcha v2，但它提交时没有验证我的代码。

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

从这里我将所有信息发送到我的另一个 php 页面，我正在那里验证 recaptcha：

$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}

如果您要使用 ajax 提交表单，首先您必须拦截提交操作并阻止默认行为。这可以通过两种方式完成。

  1. 通过 prevendDefault() 方法：

    $('#form').submit(function(e){
     e.preventDefault();

   // process here
})

  2. 通过 return 错误：

    $('#form').submit(function(e){
    // process here

   return false;
})

除了捕获 submit() 事件之外，您还可以通过捕获提交按钮的点击事件来实现相同的行为：

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

或者您可以再次 return false。

验证码验证完成后，如果验证成功，您就可以处理数据了。例如保存在数据库中，通过电子邮件发送等。您还必须将一些响应回显给浏览器，以指示操作是否成功。然后您的 ajax 呼叫可以接听并采取必要的行动：

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

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

现在回到您进行 ajax 调用的位置，您可以按如下方式处理响应：

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

希望这对您有所帮助。

  1. 您必须在 https://developers.google.com/recaptcha/docs/display
    2. 上获得钥匙

你的表格

<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 脚本

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

我们的文件"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!!";
}