Teachers: New Checkbox reCAPTCHA Tutorial with Sample Code

Thursday, February 5, 2015

New Checkbox reCAPTCHA Tutorial with Sample Code

Google has improved their reCAPTCHA to an user friendly one with a tag Im 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 users 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.

Teachers

Thursday, February 5, 2015

New Checkbox reCAPTCHA Tutorial with Sample Code

No comments:

Post a Comment