I am working on an online form, PHP Validator 4 beta 2 with Google Invisible reCapture based on this site below.
https://shareurcodes.com/blog/google%20invisible%20recaptcha%20integration%20with%20php
But for some reason I received an error message: "An error has occurred and the error code is: no-input"
I do not know what is wrong.
Here is my code ...
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()) {
console.log("validation failed");
} else {
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();
if (empty($recaptcha)) {
return array(
'success' => false,
'error-codes' => 'missing-input',
);
}
$getResponse = $this->getHTTP(
array(
'secret' => $this->config['secret-key'],
'remoteip' => $remoteIp,
'response' => $recaptcha,
)
);
$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;
}
}
I know that I can see the value of my Client Key,
I think in this field the value "g-recaptcha-response" is empty, but I do not know how or what.
$recaptcha = $_POST['g-recaptcha-response'];
Could you tell me how to make it work?
Thank!