如何修复谷歌不可见 reCAPTCHA 验证后未提交的 Ajax 表单答案

【问题标题】：How to fix Ajax form not submitted after google invisible reCAPTCHA verification如何修复谷歌不可见 reCAPTCHA 验证后未提交的 Ajax 表单
【发布时间】：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 表单未提交

如果您能指出哪些部分需要改进或指出我的错误，那将是非常有帮助的。任何帮助表示赞赏。

【问题讨论】：

标签： php jquery html ajax recaptcha

【解决方案1】：

很可能是这样的：

$url.http_build_query([
    'secret' => $privatekey
    'response' => $resp,
]).$token

应该是：

$url.http_build_query([
    'secret' => $privatekey
    'response' => $resp,
    'token' => $token
])

【讨论】：

您好，感谢您的宝贵时间。我更新了代码。您可以使用上面的测试链接进行检查。不幸的是，表单没有被提交。