问题描述
我正在尝试将隐式reCaptcha实施到网站上.但是我无法正常工作.这是我在做什么:
I'm trying to implement the invisible reCaptcha onto a website. But I can not get it working. Here is what I'm doing:
标题
<!-- Invisible reCaptcha -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
form.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>
script.js
script.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;
});
});
contact.php
contact.php
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不为null，则后端(contact.php)可以正常工作.但是我的问题是，当我尝试执行g-recaptcha-response(在var字段和测试中)时，它始终为空.当我在表单上显示Recaptcha并将其填写时，g-recapcha-response不为空，并且一切正常.我知道我必须在某个地方调用grecaptcha.execute()，但是即使我这样做了，该变量也是空的.如何以编程方式调用此代码?
The backend (contact.php) is working fine, if g-recaptcha-response is not null. However my Problem is that g-recaptcha-response (in var fields and test) is always empty when I try to do it. When I show the recaptcha on the form and fill it out, the g-recapcha-response is not empty and everything works fine.I know that I must invoke the grecaptcha.execute() somewhere, but even if I do, the variable is empty. How do programmaticaly call the this?
我非常感谢您的帮助！预先谢谢你！
I appreciate every help! Thank you in advance!
推荐答案
您缺少onSubmit()回调函数.
要重新排列您的js以利用该功能，这将是您的新js块:
To rearrange your js to utilize the function, this would be your new js block:
<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>
这篇关于隐形reCaptcha AJAX通话的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！