Question

我正在尝试在当前使用recaptcha v2的网站上集成不可见的Recaptcha。完成表格并点击提交按钮没有问题。问题是挑战完成后，页面没有重定向到action.php或根本没有提交。

我在这里寻找相同的主题。我所遇到的问题是Invisible reCaptcha AJAX Call 但表格仍不会继续进行。

下面是我的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表单

如果您指出需要改进的部分或指出我的错误，将对您有很大的帮助。任何帮助表示赞赏。

Answer 1

最可能是这样的：

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

应为：

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

谷歌隐形reCAPTCHA验证后如何解决未提交的Ajax表单

1 个答案: