Add Customized reCaptcha in your PHP Application

Captchas are an essential part of an online web form to prevent automated spam bots accessing your application. Though creating captchas is not a rocket science in PHP and can be easily integrated into web based forms but creating a more usable and accesible captcha which can even read out captchas on the fly is a tough job.

But with reCaptcha this won’t be a big task. reCaptcha is a free captcha service that lets you integrate more accessible and friendly captchas into your web application, it shows words from various digitized books rather than creating a cryptic code generated from a random string and can read out captchas to the user.

Here’s how to integrate a customized reCaptcha into your PHP based web application.

1. Get reCaptcha API Key

First of all, you’ll need to sign up with reCaptcha for an API key to use the captchas in your application. You can get an API key fo either a single domain or if you have multiple websites, you can sign up for a global key that’ll work across domains.

After signing up, you’ll have two keys one Public an other Private.

2. Download reCaptcha Library

You don’t have to mess around with fsock functions to talk to reCaptcha service, they provide a library that’ll let you access reCaptcha service easily. Just downloa the latest reCaptcha library and place it in your application folder.

3. Add Captcha to your Form

Now to include captcha in your form, you need to include the recaptcha library you downloaded earlier into your form page and output the recaptcha widget. You’ll need your Public API key to display the captcha. Here’s the sample code that you should add to Form page, make sure it is compiled by php.

//Include anywhere within the form tag of your page

<?php

require_once('recaptchalib.php');//change path to where you placed the library

$publickey = "..."; // your public reCaptcha Key

echo recaptcha_get_html($publickey);

?>

4. Process the captcha

Now when the form is submitted, you’ll need to check the validity of the captcha and if it is ok then proceed to process rest of the form. In order to check the captcha, you’ll need the private API key and then use the recaptcha_check_answer function to check the validity.  Here’s the sample code to be include on the php page that processes the submitted form.

require_once('recaptchalib.php');

$privatekey = "...";//Your Private Key

$resp = recaptcha_check_answer ($privatekey,

                                $_SERVER["REMOTE_ADDR"],

                                $_POST["recaptcha_challenge_field"],

                                $_POST["recaptcha_response_field"]);

if (!$resp->is_valid)

        echo "<p style=\"color:red; \">The entered value doesn't match that of the shown string ".$rep->error."</p>";

else

        echo "<p style=\"color:green; font-weight:bold;\" >Form OK</p>";

With this, your captcha is ready to roll, but wait there is more to look for.

5. Customizing the reCaptcha widget

By default, the reCaptcha widget shows up in red theme. There are other themes you can use namely white, blackglass and clean. To use a different theme, add this into the head section of the page on which form is displayed.

 <script type="text/javascript">

 var RecaptchaOptions = {

    theme : '<theme name here>'

 };

 </script>

And if you’d like to have your own custom theme, you can certainly do that.

6. Creating your own Custom Theme

The captcha image and textbox in which value is to be entered is mandatory to use recaptcha, other elements like refresh, switch to audio are optional. Now in your form tag create a divelement with id as recaptcha_image and a text input box with name and id set torecaptcha_response_field.

And to avoid screen flickering while recaptcha loads, you can include all the widget elements within a div having an inline style of display:none.

Here’s the code to include within the form tag. Code is self-explanatory.

<div id="divrecaptcha" style="display:none;">

    <div id="controls"><a href="#" onclick="Recaptcha.reload(); " >Get another Captcha</a> <br />

       <a href="#" onclick="javascript:Recaptcha.switch_type('audio');" class="recaptcha_only_if_image" >Get Audio Captcha</a>

       <a href="#" onclick="Recaptcha.switch_type('image'); " class="recaptcha_only_if_audio" >Get Text Captcha</a> <br />

       <a href="#" onclick="Recaptcha.showhelp();" >Help</a>

     </div>

       <div id="recaptcha_image"></div><!--Important-->

    <p>

 <input type="text" name="recaptcha_response_field" id="recaptcha_response_field"  /><!--Important-->

<span class="recaptcha_only_if_image">Enter the words shown above separated by space</span>

<span class="recaptcha_only_if_audio">Enter the numbers you hear</span></p>

     </div>

     <?php

    require_once('recaptchalib.php');

    $publickey = "..."; // your public API key

    echo recaptcha_get_html($publickey);

    ?>

And in the head section of the form page, add this code.

<script type="text/javascript" >

 var RecaptchaOptions = {

    theme : 'custom',

    lang: 'en',

    custom_theme_widget: 'divrecaptcha' //div enclosing widget elements

 };

</script>

I added some styles to the widget elements in order to give an idea. You can apply any style to the elements you want.

<style type="text/css" >

#divrecaptcha{

    width:500px;

    font-size:12px; font-family:Arial, Helvetica, sans-serif;

}

#controls{ width:180px; float:right; }

#recaptcha_image{

    padding:2px; background:#f9f9f9;

    border:1px solid #e0e0e0;

}

#recaptcha_response_field {

   border: 1px solid #999 !important; //Text input field border color

   background-color:#ccc !important; //Text input field background color

   width:120px !important;

   padding:5px;

}

#divrecaptcha a{

     font-size:11px;    font-family:Verdana;

    text-decoration:none; color:#3366ff;

}

#divrecaptcha a:hover{

     color:113399; text-decoration:underline;

}

</style>