"Không phải là một con robot" reCAPTCHA mà không có một <form> nhưng AJAX thay

Question

Cách truyền thống của việc sử dụng "I am not a robot" Recpatcha có vẻ là với một <form> trên client-side:

<form action="post.php" method="POST"> 
    <div class="g-recaptcha" data-sitekey="6Lc_0f4SAAAAAF9ZA_d7Dxi9qRbPMMNW-tLSvhe6"></div> 
    <button type="submit">Sign in</button> 
</form> 

<script src='https://www.google.com/recaptcha/api.js'></script> 

Sau đó, một số g-recaptcha-response sẽ được gửi đến máy chủ.

---

Tuy nhiên, trong mã của tôi, tôi không sử dụng một <form> nhưng một cuộc gọi AJAX thay vì:

$('#btn-post').click(function(e) { 
    $.ajax({ 
    type: "POST", 
    url: "post.php", 
    data: { 
     action: 'post', 
     text: $("#text").val(), 
     ajaxMode: "true" 
    }, 
    success: function(data) { }, 
    error: function(data) { } 
    }); } }); 

** Làm thế nào để có được câu trả lời g-recaptcha-response với giải pháp này?

Answer 1

Bạn sử dụng biểu mẫu, làm gián đoạn nội dung gửi của biểu mẫu. Thiết lập hình thức như bình thường:

<form action="post.php" method="POST" id="my-form"> 
    <div class="g-recaptcha" data-sitekey="6Lc_0f4SAAAAAF9ZA_d7Dxi9qRbPMMNW-tLSvhe6"></div> 
    <input type="text" id="text"> 
    <button type="submit">Sign in</button> 
</form> 

<script src='https://www.google.com/recaptcha/api.js'></script> 

Và sau đó bạn sử dụng jQuery để làm gián đoạn việc nộp đơn và serialize it, cho phép bạn chuyển dữ liệu thông qua Ajax:

$('#my-form').submit(function(e) { 
    e.preventDefault(); 
    $this = $(this); 
    $.ajax({ 
     type: "POST", 
     url: "post.php", 
     data: $this.serialize() 
    }).done(function(data) { 
    }).fail(function(jqXHR, textStatus) { 
     alert("Request failed: " + textStatus); 
    }); 
}); 

Như bạn sẽ có nhận thấy tôi đã sử dụng .done và .fail thay vì success và error, đây là preferred way of handling the response.

Answer 2

Tôi vừa mới triển khai nó mà không sử dụng bất kỳ hình thức và cơ chế gửi nào tương ứng. Vì vậy, một giải pháp AJAX tinh khiết.

HTML code:

<div id="recaptcha-service" class="g-recaptcha" 
data-callback="recaptchaCallback" 
data-sitekey=""></div> 
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=en"></script> 

mã JavaScript:

window.recaptchaCallback = undefined; 

jQuery(document).ready(function($) { 

    window.recaptchaCallback = function recaptchaCallback(response) { 
    $.ajax({ 
     method: "POST", 
     url: "http://example.com/service.ajax.php", 
     data: { 'g-recaptcha-response': response }, 
    }) 
     .done(function(msg) { 
     console.log(msg); 
     }) 
     .fail(function(jqXHR, textStatus) { 
     console.log(textStatus); 
     }); 
    } 

}); 

Vấn đề là sử dụng một callback (recaptchaCallback trong trường hợp này).

Bạn có thể tìm thấy ví dụ hoàn chỉnh hơn tại https://gist.github.com/martinburger/f9f37770c655c25d5f7b179278815084. Ví dụ đó sử dụng triển khai PHP của Google ở ​​phía máy chủ (https://github.com/google/recaptcha).