What is the main purpose of using Captcha?

Get reCaptcha Key:

Register your site:

Google Site Key

Google Secret Key

index.php

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>

getCurlData.php

<?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

$(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

<?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

#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

<div style= "font-size:40px;" > Successfully verified captcha............ </div>

In this tutorial we are going to share some idea about "". 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.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, which helps to validate the users with "i am not a robot" checkbox. Here we are verifying the user login form usingwith AJAX method.For adding reCAPTCHA to your site, you need to register your site and get reCAPTCHA API keys.Register your site at Google from here – https://www.google.com/recaptcha/admin provide your website domain details without http.You will use this in HTML code.This will help your website to communication with Google for reCAPTCHA verification.Contains simple HTML code with Google reCaptcha widget and also require below mandatory details.CURL function for Google reCaptcha verification.This is a JavaScript file to validate the user login Form and also verify the Captcha checkbox.This code module helps to verify the Captcha form and protect you website from spammer.consists of css design for user login form.Display the success message, once user successfully verify the login form with captcha.