New Checkbox reCAPTCHA Tutorial with Sample Code

byAbdul Rashid -
46
Google has improved their reCAPTCHA to an user friendly one with a tag I'm not a robot. Usually you need to enter the captcha characters all time, but this improved reCAPTCHA dont always need user to enter the characters.

Validation is done just by checking the input box, however if google suspects user as spam (by IP and user's previously collected details) they will show a image or audio based challenge.

new reCAPTCHA
View Demo | Download

To begin you need SiteKey and SecretKey from reCAPTCHA website. Visit https://www.google.com/recaptcha and create above keys for your site free.

Login.html

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>MyCodde.blogspot.com Login</title>

    <!-- Bootstrap core CSS -->
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">

      <form class="form-signin" role="form" action="validateform.php" method="POST">
            <div id="status">
            </div>
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" value="mycodde@test.com" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" value="rashid" class="form-control" placeholder="Password" required>
        <div class="g-recaptcha" data-sitekey="6Lc_0f4SAAAAAF9ZA_d7Dxi9qRbPMMNW-tLSvhe6"></div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </body>
</html>



validateform.php

<?php
//@author = mycodde.blogspot.com
require_once "recaptchalib.php";
// reCAPTCHA supported 40+ languages listed here: https://developers.google.com/recaptcha/docs/language
$lang = "en";
// The response from reCAPTCHA
$resp = null;
// The error code from reCAPTCHA, if any
$error = null;
$reCaptcha = new ReCaptcha("6Lc_0f4SAAAAAKWjlLCttM0stC4AB7NYU81006RW");
if ($_POST["g-recaptcha-response"]) {
    $resp = $reCaptcha->verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["g-recaptcha-response"]
    );
    //print_r($resp); To See the response object uncomment this
} else {
    echo "Recaptcha Not submitted";
}
if ($resp != null && $resp->success) {
    echo "Recaptcha Verification Success";
    //Write other FORM password and Email Validation Procedures
} else {
    echo "Recaptcha Verification Error";
}
?>

Session Expiration in reCAPTCHA

After checking the reCAPTCHA box, if user stays the same page for 5 minutes, his reCAPTCHA session will be expired.

reCAPTCHA Session Expired
Then it will ask the user to verify himself by showing the AUDIO or IMAGE Challenge

New reCAPTCHA showing audio challenge

 You can configure which TYPE of challenge you want to show always. Replace the above Login.html file div class="g-recaptcha" code with below one.

<div class="g-recaptcha" 
data-sitekey="6Lc_0f4SAAAAAF9ZA_d7Dxi9qRbPMMNW-tLSvhe6" data-theme="dark" data-theme="dark" data-type="audio"></div>


reCAPTCHA Image Challenge after session expiration
Thats it.


Tags:

