尝试让我的表单使用 google 隐形 recaptcha 与我的 jQuery AJAX 和 PHP 一起正常工作。根据我的研究， token 似乎没有通过 AJAX 正确发送到我的 PHP 页面。提交表单时，我的 PHP 页面不断收到以下错误。
array(2) {
["success"]=>
bool(false)
["error-codes"]=>
array(1) {
[0]=>
string(22) "invalid-input-response"
}
}
下面是我的 HTML/jQuery 代码
<!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>我的 PHP 代码未正确处理 token ，如下
<?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 文档真的很糟糕......
最佳答案
我刚刚测试了你的前端代码，它工作正常，但你的后端代码不正确。
我已经调整了所有代码来处理 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>
希望有帮助。
关于php - 使用 Jquery Ajax 和 PHP 的 Google 隐形 Recaptcha，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48411167/