What is CAPTCHA?
CAPTCHA is very important tool to prevent your website from SPAM. CAPTCHA script asks your user to enter some random words which can only identified by human eye.
Why Use CAPTCHA?
If you have any HTML form on your website, where people can submit information. You need to have CAPTCHA to stop auto submission from a bot. Some examples of forms are comment form or User Registration form. CAPTCHA script saves the HTML forms from auto submissions and save it from SPAM.
How to integrate reCAPTCHA?
reCAPTCHA is a CAPTCHA service offered by Google Inc. reCAPTCHA is best CAPTCHA service offered anywhere and it is free to use. Below is the guide to use reCAPTCHA at your website.
Check out the example of Recaptcha. You can download the source code from here.
Step 1: Sign up for Recaptcha
Go to Recaptcha and Sign up for reCAPTCHA service. You need to have Google account to use this service.
Step 2: Register your Website
You need to register your website for reCAPTCHA service. Go to https://www.google.com/recaptcha/admin/create and create keys for your domain. You will get public and private key for your domain.
Step 3: Client Side Integration
Recaptcha provides you several means to integrate it at your website. I am using AJAX API to use it.
Include recaptcha ajax javascript inside your head tag
1 | <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script> |
Then before your submit button use this code :
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> jQuery(document).ready(function (){ Recaptcha.create("Your Public Key", "recpatcha_show", { theme: "red", callback: Recaptcha.focus_response_field } ); }); </script> <div id="recpatcha_show"></div> <div id="captchaStatus" style="color:red;font:16px;"></div> |
We need to validate the user’s response. So include the validate function onSubmit call of your form.
Below is the validateCaptcha method which you can use to validate Captcha entered by user.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | function validateCaptcha() { challengeField = $("input#recaptcha_challenge_field").val(); responseField = $("input#recaptcha_response_field").val(); var html = $.ajax({ type: "POST", url: "verify.php", data: "recaptcha_challenge_field="+Recaptcha.get_challenge()+"&recaptcha_response_field="+ Recaptcha.get_response(), async: false }).responseText; if(html == "success") { $("#captchaStatus").html(" "); // Uncomment the following line in your application return true; } else { $("#captchaStatus").html("Your captcha is incorrect. Please try again"); Recaptcha.reload(); return false; } } |
Step 4 : Server Side Integration
Download the PHP Recaptcha lib and store it on your server.
Here is the code to verify the user’s input. You can create a separate file on your server.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?php 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) { // What happens when the CAPTCHA was entered incorrectly die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." . "(reCAPTCHA said: " . $resp->error . ")"); } else { echo 'success'; } ?> |
Thats it. Your Recaptcha is working. Try out a Demo of Recaptcha.
Oretha Motz
on Mar 23rd, 2012
@ 12:26 am:
What’s Happening i’m new to this, I stumbled upon this I have found It absolutely useful and it has aided me out loads. I hope to contribute & assist other users like its aided me. Great job.
Nithin
on Mar 26th, 2012
@ 6:59 am:
Nice and explained very well. I have been wondering, can this be used to avoid SPAM comments in wordpress?
And again, re captcha sometimes very difficult to read even for us
Manish
on Mar 29th, 2012
@ 1:47 am:
Adding reCaptcha to WordPress comments form would not be a good idea. It will make commenting difficult. reCapthca is preferred for contact us forms or registration pages.
David
on May 31st, 2012
@ 7:59 am:
Great tutorial helped me