Google New Recaptcha In PHP

By : PHPErrorCode August 7, 2017 537 Views php

in this tutorial we are going to give you very simple example of how to add google reCAPTCHA code in your website.

In this post, we are going to learn about Google new recaptcha API. This protects your website for spammers and robots, in this post I had implemented new reCaptch API demo with HTML Signup Form using PHP. I like the new design it is clean and impressive, hope you will like it. Please take a look at the below example step by step.

What is reCAPTCHA?

reCAPTCHA is a free service from Google that helps protect websites from spam and abuse. A “CAPTCHA” is a test to tell human and bots apart.

Step 1: Get reCAPTCHA API keys:

first require to generate site key and secret key. If you don't have site key and secret key then you can create from here. First click on this link : https://www.google.com/recaptcha/admin

Google new recaptcha API

after sucessfully register you can get site key and secret key from Google like bellow preview.

Google new recaptcha API seting

Step 2: After that, Create a Database :

  • Open phpmyadmin
  • Create database as "tutorial"
  • Click create table and name it as "user"
CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `user_name` varchar(25) NOT NULL,
  `email` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step 2:Connect a database using MySQL:for config.php

In this step we are going to connect the database with our project.

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "tutorial";

  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);

  // Check connection
  if ($conn->connect_error) 
  {
      die("Connection failed: " . $conn->connect_error);
  }

Step 3: HTML Code in Signup Form

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

Then Just simply change the Secret-Key in data-sitekey attribute in Signup.php file. It will display the captcha component on your form.

Signup.php

<!DOCTYPE html>
<html>
<head>
  <title>Recaptcha</title>
  <link rel="stylesheet" type="text/css" href="custom.css">
  <script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
  <?php session_start();
    if (isset($_SESSION['msg'])) 
    {
      echo '<p class="msg">'.$_SESSION['msg'].'</p>';
    } 
  ?>
  <h2>Signup Form</h2>
  <form action="action_page.php" method="post" class="form">
    <div class="container">
      <label><b>Name</b></label>
      <input type="text" placeholder="Enter Nmae" name="name" required>

      <label><b>Email</b></label>
      <input type="text" placeholder="Enter Email" name="email" required>

      <label><b>Password</b></label>
      <input type="password" placeholder="Enter password" name="password" required>

      <div class="g-recaptcha" data-sitekey="6LcuCSwUAAAAAJweYKce1qLghssXk2jRk5gDYhh2"></div>

      <div class="clearfix">
        <button type="button" class="cancelbtn">Cancel</button>
        <button type="submit" class="signupbtn">Sign Up</button>
      </div>
    </div>
  </form>
</body>
</html>

Step 3: Add Css in your custom.css

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
.cancelbtn {
    padding: 14px 20px;
    background-color: #f44336;
}
.cancelbtn,.signupbtn {
    float: left;
    width: 50%;
}
.container {
    padding: 16px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
.form{
    border:1px solid #ccc; width: 50%;
}
.msg{
    background: gray;
    padding: 10px;
    color: #fff;
}
@media screen and (max-width: 300px) {
    .cancelbtn, .signupbtn {
       width: 100%;
    }
}

Step 4:Now create another file named action_page.php and paste bellow code in that file.

This file will check weather you are robot or not, If robot, then redirects signup page, otherwise make you proceed

<?php
require_once('config.php');
session_start();

//your site secret key
$secret = '6LcuCSwUAAAAAEPl2fomdd0roFcNwLu_eWJ39CNO';

//get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST["g-recaptcha-response"]);

$responseData = json_decode($verifyResponse);

if($responseData->success)
{
    $name = $_POST['name'];
    $email = $_POST['email'];

    //Encrypt hash passwords
    $options = ['cost' => 12];
    $password = password_hash($_POST['password'], PASSWORD_DEFAULT, $options);

    if($data=$conn->prepare("INSERT INTO user (user_name,email,password) VALUES(?,?,?)"))
    {

	// Bind the variables to the parameter as strings. 
	$data->bind_param("sss", $name,$email,$password);

	// Execute the prepared statement.
	$data->execute();

	// Close the prepared statement.
	$data->close();

	$_SESSION['msg']="Add Data Seccess...";
    }
    else
    {
	$_SESSION['msg']="Dada not protected please try again...";
    }
}
else
{
    $_SESSION['msg']="You are a robot...";
}
header("location: Signup.php");
?>

That's it! The reCAPTCHA code is ready to post in your signup or signin form. Just copy the code and paste in appropriate file. If you need any help, please comment in comment box.