Как реализовать reCAPTCHA с AJAX для отправки почты в php?

Question

Я пытаюсь добавить recaptcha Google в контактную форму моего веб-сайта. Я использовал <input type="submit"> вместо тега кнопки для отправки формы. Но он не работает с AJAX. И с тегом кнопки, ответ captcha всегда пуст. Вы можете проверить наличие проблемы на vipiny.com.

Это контактная форма.

<form action="" method="post" id="contactForm" name="contactForm"> 
    <div> 
     <label for="contactName">Name <span class="required">*</span></label> 
     <input type="text" value="" size="35" id="contactName" name="contactName"> 
    </div> 
    <div> 
     <label for="contactEmail">Email <span class="required">*</span></label> 
     <input type="text" value="" size="35" id="contactEmail" name="contactEmail"> 
    </div> 
    <div> 
     <label for="contactSubject">Subject</label> 
     <input type="text" value="" size="35" id="contactSubject" name="contactSubject"> 
    </div> 
    <div> 
     <label for="contactMessage">Message <span class="required">*</span></label> 
     <textarea cols="50" rows="3" id="contactMessage" name="contactMessage"></textarea> 
    </div> 
    <div class="g-recaptcha captcha" data-theme="light" data-sitekey="6LfAkhQUAAAAAC2D3LxhB9XtYeoJGhuvR31sq9HW"></div> 
    <div> 
     <button class="submit">Submit</button> 
    </div> 
</form> <!-- Form End --> 

И я использую ajax для отправки данных в файл sendMail.php.

$('form#contactForm button.submit').click(function() { 

    $('#image-loader').fadeIn(); 

    var contactName = $('#contactForm #contactName').val(); 
    var contactEmail = $('#contactForm #contactEmail').val(); 
    var contactSubject = $('#contactForm #contactSubject').val(); 
    var contactMessage = $('#contactForm #contactMessage').val(); 

    var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail + 
      '&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage; 

    $.ajax({ 

     type: "POST", 
     url: "inc/sendEmail.php", 
     data: data, 
     success: function(msg) { 

     // Message was sent 
     if (msg == 'OK') { 
      $('#image-loader').fadeOut(); 
      $('#message-warning').hide(); 
      $('#contactForm').fadeOut(); 
      $('#message-success').fadeIn(); 
     } 
     // There was an error 
     else { 
      $('#image-loader').fadeOut(); 
      $('#message-warning').html(msg); 
      $('#message-warning').fadeIn(); 
     } 

     } 

    }); 
    return false; }); }); 

И это до сих пор мой файл sendMail.php. Я пытаюсь проверить, что если $error['captcha'] пуст вместе с другими проверками полей ввода, почта будет отправлена.

$secret = "<--secret key-->"; 
$user_ip = $_SERVER['REMOTE_ADDR']; 

if(isset($_POST['g-recaptcha-response'])){ 
    $response = $_POST['g-recaptcha-response']; 
    // echo "GOT response:".$response."<br/>"; 
} 
else{ 
    // echo "No reCAPTCHA response.<br/>"; 
} 

//Verify response data 
$verifyResponse = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secret&response=$response&remoteip=$user_ip"); 
$responseData = json_decode($verifyResponse); 
if(!$responseData->success){ 
    $error['captcha'] = "Please prove that you're not a robot.";  
} 

Любые предложения, что может быть неправильным?

Answer 1

Вы забыли добавить ? после URL

url: "inc/sendEmail.php?", 

ИЛИ

вы можете оставить из ? и отправить свои данные, как

data: { this: this, that: that, another: another}, 

также, так как вы не размещение с g-recaptcha-response в php-файл с формой, но вместо этого с AJAX вы должны отправить сообщение вручную в свой php-файл.

var g-recaptcha-response= $('#contactForm .g-recaptcha-response').val(); 

var data = 'contactName=' + contactName + '&contactEmail=' + contactEmail + 
     '&contactSubject=' + contactSubject + '&contactMessage=' + contactMessage + '&g-recaptcha-response=' + g-recaptcha-response; 

вам сделал также нужно, чтобы это подтвердить ReCaptcha в PHP

require_once('recaptchalib.php'); 
    $privatekey = "your_private_key"; 
    $resp = recaptcha_check_answer ($privatekey, 
           $_SERVER["REMOTE_ADDR"], 
           $_POST["recaptcha_challenge_field"], 
           $_POST["recaptcha_response_field"]); 

    if (!$resp->is_valid) { 
    // What happens when the CAPTCHA was entered incorrectly 
    die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." . 
     "(reCAPTCHA said: " . $resp->error . ")"); 
    } else { 
    // Your code here to handle a successful verification 
    } 

https://developers.google.com/recaptcha/old/docs/php