Introduction to Google reCaptcha
Google reCaptcha is Captcha like system that is used to differentiate between an human and a Robot. Google reCaptcha is use to reduce spam and increase the security of your applications. Most of all traditional captcha is less secure while google recaptcha provide a secure way to reduce spamming. Since it is develop and tested by world’s top developers.
In reCaptcha, system asked user to click on a checkbox to prove that he is an human. The logic behind this is known cookies or mouse movements and if this fails ,it asked user to select the frames of images of a specific object. For example frames of images seems like car, shop etc.
Why use Google reCaptcha ?
How to integrate Google reCaptcha ?
Let’s start with Google reCaptcha.
Step 1: First of all we need an api key. We can get the api key from https://www.google.com/recaptcha/admin . To get an api key, you must logged in with your google account. After login you can register your site name here.
Add a label for your site like i have added Happycoder and Domains section add your site name for example happycoder.me and click on register.
Step 2: After registering you will get the follwing keys.
Step 3: Now include the following script in head section of your page
<script src='https://www.google.com/recaptcha/api.js'></script>
Step 4: The next thing is to add the following placeholder inside your form tag
<div class="g-recaptcha" data-sitekey="6LdwRDwUAAAAACO-e6MRRJSALFN2MmWCzYCbdQwX"></div>
Note: data-sitekey="Your data site key is here provide by google"
Some other attribute that you can use like data-theme, data-type, data-size etc.
Step 5: Now writing all code together
Step 1:
index.php
<html> <head> <title>reCAPTCHA demo: Simple page</title> <script src="https://www.google.com/recaptcha/api.js" async defer></script> </head> <body> <form action="form_submit.php" method="POST"> <label for="name">Name:</label> <input name="name" required><br /> <label for="email">Email:</label> <input name="email" type="email" required><br /> <div class="g-recaptcha" data-sitekey="6LdwRDwUAAAAACO-e6MRRJSALFN2MmWCzYCbdQwX"></div> <br/> <input type="submit" value="Submit"> </form> </body> </html>
Step 2: We have a form with method post and action form_submit.php
form_submit.php
<?php foreach ($_POST as $key => $value) { echo '<p><strong>' . $key.':</strong> '.$value.'</p>'; } ?>
as a result you will get the following hashed value, If you submit the after checking the captcha .
If you not check the captcha you will see the g-recaptcha-response value is null.
Step 3: Download the recaptchalib.php file from github and include it into form_submit.php file
<?php require_once "recaptchalib.php"; ?>
Step 4: recaptchalib.php library contains a lot of functions that sends g-recaptcha-response to google by using a HTTP Request.
To use these functions we will set some variables
// your secret key $secret = "6LdwRDwUAAAAAC-BqN2DjP-mY4RaxEiVHovJ5AmX"; // empty response $response = null; // check secret key $reCaptcha = new ReCaptcha($secret);
// if submitted check response if ($_POST["g-recaptcha-response"]) { $response = $reCaptcha->verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); }
<?php if ($response != null && $response->success) { echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!"; } else { header("location:index.php"); } ?>
The final form_submit.php file with all above code is as follow
<?php // grab recaptcha library require_once "recaptchalib.php"; // your secret key $secret = " 6LdwRDwUAAAAAC-BqN2DjP-mY4RaxEiVHovJ5AmX"; // empty response $response = null; // check secret key $reCaptcha = new ReCaptcha($secret); // if submitted check response if ($_POST["g-recaptcha-response"]) { $response = $reCaptcha->verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); } if ($response != null && $response->success) { echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!"; } else { header("location:index.php"); } ?>
You can also read Google place autocomplete address api
after submitting the form successfully, we get the following message otherwise redirect to index.php page.
Guys if you feel any problem in google reCaptcha integration, you can also leave it on comment box.
Thanks.