46 Comments

  1. NixonDecember 5, 2014 at 10:31 AM

    Thank you abdul for the Quick Tutorial.

    ReplyDelete
  2. AryDecember 5, 2014 at 12:40 PM

    Interesting if it will support multiple recaptcha on the page (for different form in dynamic dialogs). In prev version it was little not so simple

    ReplyDelete
    Replies
    1. Abdul RashidDecember 5, 2014 at 5:36 PM

      Yes it does support multiple reCAPTCHA in a page.

      Delete
    2. ivaDecember 8, 2014 at 5:47 PM

      I can't make new recaptcha work on the same page in multiple forms. Can you explain how you manage it?

      Delete
    3. Abdul RashidDecember 9, 2014 at 12:02 PM

      At all time you submit only one form right.
      You will receive the value for g-recaptcha-response input. Validate this with Google using above code. ($reCaptcha->verifyResponse(
      $_SERVER["REMOTE_ADDR"],
      $_POST["g-recaptcha-response"]
      ); )

      Delete
    4. hemantgoyal1987August 26, 2015 at 12:07 AM

      I am just using " required ="true" class="g-recaptcha" data-sitekey="6LfO0gsTAAAAAEQervVv6RL-dKzQkF8VVhmuSLdg">" in the visual force page and I want to captue the response of the checkbo.. how Can i get this.

      Delete
    5. sfsfJune 15, 2017 at 10:20 AM

      asasasa

      Delete
  3. AnonymousDecember 5, 2014 at 8:52 PM

    for me it always asks me to enter the image challange. how do i fix this?

    ReplyDelete
    Replies
    1. Abdul RashidDecember 6, 2014 at 11:18 AM

      For me it started showing the scrambled characters after a cookie is created in browser.

      Check this screen shot http://1.bp.blogspot.com/-cbPKJWWl_fM/VIK6kfMxHPI/AAAAAAAAM8k/i-rREUQp5IQ/s1600/After%2Bverified.png

      After this i cleared all browser cache, tried different browsers. All showing the Captcha for next few hours

      Delete
    2. AnonymousDecember 6, 2014 at 9:14 PM

      Thanks for the reply. It started working as it should have.

      Delete
    3. UnknownMarch 25, 2015 at 10:58 PM

      What I have to do to the image challenge never appears?

      Delete
  4. AnonymousDecember 7, 2014 at 4:02 PM

    It is super! Thanks! :)

    ReplyDelete
  5. BariatricMexicoDecember 13, 2014 at 2:29 AM

    Hi guys, would you know how to change the width of the widget?

    ReplyDelete
    Replies
    1. Abdul RashidDecember 17, 2014 at 2:34 PM

      According to the Official documentation you have two theme options 1) Light 2) Dark.

      Since its remote CSS you cannot directly play with it. But still there is way :D

      Delete
    2. AnonymousJanuary 5, 2015 at 3:56 PM

      And that way is? The theme setting doesn't include any widths. The whole thing is fixed width so completely unsuitable for responsive sites.

      Delete
    3. Joel KochJanuary 10, 2015 at 3:45 AM

      Yes I would like to know this as well. I need to reshape the box smaller.

      Delete
  6. UnknownJanuary 7, 2015 at 9:26 PM

    How do I replace the text "I am not a robot" with something that our users understand.

    ReplyDelete
  7. UnknownJanuary 8, 2015 at 10:53 PM

    Is there a way to prevent the submission of the form from the client side if a user has not clicked on the captcha?

    ReplyDelete
  8. GavinHaubeltMediaJanuary 9, 2015 at 3:21 AM

    Help!
    I keep getting Fatal error: Class 'ReCaptcha' not found
    I looked at recaptchalib.php and do not see a class with that name.
    What am I missing?
    Thanks,
    Gavin

    ReplyDelete
  9. UnknownJanuary 15, 2015 at 11:37 AM

    Hi there -

    Do anyone have an idear on how to change width of reCaptcha box
    ( or overwrite the : https://www.gstatic.com/recaptcha/api2/styles__ltr.css )

    I would like to change the width of the recaptcha box, so i fit the width of my form fields
    Is there a way to do that?

    Really hope you can help me.

    Cheer - Best Regards
    Kimo

    ReplyDelete
    Replies
    1. Abdul RashidJanuary 18, 2015 at 1:33 AM

      I am trying this ine.

      I tried IFRAME technique, but it doesn't work.

      Delete
  10. UnknownJanuary 18, 2015 at 7:25 PM

    Thanks. I want to be able to show the form with the data they have completed if the captach is not entered and also to send an email if it is all correct. Can someone help me amend this

    ReplyDelete
    Replies
    1. Abdul RashidJanuary 18, 2015 at 7:55 PM

      If i am not mistaken, you are talking about Contact us form here.

      You can follow the above code, view demo http://code.educationgovt.com/recaptchanew/

      As you are posting the form, you can able to fill the form with the posted value again. I mean
      you post the form to the same URL.

      Delete
  11. AnonymousFebruary 11, 2015 at 2:56 PM

    but how to change the width of re-captcha......?

    ReplyDelete
    Replies
    1. Abdul RashidAugust 26, 2015 at 6:28 PM

      Currently you cannot do this for new recaptcha.

      Delete
  12. UnknownFebruary 11, 2015 at 8:31 PM

    i don't think you can. I'm pretty sure that very little can be modified except the theme.

    ReplyDelete
  13. UnknownMarch 25, 2015 at 11:00 PM

    What I have to do to the image challenge never appears?

    ReplyDelete
    Replies
    1. Abdul RashidJune 5, 2015 at 1:29 PM

      Sorry I am rephrasing the question, Are you asking, how to make the Captcha Image Never appear, but Only Checkbox should be there always?.

      You cannot actually make it like that, If you click the checkbox more than 4 times, google will start showing the rechatcha image challenge.

      Delete
  14. UnknownMarch 27, 2015 at 8:57 AM

    can I change text"I'm not a robot" to something else and how?

    ReplyDelete
  15. SmithaMay 3, 2015 at 2:32 AM

    Hi Guys, for me it always asking to solve image challenge after click on check box. what would be the issue?

    ReplyDelete
    Replies
    1. Abdul RashidJune 5, 2015 at 1:24 PM

      It happens if you try the CheckBox for more than 4 times from same IP

      Delete
    2. UnknownAugust 26, 2015 at 3:25 PM

      Does this expire? Or will it always show the image challenge once you passed 4 times from the same IP?

      Delete
    3. Abdul RashidAugust 26, 2015 at 6:27 PM

      Yes it expires.
      According to google "Please note that the verification will expire after some time and you will need to start over if this occurs. You will be notified if the verification expires.​ "

      Delete
  16. AnonymousJune 19, 2015 at 6:36 PM

    This Demo and example code are the best! thanks :D

    ReplyDelete
  17. BrianJuly 1, 2015 at 12:47 AM

    I get the error below when it calls .... require_once "recaptchalib.php"; Any Ideas ? Thanks

    syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in recaptchalib.php

    ReplyDelete
  18. UnknownAugust 13, 2015 at 9:25 PM

    I too cannot get this to send email. It will update a CVS file, but not send the emails. If I remove the reCaptcha it works great sending email and updating CVS file.

    Thanks!

    ReplyDelete
    Replies
    1. UnknownAugust 17, 2015 at 9:45 PM

      I got it to work by calling another PHP page.

      Delete
  19. UnknownSeptember 29, 2015 at 8:34 AM

    Sir ,
    i am creating own desktop (Window) application and when i am scrapping email than some time fetch this new google captcha.. so i am know how to solved this captcha pragmatically automatically solved and scrapped the email..
    Please sir guidance to me how to solve this google re-captcha fixed automatically and easly scrapped email …

    ReplyDelete
  20. maniOctober 1, 2015 at 10:39 PM

    Hi, i'm trying to get rid of image challenge but from the first time i'm getting images only, I wanted to do text at least once but couldnt do it. I could do audio with data-type="audio" . Is there any data-type for text/numbers only? please help me out. Thanks

    ReplyDelete
  21. SEOCornwallMarch 28, 2016 at 3:00 PM

    Great article just came here from the Google Forum thread, saw you where answering so thought I would check it out. Thanks for clearing a couple of things up for me.

    ReplyDelete
  22. AnonymousApril 27, 2016 at 1:52 PM

    alguem sabe onde consigo baixar o arquivo recaptchalib.php?
    Does anyone know where I can download the file recaptchalib.php?

    ReplyDelete
  23. PreetiMay 21, 2016 at 7:44 AM

    Hi,
    Thank you for nice explanation. But after validating I need to send received data to my email account by using mail function of PHP. Can you suggest how to do that as I am facing problem in that.

    ReplyDelete
  24. DotNET4TechiesJanuary 8, 2017 at 8:34 AM

    Here are the more details about integration and proper error handling in reCAPTCHA integration: http://www.dotnet4techies.com/2016/12/how-to-integrate-googles-im-not-robot.html

    ReplyDelete
  25. UnknownApril 11, 2017 at 9:15 PM

    This comment has been removed by the author.

    ReplyDelete
  26. AnonymousJune 18, 2017 at 10:39 AM

    Thank you very much , code is working fine

    ReplyDelete
Previous Post Next Post