Sie sind auf Seite 1von 10

Hi guys, today we are going to discuss how to integrate Google

Captcha with our php website. As we all know that we are living in the
world of technology. Also, it is very easy to hack someone’s website or
to steal someone’s website data by running some scripts. So, to
protect our website data from hackers or bots we use google’s
Captcha or reCaptcha script.
A Captcha is a short term used for
“Completely Automated Public Turing test to tell Computers
and Humans Apart” is a type of challenge to judge that the computer
user is Human or bot. It is very basic security for our website data and
everyone is using this technology.
The logic of Captcha or reCaptcha is whenever the human uses the
computer they have to click the Captcha and it will send the request
to the google to verify the user. But when the Bot uses the computer
the Captcha is not verified so that it will prevent the user to move
forward or hack the data.
In this article, we will learn how to register our website to use the
google’s Captcha or reCaptcha.
HOW TO PREVENT OUR WEBSITE
FROM BOTS ( SHORT FOR ‘ROBOTS’ )
To prevent our website from these attacks, Google is providing a
technique to protect our website. The technique that we will use to
protect our website is captcha or reCaptcha. Captcha or reCaptcha is a
technique generated or designed by system to protect the websites
from bots.

WHAT IS BOT?
Bot is a short term for “robots”. Bot is like a computer code that runs
over the internet. Bots are of two types one runs automatically while
another runs commands only when they receive some specific input.

WHY WE USE CAPTCHA OR RECAPTCHA ?


We use Captcha or reCaptcha to verify whether the computer user is
the robot or human. Also, if we are not verifying the computer user
then it will be very harmful for us, may be we will loose our data. So,
for that purpose we use Google Captcha or reCaptcha.

HOW CAPTCHA OR RECAPTCHA


LOOKS ?

Above is an example of Google reCaptcha.


STEPS TO INTEGRATE GOOGLE
CAPTCHA WITH OUR PHP WEBSITE:

STEP 1: REGISTER YOUR DOMAIN TO USE


CAPTCHA.
First of all, we have to register our website or domain for Google
Captcha or reCaptcha. Below is the url to register for Google Captcha.
https://www.google.com/recaptcha/admin
Also, once you login into above url with your gmail id then you will get
a form where you have to write your domain name, choose the type of
Captcha and label on which page you will use the Captcha. Below is
the screen after login to Google.
After this, click on register button you will get a page where your site
key and secret key will be available. Also, below is the screen of site
key and secret key.

After this, click on the save changes button your site and secret key
for Captcha will be enabled or ready to use.

SITE-KEY
Site key is used to add or show the widget for Captcha in your HTML
page. Also, below is the example of site key.
Site Key = 8hvJHVBhjHfHJf657nkmBJjjvjh71d87hkad
SECRET KEY
A secret key is used to communicate between your website and
reCaptcha server. Also, below is the example of a secret key.
Secret Key = 6hvjhJHhvbjhvjhDdfGsddgEvjhjvjh78687h_kjn
STEP 2: INCLUDE SCRIPT FILE FOR GOOGLE
CAPTCHA.
You need to add Google Captcha javascript API into your HTML section
before closing of the </head> tag as shown below.

<script src="https://www.google.com/recaptcha/api.js"></script>

In addition, if you are not including the above script tag in your HTML
template. Then you will not be able to view the Captcha or reCaptcha
widget on your HTML page.

STEP 3: INCLUDE HTML SECTION OF GOOGLE


RECAPTCHA WIDGET.
We need to add a <div> tag to display the Google reCaptcha into our
form. Also, below is the widget of Google reCaptcha.

<div class="g-recaptcha" data-sitekey="9LDDpf0eVtMZY6kdJnGhsYYY-5ksd-


W"></div>

For that purpose, you need to create a form in which you want to add
Google reCaptcha widget to verify that the computer user is human or
bots. We have to add the Google reCaptcha widget just before the
submit button as shown below.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Google reCaptcha Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,
initial-scale=1″>
<link rel=”stylesheet”
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/b
ootstrap.min.css”>
<script
src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.
min.js”></script>
<script
src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/boo
tstrap.min.js”></script>
<script src=”https://www.google.com/recaptcha/api.js” async
defer></script>
</head>
<body>
<div class=”container”>
<?php
if(!empty($htmlContent))
{
echo $htmlContent;
}
else
{
echo “”;
}
?>
<h2>Registration form</h2>
<form action=”” method=”post”>
<div class=”form-group”>
<label for=”email”>Email:</label>
<input type=”email” class=”form-control” id=”email”
placeholder=”Enter email” name=”email”>
</div>
<div class=”form-group”>
<label for=”pwd”>Password:</label>
<input type=”password” class=”form-control” id=”pwd”
placeholder=”Enter password” name=”pwd”>
</div>
<div class=”form-group”>
<label for=”pwd”>Name:</label>
<input type=”text” class=”form-control” id=”name”
placeholder=”Enter Name” name=”name”>
</div>
<div class=”g-recaptcha” data-
sitekey=”6LfTPlUUAAAAAGSUt1_LqpJXQpatx7_BzTDcU9On”>
</div>
<input type=”submit” class=”btn btn-default” id=”submit”
name=”submit” value=”Submit”/>
</form>
</div>
</body>
</html>
As we can see the above HTML code that includes the Javascript API
and Google reCaptcha widget on the registration form.
STEP 4: VALIDATE PHP CODE.
We need to check that all fields are filled and reCaptcha is clicked by
the computer user or not. So, for that purpose, we need to validate
the form fields and reCaptcha. Also, below is the whole validation
code.
<?php
error_reporting(0);
if (isset($_POST[‘submit’]) && !empty($_POST[‘submit’])) {
if (isset($_POST[‘g-recaptcha-response’]) && !
empty($_POST[‘g-recaptcha-response’])) {
//Below is your secret key
$secret = ‘6LfTPlUUAAAAANgJTPa67hlDAXu4ppK2FgSbSOO6’;
//get verify response data
$captchaResponse =
file_get_contents(‘https://www.google.com/recaptcha/api/sitev
erify?secret=’ . $secret . ‘&response=’ . $_POST[‘g-recaptcha-
response’]);
$responseData = json_decode($captchaResponse );
if ($responseData->success) {
//Registration form submission code
$name = !empty($_POST[‘name’]) ? $_POST[‘name’] : ”;
$email = !empty($_POST[’email’]) ? $_POST[’email’] : ”;
$password = !empty($_POST[‘pwd’]) ? $_POST[‘pwd’] : ”;
$htmlContent = “
<h1>Registration details</h1>
<p><b>Name: </b>” . $name . “</p>
<p><b>Email: </b>” . $email . “</p>
<p><b>Message: </b>” . $password . “</p>
“;
} else {
$errMsg = ‘Captcha verification failed, please try again.’;
echo “<script>alert(‘” . $errMsg . “‘);</script>”;
}
} else {
$errMsg = ‘Please click on the reCAPTCHA box.’;
echo “<script>alert(‘” . $errMsg . “‘);</script>”;
}
} else {
$errMsg = ”;
echo “<script>alert(‘Please fill data’);</script>”;
}
?>
In above code first, we check that submit button is pressed or not. If it
is not pressed then it will alert a message i.e ‘Please fill the fields’.
Then we will check that reCaptcha is clicked or not. After checking all
the validation we will hit an API to verify that captcha and if the
response is true or successful then we will show the user details
otherwise it will alert a message that Captcha verification failed.
In addition, below is the combined code and save it as captcha.php.
<?php
error_reporting(0);
if (isset($_POST[‘submit’]) && !empty($_POST[‘submit’])) {
if (isset($_POST[‘g-recaptcha-response’]) && !
empty($_POST[‘g-recaptcha-response’])) {
//Below is your secret key
$secret = ‘6LfTPlUUAAAAANgJTPa67hlDAXu4ppK2FgSbSOO6’;
//get verify response data
$captchaResponse =
file_get_contents(‘https://www.google.com/recaptcha/api/sitev
erify?secret=’ . $secret . ‘&response=’ . $_POST[‘g-recaptcha-
response’]);
$responseData = json_decode($captchaResponse );
if ($responseData->success) {
//Registration form submission code
$name = !empty($_POST[‘name’]) ? $_POST[‘name’] : ”;
$email = !empty($_POST[’email’]) ? $_POST[’email’] : ”;
$password = !empty($_POST[‘pwd’]) ? $_POST[‘pwd’] : ”;
$htmlContent = “
<h1>Registration details</h1>
<p><b>Name: </b>” . $name . “</p>
<p><b>Email: </b>” . $email . “</p>
<p><b>Message: </b>” . $password . “</p>
“;
} else {
$errMsg = ‘Captcha verification failed, please try again.’;
echo “<script>alert(‘” . $errMsg . “‘);</script>”;
}
} else {
$errMsg = ‘Please click on the reCAPTCHA box.’;
echo “<script>alert(‘” . $errMsg . “‘);</script>”;
}
} else {
$errMsg = ”;
echo “<script>alert(‘Please fill data’);</script>”;
}
?>
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Google reCaptcha Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,
initial-scale=1″>
<link rel=”stylesheet”
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/b
ootstrap.min.css”>
<script
src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.
min.js”></script>
<script
src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/boo
tstrap.min.js”></script>
<script src=”https://www.google.com/recaptcha/api.js” async
defer></script>
</head>
<body>
<div class=”container”>
<?php
if (!empty($htmlContent)) {
echo $htmlContent;
} else {
echo “”;
}
?>
<h2>Registration form</h2>
<form action=”” method=”post”>
<div class=”form-group”>
<label for=”email”>Email:</label>
<input type=”email” class=”form-control” id=”email”
placeholder=”Enter email” name=”email”>
</div>
<div class=”form-group”>
<label for=”pwd”>Password:</label>
<input type=”password” class=”form-control” id=”pwd”
placeholder=”Enter password” name=”pwd”>
</div>
<div class=”form-group”>
<label for=”pwd”>Name:</label>
<input type=”text” class=”form-control” id=”name”
placeholder=”Enter Name” name=”name”>
</div>
<div class=”g-recaptcha” data-
sitekey=”6LfTPlUUAAAAAGSUt1_LqpJXQpatx7_BzTDcU9On”>
</div>
<input type=”submit” class=”btn btn-default” id=”submit”
name=”submit” value=”Submit”/>
</form>
</div>
</body>
</html>

CONCLUSION
In this article, we have learned how to integrate Google Captcha or
reCaptcha in any website’s registration form. Also, we have learned
that how to register our website for using Google’s reCaptcha. If you
have any query regarding this article, please comment in the
comment section. Thank you!

Das könnte Ihnen auch gefallen