jcadima
5/4/2017 - 5:31 PM

Recaptcha with Ajax - Invisible

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'
];