I would love to say that “Google is GOD or God is Google”. Google is the place where you can find the answer to any questions. Google launched so many services like maps, YouTube, mail, news, calendar, photos, drive etc which are helpful in our daily activities. Google also support for the secured online activities. Recently, Google announced for Google reCAPTCHA and named it “NO CAPTCHA reCAPTCHA” which will prevent spam and attacks on websites. In this article, I will show you how to add multiple Google reCAPTCHA in a single page.
What is Google reCAPTCHA ?
Google reCAPTCHA is a free service which is provided by the Google that protects your website from spam and abuse. Google reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site. reCAPTCHA uses multiple algorithms, So for breaking them user must need to understand the mechanism of reCAPTCHA. Whenever our CAPTCHAs are solved, it will take human effort helps digitize text, annotate images, and build machine learning datasets.
To integrate the Google reCAPTCHA in a site we have to first register our website on Google and need to take the site key from it. To register your site for reCAPTCHA visit below link.
https://www.google.com/recaptcha
Register for Google reCAPTCHA :
Open the above mention link and log in with your google account detail and enter the website name.
As a result of it, we will get two keys which will be used for creating reCAPTCHA.
- Site key
- Secret key
How to integrate Google reCAPTCHA in a site ?
There are two ways to integrate Google reCAPTCHA in a page.
- Automatically render the reCAPTCHA widget
- Explicitly render the reCAPTCHA widget
Automatically render the Google reCAPTCHA widget :
This is the easiest way of rendering the reCAPTCHA widget on your page. To integrate this, First of all, we need to add the below script in “<head>” tag.
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>Now for showing the widget of the reCAPTCHA, we need to add the below code in a page.
<div class="g-recaptcha" data-sitekey="Your site Key"></div>When the form gets submitted, this script will send “g-recaptcha-response” as a POST data to the server. We have to confirm it so as to see whether the user has checked the Captcha or not. Below is the script which will help us to add reCAPTCHA to our website. I am using PHP Language for a demo.
First of all, create one file called reCAPTCHA.php in your www (Wamp Users) or htdocs(Xampp Users) folder and insert the below code in that.
<html>
<head>
<title>Google reCAPTCHA demo - readmyviews.com</title>
<script src='https://www.google.com/recaptcha/api.js'></script>
<style>
input.txtfield,textarea{border: #ccc solid 1px;box-shadow: none;padding: 7px;width: 40%;box-sizing: border-box;}
.submit {background: orange;padding: 5px 10px;color: #ffffff;border: none;display: inline-block;font-weight: bold;vertical-align: middle;width: auto;box-shadow: none;line-height: 15px;margin-top: 10px;}
</style>
</head>
<body>
<h1>Single Google reCAPTCHA Demo</h1>
<form id="comment_form" action="form.php" method="post">
<input type="email" placeholder="Type your email" size="40" class="txtfield"><br/><br/>
<textarea name="comment" rows="5" cols="50"></textarea><br/><br/>
<div class="g-recaptcha" data-sitekey="sitekey-of-website"></div>
<input type="submit" name="submit" value="Submit" class="submit"><br><br>
</form>
</body>
</html>Now run this file. You will get an output like below as a result of it.
Note : We will find text seems like “This reCAPTCHA is currently running on localhost” on our screen because we are using the site key of our original domain and running this file in our local machine.
Explicitly render the reCAPTCHA widget :
Here we are going to use the onload callback function and adding parameters to the JavaScript resource. We will use this method to create multiple, Google reCAPTCHA in a single page.
First of all, create one file called reCAPTCHA.php in your www (Wamp Users) or htdocs(Xampp Users) folder and insert the below code in that.
<html>
<head>
<title>Google reCAPTCHA demo - readmyviews.com</title>
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script>
var id='';
$(document).ready(function() {
CaptchaCallback();
});
function CaptchaCallback() {
$('div').each(function(){
id=$(this).attr('id');
grecaptcha.render(id,{'sitekey' : 'website-sitekey'});
});
}
</script>
<style>
input.txtfield,textarea{border: #ccc solid 1px;box-shadow: none;padding: 7px;width: 40%;box-sizing: border-box;}
.submit {background: orange;padding: 5px 10px;color: #ffffff;border: none;display: inline-block;font-weight: bold;vertical-align: middle;width: auto;box-shadow: none;line-height: 15px;margin-top: 10px;}
</style>
</head>
<body>
<h1>Multiple Google reCAPTCHA Demo</h1>
<form id="comment_form" action="form.php" method="post">
<input type="email" placeholder="Type your email" size="40" class="txtfield"><br><br>
<textarea name="comment" rows="5" cols="50"></textarea><br><br>
<?php
$i=1;
for($i=1;$i<=3;$i++)
{
?>
<div class="g-recaptcha" data-sitekey="sitekey-of-website" id="g-recaptcha-<?php echo $i;?>"></div><br><br>
<?php
}
?>
<input type="submit" name="submit" value="Submit" class="submit"><br><br>
</form>
</body>
</html>Now run this file. You will get an output like below as a result of it.
So like this, we can integrate Google reCAPTCHA in our website. Hope this article is helpful to you.
While creating a website developer should have to keep few things in mind which will helpful in SEO for the site. Good SEO of the site makes the greatest impact on Google and for better business, this will be necessary. For more helpful tips on SEO click here.