Recaptcha with Ajax - Invisible
http://stackoverflow.com/questions/19462649/trying-to-pass-variable-values-from-javascript-to-php-using-ajax
<?php
$config = require('config.php');
?>
<html>
<head>
<title>reCAPTCHA demo</title>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<form action="" method="POST" id="demo-form">
<input type="text" name="firstname" id="firstname">
<br>
<button class="g-recaptcha"
data-sitekey="6Lfi5B8UAAAAAGqVZbrz7-NHEEzn0SUBjL6l7wYD"
data-callback="onSubmit"
id="ajaxsubmit"
type="submit"
value="Submit">Submit
</button>
</form>
<div id="result"></div>
</body>
// ========================== AJAX ========================================
<script>
function onSubmit() {
var firstname = $('#firstname').val();
var g_recaptcha_response = $('#g-recaptcha-response').val();
/* Stop form from submitting normally */
event.preventDefault();
/* Clear result div*/
$("#result").html('');
/* Get from elements values */
var values = $(this).serialize();
ajaxRequest= $.ajax({
url: "process.php",
type: "post",
data: {firstname:firstname, g_recaptcha_response: g_recaptcha_response }
});
/* request cab be abort by ajaxRequest.abort() */
ajaxRequest.done(function (response, textStatus, jqXHR){
// show successfully for submit message
console.log("SUCCESS") ;
$("#result").html(response);
});
/* On failure of request this function will be called */
ajaxRequest.fail(function (){
// show error
console.log("ERROR") ;
$("#result").html('There is error while submit');
});
}
</script>
</html>
// ================================ process.php ===============================
<?php
require 'Recaptcha.php';
$firstname = $_POST['firstname'] ;
$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<br>";
echo "Firstname: " . $firstname . '<br>';
echo "recaptcha value: " . $recaptcha . '<br>';
}
?>
// ======================== Recaptcha Class =================================
<?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;
}
}
?>
// ============================ config.php ==================================
<?php
// these keys work on localhost
return [
'client-key' => '6Lfi5B8UAAAAAGqVZbrz7-NHEEzn0SUBjL6l7wYD',
'secret-key' => '6Lfi5B8UAAAAAIJdsbWfM3dvWjgxLjq4Iwycoypb'
];