Question

尝试使用google invisible recaptcha使用我的jQuery AJAX和PHP正常工作。根据我的研究，似乎令牌没有通过AJAX正确发送到我的PHP页面。提交表单时，请继续从我的PHP页面获取以下错误。

array(2) {
["success"]=>
bool(false)
["error-codes"]=>
array(1) {
[0]=>
string(22) "invalid-input-response"
  }
}

我的HTML / jQuery代码

＆＃13;

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>

  <style>
    .grecaptcha-badge {
      display: block;
      float: left;
    }
  </style>

</head>

<body>
  <form id="myForm">
    <div>First Name*</div>
    <div><input id="first_name" name="first_name" required="" type="text"></div>
    <!--<span class="form-error">Please enter your first name.</span>-->

    <div>Last Name*</div>
    <div><input id="last_name" name="last_name" required="" type="text"></div>
    <!--<span class="form-error">Please enter your last name.</span>-->

    <button class="g-recaptcha" data-sitekey="6Ld1..." data-callback="onSubmit">submit</button>
  </form>
  <div id="status"></div>

    <script defer>
    function onSubmit(token) {
      var f = $("#myForm");

      $.ajax({
        type: "POST",
        url: "request.php",
        data: f.serialize(),
        dataType: "json",
        beforeSend: function() {
          $("#status").html("submitting data...");
        },
        success: function(response) {
          $("#status").html(response.text);
          if (response.type == "success") {
            window.location.replace("/myaccount");
          } else {
            $("#status").html("Captcha failed.");
          }
        },
        error: function() {
          $("#status").html("Failed.");
        }
      });
    }
  </script>
</body>
</html>

＆＃13;

我的PHP代码未正确处理令牌

<?php
if(isset($_POST['g-recaptcha-response'])) {
$result = json_decode(file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=['secret key']&response=$_POST["g-recaptcha-response"]&remoteip=$_SERVER["REMOTE_ADDR"]'), TRUE);

   //echo 'success';
   if($result['success'] == 'true') {
      // Captcha ok
      echo 'success';
        } else {
      // Captcha failed
      echo 'failed';
   }

var_dump($result);
}
?>

提前致谢！ reCAPTCHA文档非常糟糕....

Answer 1

我刚刚测试了您的前端代码，但它运行正常，但您的后端代码不正确。

我已经调整了所有代码来处理json和错误等，但基本上问题是因为你将$_POST参数传递给网站验证网址的方式。

以下是经过测试和运作的：

<强> request.php

<?php
define('RECAPTCHA_SECRET_KEY', '******');

// json response helper
$json_response = function($data = []) {
    header('Content-Type: application/json; charset=utf-8');
    exit(json_encode($data));
};

// handle post
if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    // define errors array
    $errors = [];

    // check g-recaptcha-response
    if (!isset($_POST['g-recaptcha-response'])) {
        $errors['recaptcha'] = 'Check the captcha form.';
    }

    // check other params
    if (empty($_POST['first_name'])) {
        $errors['first_name'] = 'First name is a required field.';
    }

    if (empty($_POST['last_name'])) {
        $errors['last_name'] = 'Last name is a required field.';
    }

    // if all good call API else error out
    if (!empty($errors)) {
        $json_response(['errors' => $errors]);
    }

    // call recaptcha site verify
    $response = file_get_contents(
        'https://www.google.com/recaptcha/api/siteverify?'.http_build_query([
            'secret'   => RECAPTCHA_SECRET_KEY,
            'response' => $_POST['g-recaptcha-response'],
            'remoteip' => $_SERVER['REMOTE_ADDR'],
        ])
    );
    $response = json_decode($response, true);

    // handle status and respond with json
    if (intval($response["success"]) !== 1) {
        $json_response(['errors' => ['recaptcha' => 'Captcha failed.']]);
    } else {
        $json_response(['success' => true]);
    }
}
?>

您的前端代码，只是添加了对json的处理。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src='https://www.google.com/recaptcha/api.js'></script>
        <style>
            .grecaptcha-badge {
                display: block;
                float: left;
            }
            .form-error {
                display:none;
            }
        </style>
    </head>

    <body>
        <form id="myForm">
            <div>First Name*</div>
            <div><input id="first_name" name="first_name" required="" type="text"></div>
            <span class="form-error">Please enter your first name.</span>

            <div>Last Name*</div>
            <div><input id="last_name" name="last_name" required="" type="text"></div>
            <span class="form-error">Please enter your last name.</span>

            <button class="g-recaptcha" data-sitekey="******" data-callback="onSubmit">submit</button>
        </form>
        <div id="status"></div>

        <script defer>
            function onSubmit(token) {

                var f = $("#myForm");

                f.find('.form-error').hide();

                $.ajax({
                    type: "POST",
                    url: "./request.php",
                    data: f.serialize(),
                    dataType: "json",
                    beforeSend: function() {
                        $("#status").html("submitting data...");
                    },
                    success: function(response) {
                        if (response.errors) {
                            if (response.errors.first_name) {
                                $('#first_name').parent().next().show();
                            }

                            if (response.errors.last_name) {
                                $('#last_name').parent().next().show();
                            }

                            if (response.errors.recaptcha) {
                                $('#status').html(response.errors.recaptcha);
                            } else {
                                $("#status").html("Please complete form.");
                            }
                        } else if (response.success) {
                            window.location.replace("/myaccount");
                        } else {
                            $("#status").html("Captcha failed.");
                        }
                    },
                    error: function() {
                        $("#status").html("Failed.");
                    }
                });
            }
        </script>
    </body>
</html>

希望它有所帮助。

Google Invisible Recaptcha使用Jquery Ajax和PHP

1 个答案: