

You must have seen the above captcha on StackOverflow (Confirm that you are Human :O) or Google's Webmaster Tools website. They look much elegant and are much secure than the older ones.
What is it? reCAPTCHA is a free service from Google to protect websites from spam and abuse while letting real people pass through with ease. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site.
Advantage:- Its free.
- Provides Advance Security.
- Easy to use and Implement. Effortless integration.
- Keeps Bots Away.
- Register your website at reCAPTCHA: https://www.google.com/recaptcha/admin#list (Login with your Gmail Account)
- You will get a form where you need to provide details like: Label, Domains, and Owners Email Ids.
- Click Submit.
- You will get Site Key: Use this in the HTML code your site serves to users and Secret Key: Used for communication between your site and Google. Be sure to keep it a secret.
- Add the following code in your HTML pages :
- Add this in the HTML tag (just before the closing head) :
<script src='https://www.google.com/recaptcha/api.js'></script>
Add below code at the end of <form> where you want the reCAPTCHA widget to appear:
<div class="g-recaptcha" data-sitekey="YOUR-SITE-KEY"></div></script>
Example: reCAPTCHA.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reCaptcha : Hello World Tutorial</title>
</head>
<body>
<form id="form1" action="submit-data.php" method="post">
Enter Some Text : <input type="someText" size="40"><br><br>
<input type="submit" name="submit" value="Submit"><br><br>
<div class="g-recaptcha" data-sitekey="PUT-YOUR-SITE-KEY-HERE"></div>
</form>
</body>
</html>
When users submit the above form, you'll get as part of the payload a string with the name "g-recaptcha-response". To check whether Google has verified that user, send a POST request with parameters to address https://www.google.com/recaptcha/api/siteverify :
1. secret (Your SECRET KEY)
2. response (i.e. value of g-recaptcha-response)
3. remoteip (end user IP)
Example: server-implementation.php<?php
$someText = $_POST['someText'];
$reCaptcha=$_POST['g-recaptcha-response'];
if(!$reCaptcha){
echo "'"<h2>You must check reCaptcha.</h2>";
exit;
}
$SECRET_KEY = "PASTE-YOUR-RECAPTCHA-SECRET-KEY-HERE";
$reCaptchaResponse=file_get_contents("https://www.google.com/recaptcha/api/siteverify?
secret=".$SECRET_KEY."&response=".$reCaptcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
if($reCaptchaResponse.success == false)
{
//SEEMS LIKE A BOT!!
}else
{
//ITS A GENUINE GUY!
}
?>
Above example is in PHP: You can integrate reCaptcha at server end using other languages like ASP.NET, Java JSP, javaScript e.t.c
Have Questions? Post them here!
- Elegant CSS Box Shadows Ideas
- How to Vertically Center Align Text in a Div using CSS Code Example
- How to Center Align Image in Bootstrap
- Change CSS Background Opacity with Examples
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- Simple CSS Grid Example
- CSS: Apply opacity only for div background and not text
- How to create a circular Image using pure CSS Code
- How to place two div elements next to each other
- Responsive Web Design with CSS Media Queries: A Beginner's Tutorial [Updated for 2023]
- Add scroll to div element in HTML Css
- How to make div or text in html unselectable using CSS
- reCAPTCHA Implementation Tutorial
- Set Falling Show on Website for Christmas using Pure CSS Code
- How to set CSS background-Image Property
- List of 32 CSS cursors web developers must know about
- 10 Must Know CSS Border Styles with Examples
- How to make jsfiddle bootstrap ready
- Horizontally Center Align tag in HTML using CSS
- Tailwind CSS Hello World Example
- align image at middle of div element
- Only Chessboard using HTML and CSS Code Example
More Posts:- How to kill tomcat server process using Mac Terminal Command - Tomcat
- Install the minimal Linux on Docker (only 5 mb Alpine Linux) - Docker
- Steps of working with Stored Procedures using JDBCTemplate Spring Boot - Java
- How to change Android EditText Cursor Color - Android
- Run only a Single Unit Test using Gradle - Gradle
- Turn off Focus Mode on Mac - HowTos
- Gradle FAILURE: Build failed with an exception - Task not found in root project - Gradle
- How to display Toast on Button Click : Android - Android