ReCaptcha is a widely use Captcha generation web service which is owned by Google. Yesterday I had the opportunity to use ReCaptcha for one of my project. But there was a problem. Since ReCaptcha is generated to a certain style, width and height using a webservice request, it was hard to put it into the design of the form which I was trying to integrate ReCaptcha.
But finally I could solve the problem using some tricks. This is how I did it.
For using ReCaptcha, first you have to create an account ( account and service is free) in http://recaptcha.net/ and generate a public key and a private key for accessing ReCaptcha web service. You can choose two option when generating those keys, default is generated keys can only be used in provided ( when generating keys) web site. Other one is you can use generated keys in any server and you have to select the checkbox saying some global key enabling ( I can't remember it) for using this second option.
Then download the ReCaptcha library. It contains recaptchalib.php files and an example page. What do you want is recaptchalib.php. To use recaptcha, add following php codes in to the top of your php page.
<?php
require_once('recaptchalib.php');
$publickey = "your_public_key"; // get this from the signup page
$privatekey = "your_private_key";// get this from the signup page
?>Since you are looking for custom theme for ReCaptcha, add this javascript code to head section of the your php page.
<script type= "text/javascript">
var RecaptchaOptions = {
theme: 'custom',
lang: 'en',
custom_theme_widget: 'recaptcha_widget'
};
</script>Value of "custom_theme_widget" which is 'recaptcha_widget' in above code is the name of the div which your recaptcha gadget will put into.
Then add a div with the above mentioned id 'recaptcha_widget' in to the place where you need your recaptcha. All other recaptcha related divs will reside in this created div. Add another div named 'recaptcha_image' inside 'recaptcha_widget' for holding the recaptcha image. You also need to add a input text field named 'recaptcha_response_field' for typing the letters in the captcha image. There are lot of other things you can put as your requirements as a link for audio recaptcha, for error messages, for refreshing recaptcha etc, and I'm not going to put all those things in my example. In addition to that, you also have to put code for getting recaptcha with your publick key (two parts of code, if javascript is disabled, there is an iframe to include).
So this is the code I finally got as ReCaptcha widget,
<div id="recaptcha_widget" style="display: none;">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color: red;">Incorrect please try again</div>
<span class="recaptcha_only_if_image">Enter the words above:</span>
<span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
<input id="recaptcha_response_field" name="recaptcha_response_field" type="text">
<strong style="font-size: 10px;"><a href="javascript:void(0);">Get another CAPTCHA</a></strong>
<!--div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div><br />
<div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div><br /><br />
<div><a href="javascript:Recaptcha.showhelp()">Help</a><br />
</div-->
<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=<?php echo $publickey;?>&lang=en"></script>
<noscript>
<iframe src="http://api.recaptcha.net/noscript?k=<?php echo $publickey;?>&lang=en" height="200" width="500" frameborder="0"></iframe>
<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
<input type="'hidden'" name="'recaptcha_response_field'" value="'manual_challenge'">
</noscript>
</div>I commented out some fields I did not want to use in this code. After coding to this point, there was another problem came. That is the image generated by ReCaptcha is a standarad size of 300px X 57px. By adding a little css code, I could change the size of the recaptcha image as I wanted. I added following CSS code into the head section ( between head tags) of my php page.
<style type="text/css">
div#recaptcha_image > img{
height:46px;
width:240px;
}
</style>This is the final output of the code.
- manjula's blog
- Add new comment
- 241 reads
Comments
1 comment postedEla ela ohoma yang..