ReCaptcha 2.0 Mit AJAX

Question

Ich habe es geschafft, ReCaptcha 2.0 in meiner Website arbeiten zu lassen. Es funktioniert jedoch nur, wenn ich AJAX nicht verwende und ich das Formular "natürlich" einreichen lasse.

Ich möchte das Formular mit dem Captcha senden und den Benutzer mit einer Erfolgsmeldung warnen, ohne die Seite zu aktualisieren.

Ich habe versucht, den folgenden Code, aber es scheint, als ob der Server die Benutzerantwort bekommt:

HTML:

<form class="form" action="javascript:void(0)" novalidate> 
    <!-- all the inputs... --> 

    <!-- captcha --> 
    <div class="input-group"> 
     <div class="g-recaptcha" data-sitekey="6LdOPgYTAAAAAE3ltWQGar80KUavaR-JblgPZjDI"></div> 
    </div> 

    <div class="errors" id="errors" style="display: none"></div> 

    <div class="input-group"> 
     <input type="button" value="Send" class="btn-default right" id="submit"> 
     <div class="clear"></div> 
    </div> 
</form> 

JS:

$('#submit').click(function(e) { 
    console.log('clicked submit'); // --> works 

    var $errors = $('#errors'), 
     $status = $('#status'), 

     name = $('#name').val().replace(/<|>/g, ""), // prevent xss 
     email = $('#email').val().replace(/<|>/g, ""), 
     msg = $('#message').val().replace(/<|>/g, ""); 

    if (name == '' || email == '' || msg == '') { 
     valid = false; 
     errors = "All fields are required."; 
    } 

    // pretty sure the problem is here 
    console.log('captcha response: ' + grecaptcha.getResponse()); // --> captcha response: 

    if (!errors) { 
     // hide the errors 
     $errors.slideUp(); 
     // ajax to the php file to send the mail 
     $.ajax({ 
      type: "POST", 
      url: "http://orenurbach.com/assets/sendmail.php", 
      data: "email=" + email + "&name=" + name + "&msg=" + msg + "&g-recaptcha-response=" + grecaptcha.getResponse() 
     }).done(function(status) { 
      if (status == "ok") { 
       // slide down the "ok" message to the user 
       $status.text('Thanks! Your message has been sent, and I will contact you soon.'); 
       $status.slideDown(); 
       // clear the form fields 
       $('#name').val(''); 
       $('#email').val(''); 
       $('#message').val(''); 
      } 
     }); 
    } else { 
     $errors.text(errors); 
     $errors.slideDown(); 
    } 
}); 

PHP:

<?php 
    // assemble the message from the POST fields 

    // getting the captcha 
    $captcha = ''; 
    if (isset($_POST['g-recaptcha-response'])) 
     $captcha = $_POST['g-recaptcha-response']; 
    echo 'captcha: '.$captcha; 

    if (!$captcha) 
     echo 'The captcha has not been checked.'; 
    // handling the captcha and checking if it's ok 
    $secret = 'MY_SECRET'; 
    $response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']), true); 

    var_dump($response); 

    // if the captcha is cleared with google, send the mail and echo ok. 
    if ($response['success'] != false) { 
     // send the actual mail 
     @mail($email_to, $subject, $finalMsg); 

     // the echo goes back to the ajax, so the user can know if everything is ok 
     echo 'ok'; 
    } else { 
     echo 'not ok'; 
    } 
?> 

Das Ergebnis in der PHP-Seite:

captcha: The captcha has not been checked.array(2) { ["success"]=> bool(false) ["error-codes"]=> array(1) { [0]=> string(22) "missing-input-response" } } not ok 

Unterm Strich ist, wie kann ich die Eingangsantwort manuell erhalten, ohne es automatisch mit dem Rest der POST-Daten gehen?

Answer 1

Ok, das war ziemlich albern.

Ich habe ein paar Dinge falsch gemacht:

• In der PHP-Datei, alle Saiten auf ihnen einfache Anführungszeichen hatte, und das verursacht Probleme.
• Während der Tests, fügte ich mehrere Drucke von Dingen in der PHP-Datei, so dass die if (status == "ok") hat nie funktioniert. Ich habe die E-Mails bekommen, aber ich habe keine Bestätigung erhalten, und jetzt verstehe ich warum.
• Als ich überprüfen wollte, was die PHP-Datei weggelassen hatte, ging ich einfach zu seiner Adresse in der URL und bekam immer einen Fehler. Auch wenn die Mails verschickt wurden. Jetzt verstehe ich, dass das nicht die richtige Art ist, die Protokolle zu überprüfen.

Dank @Samurai, die mir geholfen haben, die Dinge herauszufinden.

---

Finale PHP-Code:

<?php 
    // assemble the message from the POST fields 

    // getting the captcha 
    $captcha = ""; 
    if (isset($_POST["g-recaptcha-response"])) 
     $captcha = $_POST["g-recaptcha-response"]; 

    if (!$captcha) 
     echo "not ok"; 
    // handling the captcha and checking if it's ok 
    $secret = "MY_SECRET"; 
    $response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$captcha."&remoteip=".$_SERVER["REMOTE_ADDR"]), true); 

    // if the captcha is cleared with google, send the mail and echo ok. 
    if ($response["success"] != false) { 
     // send the actual mail 
     @mail($email_to, $subject, $finalMsg); 

     // the echo goes back to the ajax, so the user can know if everything is ok 
     echo "ok"; 
    } else { 
     echo "not ok"; 
    } 
?> 

Answer 2

Meinen Sie diese Dollar-Zeichen in Ihrem Javascript haben? Wenn ja, wie kommt es?

var $errors = $('#errors'), 
$status = $('#status'),