我一直在根据下面的此网站使用Google Invisible reCapture开发在线表单PHP Bootstrap 4 beta 2验证程序。
https://shareurcodes.com/blog/google%20invisible%20recaptcha%20integration%20with%20php
但是我以某种方式收到错误消息，提示“发生错误并且错误代码是：missing-input”
我不知道怎么了
这是我的代码...
signup.php
<? $config = require("config.php"); ?>
<html lang="en">
<head>
<link rel="stylesheet" href="css/bootstrap-v4.0.0-beta.2.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#needsValidation').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
console.log("validation failed");
} else {
// everything looks good!
e.preventDefault();
console.log("validation success");
grecaptcha.execute();
}
});
});
function onSubmit(token){
document.getElementById("needsValidation").submit();
};
</script>
</head>
<body>
<form class="container" method="post" action="signup_01.php" id="needsValidation" name="a_form" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="name1">Your Name</label> <span class="red">*</span>
<input type="text" class="form-control" id="name1" name="name1" placeholder="Please enter Your Name *" required />
<div class="invalid-feedback">Your Name is required.</div>
</div>
</div>
<div id='recaptcha' class="g-recaptcha"
data-sitekey="<?php echo $config['client-key']; ?>"
data-callback="onSubmit"
data-size="invisible"></div>
<button class="btn btn-block btn-custom" type="submit" onclick="return check_compare(); return true;">SIGNUP NOW!</button>
</form>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer ></script>
</body>
</html>
signup_01.php
<?php
require 'recaptcha.php';
$recaptcha = $_POST['g-recaptcha-response'];
$object = new Recaptcha();
$response = $object->verifyResponse($recaptcha);
if(isset($response['success']) and $response['success'] != true) {
echo "An Error Occured and Error code is :".$response['error-codes'];
}else {
echo "Correct Recaptcha";
}
recaptcha.php
<?php
class Recaptcha{
public function __construct(){
$this->config = require('config.php');
}
public function verifyResponse($recaptcha){
$remoteIp = $this->getIPAddress();
// Discard empty solution submissions
if (empty($recaptcha)) {
return array(
'success' => false,
'error-codes' => 'missing-input',
);
}
$getResponse = $this->getHTTP(
array(
'secret' => $this->config['secret-key'],
'remoteip' => $remoteIp,
'response' => $recaptcha,
)
);
// get reCAPTCHA server response
$responses = json_decode($getResponse, true);
if (isset($responses['success']) and $responses['success'] == true) {
$status = true;
} else {
$status = false;
$error = (isset($responses['error-codes'])) ? $responses['error-codes']
: 'invalid-input-response';
}
return array(
'success' => $status,
'error-codes' => (isset($error)) ? $error : null,
);
}
private function getIPAddress(){
if (!empty($_SERVER['HTTP_CLIENT_IP']))
{
$ip = $_SERVER['HTTP_CLIENT_IP'];
}
elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR']))
{
$ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
}
else
{
$ip = $_SERVER['REMOTE_ADDR'];
}
return $ip;
}
private function getHTTP($data){
$url = 'https://www.google.com/recaptcha/api/siteverify?'.http_build_query($data);
$response = file_get_contents($url);
return $response;
}
}
我知道我可以看到我的客户密钥的价值，
我认为此字段“ g-recaptcha-response”上存在空值
但我不知道怎么做
$recaptcha = $_POST['g-recaptcha-response'];
您能告诉我如何使其工作吗？
谢谢！
最佳答案
将您的signup.php页面替换为以下代码。这个对我有用。
<? $config = require("config.php"); ?>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<form class="container" method="post" action="signup_01.php" id="needsValidation" name="a_form" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="name1">Your Name</label> <span class="red">*</span>
<input type="text" class="form-control" id="name1" name="name1" placeholder="Please enter Your Name *" required />
<div class="invalid-feedback">Your Name is required.</div>
</div>
</div>
<div id='recaptcha' class="g-recaptcha"
data-sitekey="<?php echo $config['client-key']; ?>"
data-callback="onSubmit"
data-size="invisible"></div>
<button class="btn btn-block btn-custom" type="submit" >SIGNUP NOW!</button>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!-- Boostrap Validator -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js" ></script>
<script src="https://www.google.com/recaptcha/api.js" async defer ></script>
<script type="text/javascript">
$(document).ready(function(){
$('#needsValidation').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
alert("validation failed");
} else {
// everything looks good!
e.preventDefault();
console.log("validation success");
grecaptcha.execute();
}
});
});
function onSubmit(token){
document.getElementById("needsValidation").submit();
};
</script>
</body>
</html>
您没有在页面上添加引导验证程序。我也添加了它的CDN链接。请记住，在进行开发时，请始终打开开发人员控制台以检查javascript错误。另外，还建议使用CDN以获得更好的性能，并按照其依赖关系的顺序将js代码移至最底端。