Google Recaptcha verification ajax and Php

Question

我正在尝试在Google recaptcha v2上实现JavaScript模式，并在同一页面上形成。我在验证问题上有问题。在这里，我的Ajax调用和PHP代码。我无法识别PHP中的代码RECAPTCHA验证。我有评论堆栈溢出答案，但无法解决我的问题。

这是我的index.php代码，并进行AJAX调用。

<script>
$("#Maincontact").validate({
            rules: {
                inputbox: "required",
                firstname: { required: true,},
                lastname: { required: true,},
                email: {    required: true,
                            email: true
                },
                phone: {
                    required: true,
                    phonenumber: true
                },
            },`
            `messages: {
                firstname: "Please enter your first name",
                lastname: "Please enter your last name",
                email: "Please enter a valid email address",
                phone: "Please enter a valid phone number"
            },
            errorElement: "span",
            errorClass: "form-error",
            invalidHandler: function(form, validator) { },
            submitHandler: function (form) {
                var firstname       = $('#firstname1').val();
                var lastname        = $('#lastname1').val();
                var message         = $('#message').val();
                var email           = $('#email1').val();
                var phone           = $('#phone1').val();
                var gcaptchaVal = $("#g-recaptcha-response").val();
var jqxhr = $.post( "mail_send.php", { firstname: firstname, lastname: lastname,email: email,phone: phone,message: message, gcaptcha1: gcaptchaVal }, function(data) {
                if(data == '1'){
                    $('#recaptcha2').html('Captcha successfully');
                    $('#emailAlert1').addClass('green');
                    $('.formItems-body').hide();
                    $('#emailAlert1').html('Message sent successfully');
                } else {//alert('hie');die;
                    $('#emailAlert1').removeClass('green');
                    $('#emailAlert1').html(data);
                    $('#recaptcha2').html('Please Fill recaptcha');
                }
                }).done(function(data) {
                }).fail(function(data) {
                    alert( "An error occured. Please try again" );
                });
                return false;
            }
        });

这是我的形式：

<form action="/mail-send" method="post" name="contactForm" id="Maincontact">
    <div class="modal-body">
      <div class="modal-bodyInn">`
        <span id="emailAlert1"></span>
            <div class="box-contactField formItems-body">
                <div class="row-contactField">
                    <div class="col-contactField6">
                       <input class="input-contact required" type="text" title="First Name" placeholder="First Name" name="firstname" id="firstname1" />
                    </div>
                    <div class="col-contactField6">
                       <input class="input-contact required" type="text" title="Last Name" placeholder="Last Name" name="lastname" id="lastname1" />
                    </div>
                </div>
            <div class="row-contactField">
                <div class="col-contactField12">
                   <input class="input-contact required" type="text" title="Email Address" placeholder="Email Address" name="email" id="email1"/>
                </div>
            </div>                  
         <div class="row-contactField">
            <div class="col-contactField6">
                <input class="input-contact required" type="text" title="Phone Number" placeholder="Phone Number" name="phone" id="phone1"/>
            </div>
        </div>
        <div class="row-contactField">
         <div class="col-contactField12">
            <textarea class="textarea-contact required" placeholder="Message" name="message" id="message"></textarea>
            </div>
        </div>
     <div class="form-group">
         <div class="g-recaptcha" id="recaptcha2" data-sitekey="XXXXXXXXXXXXXX">
    </div>
</div>
<div class="box-send"><input class="input-sendContact" type="submit" title="SEND" value="SEND" id="emailSubmit"/>
</div>
    </div>
</div>
</div>
</form>

我在同一页面上有三个Google Recaptcha：

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
 <script type="text/javascript">
  `var verifyCallback = function(response) {
    alert(response);
  };
  var widgetId1;
  var widgetId2;
  var widgetId3;
  var onloadCallback = function() {
        widgetId1 = grecaptcha.render('recaptcha1', {
          'theme' : 'light'
        });
         widgetId2 = grecaptcha.render('recaptcha2', {
          'theme' : 'dark'
        });
        widgetId3 = grecaptcha.render('recaptcha3', {
          'theme' : 'light'
        });
      };
</script>

我有验证问题。谢谢

Answer 1

recaptcha实现中有2个部分，前端部分和后端部分，您已经实现了前端，在您的服务器中，您必须使用Google服务验证该响应已验证。

$curl = curl_init();
$postfields = array(
  'secret' => '[YOUR_SECRET_KEY]', //This is different to your sitekey
  'response' => $_POST['g-recaptcha-response'],
);
$options = array(
  CURLOPT_RETURNTRANSFER => 1,
  CURLOPT_URL => 'https://www.google.com/recaptcha/api/siteverify',
  CURLOPT_POST => 1,
  CURLOPT_POSTFIELDS => http_build_query($postfields),
  CURLOPT_SSL_VERIFYPEER => 0
);
curl_setopt_array($curl, $options);
$response = json_decode(curl_exec($curl), true);
if($response['success']){
    //pass the reCaptcha Validation
}