Saturday, December 2, 2017

Using Google reCAPTCHA with PHP - Are you a Robot?


In this tutorial we are going to share some idea about "Google reCAPTCHA". Google has been introduced reCAPTCHA API called Are you a robot? This protects your website for spammers and robots. You can easily integrate the google reCAPTCHA API in you website.

What is the main purpose of using Captcha?

The technology is used mostly to block spammers and bots that try to automatically harvest email addresses or try to automatically sign up for or make use of Web sites, blogs or forums. CAPTCHA, whose users include Yahoo and Google, blocks automated systems, which can't read the distorted letters in the graphic.

Now we will discuss about reCAPTCHA V2 , which helps to validate the users with "i am not a robot" checkbox. Here we are verifying the user login form using reCAPTCHA  with AJAX method.

Get reCaptcha Key:

For adding reCAPTCHA to your site, you need to register your site and get reCAPTCHA API keys.

Register your site:

Register your site at Google from here – https://www.google.com/recaptcha/admin
provide your website domain details without http.

A simple PHP CAPTCHA script.

Google Site Key

You will use this in HTML code.

A simple PHP CAPTCHA script.

Google Secret Key

This will help your website to communication with Google for reCAPTCHA verification.
A simple PHP CAPTCHA script.


index.php
Contains simple HTML code with Google reCaptcha widget and also require below mandatory details.
  • You need to include the reCAPTCHA API JavaScript library:
<script src='https://www.google.com/recaptcha/api.js'></script>
  • You need to include the reCAPTCHA widget in html Form:
<div class="g-recaptcha" data-sitekey="6LkkkjoUAAAAAHlWGJo7EsB2wtj6Ceev2QkHpCND"></div>

<html >
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<script src="jquery-3.2.1.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src='FormLogin.js'></script>
</head>
<body>

<div id="login">
<div class="errorMsg" style="padding:10px;display:none;margin-top:10px;" ></div>
<h3>Login page</h3>
<form >
<label>Email</label>
<input type="text" id ="emailid" name="emailid" autocomplete="off" />
<label>Password</label>
<input type="password" id="userpassowrd" name="userpassowrd" autocomplete="off"/>

<div class="g-recaptcha" data-sitekey="6Lf42joUAAAAAHlWGJo7EsB2wtj6Ceev2QkHpCND"></div>
<input type="button" class="button" id="submitloginform" name="submitloginform" value="Login">

</form>
</div>

</body>

</html>

A simple PHP CAPTCHA script.
getCurlData.php
CURL function for Google reCaptcha verification.
<?php
function getCurlData($url)
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_TIMEOUT, 10);
curl_setopt($curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16");
$curlData = curl_exec($curl);
curl_close($curl);
return $curlData;
}
?>

FormLogin.js
This is a JavaScript file to validate the user login Form and also verify the Captcha checkbox.
$(document).ready(function() {
$( "#submitloginform" ).on( "click", function() {
var email = $("#emailid").val();
var password = $("#userpassowrd").val(); 
if(email == "" ){
$(".errorMsg").show().css("background-color", "#ffcccc");
$(".errorMsg").html("*Please enter email id");     
}
else if(password == "" ){
$(".errorMsg").show().css("background-color", "#ffcccc"); 
$(".errorMsg").html("*Please enter password");     
}
else if(grecaptcha && grecaptcha.getResponse().length == 0){
$(".errorMsg").show().css("background-color", "#ffcccc"); 
$(".errorMsg").html("*Please verify the captcha");      
}
else{
$(".errorMsg").html("");  
var dataString = 'email='+ email + '&userpassowrd=' + password + '&g-recaptcha-response='+ grecaptcha.getResponse() ;
$.ajax({
type: "POST",
url: "CaptchaValidation.php",
data: dataString,
cache: false,
beforeSend: function() 
{   $(".errorMsg").show().css("background-color", "#FFFFE0");
$(".errorMsg").html("Please Wait...");
},
success: function(response)
{
$(".errorMsg").show().css("background-color", "#d5fdd5");
$(".errorMsg").html(response);
var str = "http://localhost/skptricks/php%20google%20recaptcha/";    
window.location.href = str+"success.php";
}
});     
} 
});
});

CaptchaValidation.php
This code module helps to verify the Captcha form and protect you website from spammer.
<?php
include("getCurlData.php");
if (isset($_POST['email']) and isset($_POST['userpassowrd']) and isset($_POST['g-recaptcha-response']))
{

$email = $_POST['email'];
$password = $_POST['userpassowrd'];
$recaptcha = $_POST['g-recaptcha-response']; 
 
$google_url="https://www.google.com/recaptcha/api/siteverify";
$secret='6Lf42joUAAAAAJROMSxnCKmAOX29VWIaFhLXKLjn';
$ip=$_SERVER['REMOTE_ADDR'];
$url=$google_url."?secret=".$secret."&response=".$recaptcha."&remoteip=".$ip;
$res=getCurlData($url);
$res= json_decode($res, true);

if($res['success'])
{
//write your logic to verify user login database
echo "Successful...";
}
else{
 echo "Please re-enter your reCAPTCHA.";
}
 
}
else{
 echo "Please re-enter your reCAPTCHA.";
} 

?>

design.css
consists of css design for user login form.
#login{
width: 300px; border: 1px solid #d6d7da; 
padding: 0px 15px 15px 15px; 
border-radius: 5px;font-family: arial; 
line-height: 16px;color: #333333; font-size: 14px; 
background: #ffffff;rgba(200,200,200,0.7) 0 4px 10px -1px;
margin: 100px auto;
}

 div label, div input{display: block;margin-bottom: 5px;width: 90%}
div input{ 
padding: 10px;
border: solid 1px #BDC7D8; 
margin-bottom: 20px;
}
.button {
background-color: #00BFFF ;
border-color: #3ac162;
font-weight: bold;
padding: 12px 15px;
color: #ffffff;
}

success.php
Display the success message, once user successfully verify the login form with captcha.
<div style="font-size:40px;">
Successfully verified captcha............
</div>

Video Tutorial:




Download link :
https://github.com/skptricks/php-Tutorials/tree/master/Using%20Google%20reCAPTCHA%20with%20PHP%20-%20%20Are%20you%20a%20Robot-

No comments:

Post a Comment