Friday, December 5, 2014

New Checkbox reCAPTCHA Tutorial with Sample Code

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.


46 comments:

  1. Thank you abdul for the Quick Tutorial.

    ReplyDelete
  2. 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. Yes it does support multiple reCAPTCHA in a page.

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

      Delete
    3. 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. 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
  3. for me it always asks me to enter the image challange. how do i fix this?

    ReplyDelete
    Replies
    1. 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. Thanks for the reply. It started working as it should have.

      Delete
    3. What I have to do to the image challenge never appears?

      Delete
  4. It is super! Thanks! :)

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

    ReplyDelete
    Replies
    1. 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. 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. Yes I would like to know this as well. I need to reshape the box smaller.

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

    ReplyDelete
  7. 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. 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. 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. I am trying this ine.

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

      Delete
  10. 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. 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. but how to change the width of re-captcha......?

    ReplyDelete
    Replies
    1. Currently you cannot do this for new recaptcha.

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

    ReplyDelete
  13. What I have to do to the image challenge never appears?

    ReplyDelete
    Replies
    1. 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. can I change text"I'm not a robot" to something else and how?

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

    ReplyDelete
    Replies
    1. It happens if you try the CheckBox for more than 4 times from same IP

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

      Delete
    3. 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. This Demo and example code are the best! thanks :D

    ReplyDelete
  17. 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. 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. I got it to work by calling another PHP page.

      Delete
  19. 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. 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. 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. alguem sabe onde consigo baixar o arquivo recaptchalib.php?
    Does anyone know where I can download the file recaptchalib.php?

    ReplyDelete
  23. 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. 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. This comment has been removed by the author.

    ReplyDelete
  26. Thank you very much , code is working fine

    ReplyDelete