How to Validate Google reCaptcha on Form Submit

Question 1

Recently, Google completely overhauled their reCaptcha API and simplified it to a single checkbox.

The problem is, I can submit a form with the reCaptcha included without checking it and the form will ignore the reCaptcha.

Before you had to send the form to a PHP file with the private key et al, but I'm not seeing any mention of that in their Developer's Guide. I have no idea how to validate the form to be sure the new reCaptcha was filled by the user.

Am I missing something? Is that PHP file with the private key still required?

All I have for the reCaptcha so far is:

<div data-type="image" class="g-recaptcha" data-sitekey="My Public Key"></div>

Question 2

If you want to check if the User clicked on the I'm not a robot checkbox, you can use the .getResponse() function provided by the reCaptcha API.

It will return an empty string in case the User did not validate himself, something like this:

if (grecaptcha.getResponse() == ""){
    alert("You can't proceed!");
} else {
    alert("Thank you");
}

In case the User has validated himself, the response will be a very long string.

More about the API can be found on this page: reCaptcha Javascript API

Question 3

this is solution

index.html

<html>
  <head>
    <title>Google recapcha demo - Codeforgeek</title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>
  <body>
    <h1>Google reCAPTHA Demo</h1>
    <form id="comment_form" action="form.php" method="post">
      <input type="email" placeholder="Type your email" size="40"><br><br>
      <textarea name="comment" rows="8" cols="39"></textarea><br><br>
      <input type="submit" name="submit" value="Post comment"><br><br>
      <div class="g-recaptcha" data-sitekey="=== Your site key ==="></div>
    </form>
  </body>
</html>

verify.php

<?php
    $email; $comment; $captcha;

    if(isset($_POST['email']))
        $email=$_POST['email'];
    if(isset($_POST['comment']))
        $comment=$_POST['comment'];
    if(isset($_POST['g-recaptcha-response']))
        $captcha=$_POST['g-recaptcha-response'];

    if(!$captcha){
        echo '<h2>Please check the the captcha form.</h2>';
        exit;
    }

    $response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=YOUR SECRET KEY&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']), true);
    if($response['success'] == false)
    {
        echo '<h2>You are spammer ! Get the @$%K out</h2>';
    }
    else
    {
        echo '<h2>Thanks for posting comment.</h2>';
    }
?>

http://codeforgeek.com/2014/12/google-recaptcha-tutorial/

Question 4

<form name="add" method="post">
     <p>Age:</p>
     <select name="age">
        <option value="1_sre">23</option>
        <option value="2_sam">24</option>
        <option value="5_john">25</option>
     </select>
     <input type="submit" name="submit"/>
</form>

You will have the selected value in $_POST['age'], e.g. 1_sre. Then you will be able to split the value and get the 'stud_name'.

$stud = explode("_",$_POST['age']);
$stud_id = $stud[0];
$stud_name = $stud[1];

Question 5

For displaying the reCAPTCHA widget you don't need any library file, you just have to include the necessary JavaScript resource, like this:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Here's the reference:

Displaying the widget

Now comes to your user's response. Since you're using Google reCAPTCHA V2, you should fetch the user's response using the POST parameter g-recaptcha-response.

Here's the reference:

Verifying the user's response

So your code should be like this:

<?php   
    if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
        $privatekey = "YOUR_PRIVATE_KEY";

        //get verified response data
        $param = "https://www.google.com/recaptcha/api/siteverify?secret=".$privatekey."&response=".$_POST['g-recaptcha-response'];
        $verifyResponse = file_get_contents($param);
        $responseData = json_decode($verifyResponse);

        if($responseData->success){
            // success
            echo "success";

        }else{
            // failure
            echo "failure";
        }
    }else{
        // user didn't enter reCAPTCHA
        echo "The reCAPTCHA wasn't entered correctly. Go back and try it again.";
    }
?>

Question 6

I share my code solution. But the proxy.php and other details with the full explanation (incl. backend part) you might find here.

Recaptcha with data-callback parameter

<script src="https://www.google.com/recaptcha/api.js" >;
<form method="post">
<div class="g-recaptcha" data-sitekey="[site_key]" data-callback="onReturnCallback" data-theme="light"></div>
<input value="submit" type="submit" />
</form>

JS validation

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var onReturnCallback = function(response) { 
    //alert('g-recaptcha-response: ' + grecaptcha.getResponse()); 
    var url='proxy.php?url=' + 'https://www.google.com/recaptcha/api/siteverify';  
    $.ajax({ 'url' : url, 
               dataType: 'json',
               data: { response: response},
               success: function( data  ) {                     
                var res = data.success.toString();
                        alert( "User verified: " + res);                    
                if (res ==  'true') { 
                       document.getElementById('g-recaptcha').innerHTML = 'THE CAPTCHA WAS SUCCESSFULLY SOLVED'; 
                                } 
                           } // end of success: 
         }); // end of $.ajax 
}; // end of onReturnCallback 
</script>

Note!

The backend part, proxy.php, is necessary because of security issue.

How to Validate Google reCaptcha on Form Submit

Answers

Recaptcha with data-callback parameter

JS validation

Note!

php,html,recaptcha