Google reCAPTCHA tutorial

Rcently Google has announced new service to prevent spams to your website. They name it “NO CAPTCHA reCAPTCHA” . 

 In this tutorial i am going to show you how to use it in your website. this is  simple script. .

1.Register your website and get Secret Key.

Very first thing you need to do is register your website on Google recaptcha to do that click here.
You have To Login to your Google account and submit the form.
ps : in my case i add the localhost.dev domain by modifing the host file in C:\Windows\System32\Drivers\etc
add the line 
127.0.0.1     localhost.dev

 
<VirtualHost *:80>
    DocumentRoot /path/to/document/root/site/
    ServerName site.dev
    ServerAlias  localhost.dev
# Other directives here
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot /path/to/document/root/
    ServerName localhost
# Other directives here
</VirtualHost>

Once submit, Google will provide you following two information.
  • Site key
  • Secret key

2.Integrate it 

To integrate it  you need to put it in client side as well as in Server side. In client HTML page you need to integrate this line before <HEAD> tag.
<script src='https://www.google.com/recaptcha/api.js'></script>


And to show the widget into your form you need to put this below contact form, comment form etc.
<div class="g-recaptcha" data-sitekey="== Your site Key =="></div>
When the form get submit to Server, this script will send ‘g-recaptcha-response’ as a POST data. You need to verify it in order to see whether user has checked the Captcha or not.

Simple comment form with Google reCAPTCH:

Index.html
<html>
  <head>
    <title>Google recapcha demo</title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>
  <body>
    <h1>Google reCAPTHA Demo</h1>
    <form id="comment_form" action="form.php" method="post">
      <input type="email" placeholder="Type your email" size="40"><br><br>
      <textarea name="comment" rows="8" cols="39"></textarea><br><br>
      <input type="submit" name="submit" value="Post comment"><br><br>
      <div class="g-recaptcha" data-sitekey="=== Your site key ==="></div>
    </form>
  </body>
</html>
This will generate this form.

Screenshot from 2014-12-05 10:36:46
On server side i am using PHP for now. So on Form submit request we will check the POST variable.
form.php
<?php

        $email;$comment;$captcha;
        if(isset($_POST['email'])){
          $email=$_POST['email'];
        }if(isset($_POST['comment'])){
          $email=$_POST['comment'];
        }if(isset($_POST['g-recaptcha-response'])){
          $captcha=$_POST['g-recaptcha-response'];
        }
        if(!$captcha){
          echo '<h2>Please check the the captcha form.</h2>';
          exit;
        }
        $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=YOUR SECRET KEY&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
        if($response.success==false)
        {
          echo '<h2>You are spammer ! Get the @$%K out</h2>';
        }else
        {
          echo '<h2>Thanks for posting comment.</h2>';
        }
?>

you can also use cURL instead of file_get_contents

Comments

  1. RiseSEO CompanyFebruary 22, 2022 at 12:39 PM

    This website is remarkable information and facts it's really excellent Anti captcha key

    ReplyDelete
  2. AnonymousMay 25, 2022 at 7:27 AM

    anti captchaThanks for share this wonderful information with us.

    ReplyDelete

Post a Comment

Popular posts from this blog

Realtime Chat Application with CakePHP and Socket.IO #1

Image
In this blog we will build a Realtime Chat Application with CakePHP and Socket.IO Your are free to use another framework, the idea is just learning the basics and a few (Socket.IO) tips Database :  To store our data for this application we need 4 tables :  users :         contains user's informations such as username and password hash ,email ...  messages : contains messages between users, it also store the information of sender and destination  user companies : or teams table ,in order to organise groups i add this table to give the user the freedom  of organizing his contact it stores the company name with his owner .   companies_users : it contains the users and their respective  companies here the SQL file fo database structure     file in the next tutorial we'r gone started building the frontend using cakephp  
Read more

Twitter API with PHP

Image
In order to use a communicante with a website ( in this case twitter) , we need to call it's  api But there too many standars to communicate with api ( OAuth1, OAuth2...) , hopefully they provides api documentation . In this tutoriel we are gonna use twitter api ( 1.1  ) as exemple to get ou last tweets , but first we have to create twitter application Creating twitter application give us  some random strings `consumer_secret`, `consumer_key`, `access_token` and  `access_token_secret` We will use these strings later in OAuth process. Don't panic no need to knowing all OAuth process using  php , Moreover, there are many php libraries and packages to do this for us , there is a very popular one ( twitter-api-php ) first we create an empty folder for our project then require the package : composer require  j7mbo/twitter-api-php copy and past random strings from your twitter application in to this array  variable :...
Read more

Let's build a mobile application with Ionic Framework #3

Image
Today We 're gonna start to write some code , first is make a main controller to our ionic application , of course by controller i mean angularjs controller . we start by add ng-controller to our body tag , but this is just a reference to controller we need also to create this controller (MainController) .  The idea is just use http call to get the data.json AngularJS comes with built in $ http service  to make (GET,UPDATE,POST,DELETE) in our case we are are doing get call app.controller('MainController',function ($scope,$http) {   // body...   $http.get("data.json")     .then(function(response) {         console.log(response)     }); }) we are just login data in the console. NB : the http call could make some time before it returns the  data in , our case we are working localy, but in real life we have to work with web services and  probably internet connection like mine lo...
Read more