[英]Invisible reCaptcha AJAX Call
我正在尝试将隐形 reCaptcha 实施到网站上。 但我无法让它工作。 这是我在做什么:
标题
<!-- Invisible reCaptcha -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
表单.php
<form id="contact-form" class="contact-form" action="#contact">
<p class="contact-name">
<input id="contact_name" type="text" placeholder="Full Name" value="" name="name" />
</p>
<p class="contact-email">
<input id="contact_email" type="text" placeholder="Your E-Mail Address" value="" name="email" />
</p>
<p class="contact-message">
<textarea id="contact_message" placeholder="Your Message" name="message" rows="15" cols="40"></textarea>
</p>
<p class="contact-submit">
<a type="submit" id="contact-submit" class="submit" href="#">Send Your Email</a>
</p>
<div id="recaptcha" class="g-recaptcha" data-sitekey="6LceN0sUAAAAAPvMoZ1v-94ePuXt8nZH7TxWrI0E" data-size="invisible" data-callback="onSubmit"></div>
<div id="response">
</div>
</form>
脚本.js
// contact form handling
$(function() {
$("#contact-submit").on('click',function() {
$contact_form = $('#contact-form');
var fields = $contact_form.serialize();
var test = grecaptcha.execute();
console.log(fields);
console.log(test);
$.ajax({
type: "POST",
url: "assets/php/contact.php",
data: fields,
dataType: 'json',
success: function(response) {
if(response.status){
$('#contact-form input').val('');
$('#contact-form textarea').val('');
}
$('#response').empty().html(response.html);
}
});
return false;
});
});
联系方式
private function validateFields(){
// Check reCaptcha
if(!$this->captcha){
echo "Please fill out the reCaptcha correctly";
}
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretkey."&response=".$this->captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
if(intval($responseKeys["success"]) !== 1) {
echo "You are a bot! GO AWAY!";
}
如果 g-recaptcha-response 不为空,后端 (contact.php) 工作正常。 然而,我的问题是 g-recaptcha-response(在 var 字段和测试中)在我尝试这样做时总是空的。 当我在表单上显示 recaptcha 并填写它时,g-recapcha-response 不是空的,一切正常。 我知道我必须在某处调用 grecaptcha.execute() ,但即使我这样做,变量也是空的。 如何以编程方式调用 this?
我感谢每一个帮助! 先感谢您!
您缺少onSubmit()
回调函数。
要重新排列您的 js 以使用该功能,这将是您的新 js 块:
<script>
// this block must be defined before api.js is included
function onSubmit(token) {
var fields = $('#contact-form').serializeArray(); // get your form data
fields.push({name: "g-recaptcha-response", value: token});// add token to post
$.ajax({
type: "POST",
url: "assets/php/contact.php",
data: fields,
dataType: 'json',
success: function(response) {
if(response.status) {
$('#contact-form input').val('');
$('#contact-form textarea').val('');
}
$('#response').empty().html(response.html);
}
});
grecaptcha.reset();// to reset their widget for any other tries
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
// this block can be defined anywhere
$(function() {
$("#contact-submit").on('click',function() {
// call grecaptcha.execute, which causes recaptcha to
// do its thing and then calls onSubmit with the token
grecaptcha.execute();// does not return anything directly
return false;
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.