如何修复谷歌不可见 reCAPTCHA 验证后未提交的 Ajax 表单
Posted
技术标签:
【中文标题】如何修复谷歌不可见 reCAPTCHA 验证后未提交的 Ajax 表单【英文标题】：How to fix Ajax form not submitted after google invisible reCAPTCHA verification 【发布时间】：2019-09-04 11:57:18 【问题描述】：我正在尝试在当前使用 recaptcha v2 的网站上集成不可见的 recaptcha。完成表格并点击提交按钮没有问题。问题是挑战完成后，页面没有重定向到action.php或者根本没有提交。
我在这里寻找相同的主题。我在我的情况附近找到的主题是Invisible reCaptcha AJAX Call 但表单仍然不会继续进行。
实际测试工作链接Test Registration
下面是我的html、js和php代码供大家参考。
index.html
<body>
<div id="form-messages"></div>
<div class="signup-form">
<form id="ajax-contact" action="action.php" method="post" enctype="multipart/form-data">
<div class="field-group">
<div class="input-group-icon">Name:</div>
<input type="text" placeholder="Enter name" id="name" name="name" required />
</div>
<div class="field-group">
<div class="input-group-icon">Email:</div>
<input type="email" placeholder="Enter email" id="email" name="email" autocorrect="off" autocapitalize="none" required />
</div>
<div id="interact_btn">
<input class="ghost-submit" id="submit_Btn" type="submit" value="SUBMIT" />
<input class="ghost-reset" id="reset_Btn" type="reset" value="CANCEL" />
</div>
<div class="g-recaptcha" data-sitekey="SITE KEY" data-callback="onSubmit" data-size="invisible">
</div>
</form>
<script src="js/app.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
</body>
app.js
$(function()
var form = $('#ajax-contact');
var formMessages = $('#form-messages');
$(form).submit(function(e)
e.preventDefault();
grecaptcha.execute();
);
function onSubmit(token)
$("#submit_Btn").attr("disabled", true);
$("#reset_Btn").attr("disabled", true);
var formData = $(form).serialize();
formData.push(name: "g-recaptcha-response", value: token);
$(".overlay").show();
$.ajax(
type: 'POST',
url: $(form).attr('action'),
data: formData
)
.done(function(response)
$("#submit_Btn").attr("disabled", false);
$("#reset_Btn").attr("disabled", false);
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
$(formMessages).text(response);
$(".overlay").hide();
$('#name').val('');
$('#email').val('');
)
.fail(function(data)
$("#submit_Btn").attr("disabled", false);
$("#reset_Btn").attr("disabled", false);
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
if (data.responseText !== '')
$(formMessages).text(data.responseText);
else
$(formMessages).text('Oops! An error occured and your message could not be sent.');
$(".overlay").hide();
);
grecaptcha.reset();
);
action.php
if ($_SERVER["REQUEST_METHOD"] == "POST")
$url = 'https://www.google.com/recaptcha/api/siteverify';
$privatekey="<SITE KEY>";
$resp=$_POST['g-recaptcha-response'];
$token = $_POST['token'];
if(isset($token) && !empty($token))
verify=file_get_contents(
$url.http_build_query([
'secret' => $privatekey
'response' => $resp,
]).$token
);
$captcha_success=json_decode($verify);
if ($captcha_success->success==false)
http_response_code(401);
echo "reCAPTCHA verification failed.";/*These will be displayed on form-messages in index.html*/
else
$mail = new PHPMailer;
/*... phpmailer handling codes ...*/
if(!$mail->send())
http_response_code(500);
$error_message .= "Mailer Error: " .$mail->ErrorInfo;
else
http_response_code(200);
echo "Thank you! your details are submitted.An email was sent to your email address.";
预期结果：
单击提交按钮 > 出现 Recaptcha 挑战 > 已验证 > 在使用 ajax 提交表单时显示覆盖
当前结果： 单击提交按钮 > 出现 Recaptcha 挑战 > 已验证 > 没有覆盖没有 ajax 表单未提交
如果您能指出哪些部分需要改进或指出我的错误，那将是非常有帮助的。任何帮助表示赞赏。
【问题讨论】：
【参考方案1】：很可能是这样的：
$url.http_build_query([
'secret' => $privatekey
'response' => $resp,
]).$token
应该是：
$url.http_build_query([
'secret' => $privatekey
'response' => $resp,
'token' => $token
])
【讨论】：
您好，感谢您的宝贵时间。我更新了代码。您可以使用上面的测试链接进行检查。不幸的是，表单没有被提交。以上是关于如何修复谷歌不可见 reCAPTCHA 验证后未提交的 Ajax 表单的主要内容，如果未能解决你的问题，请参考以下文章