Google New reCaptcha using PHP Codeigniter

Google New reCaptcha using PHP Codeigniter

By Yashwant Chavan, Views 24059, Date 05-Dec-2014

In this article we are going to learn about Google new recaptcha API. Google has simplified the classic CAPTCHA process to protect your website from spam and abuse. Here I am going to use PHP codeigniter to connect with Google captcha API. So let start with with step by step guide.

tags google-recaptcha recaptcha php php-codeigniter

google new reCaptcha example demo

Tools and Technologies

The very first step is to get the all required software`s and technologies. Once we have Php and XAMPP installed, we can start creating a simple php codeigniter application. This time I am using Php codeigniter version 2.2 which is bit different with earlier version of codeigniter 1.7

  1. Php Codeigniter 2.2
  2. XAMPP / Php 5.2.3
  3. Mysql 5.0.4
Codeigniter google recaptcha eclipse project setup

Codeigniter Base Url Configuration

$config['base_url'] = "http://localhost/codeigniterexamples";

Codeigniter route Configuration

I have defined some routing rules for different URLS in routes.php file, which is located under directory application/config/

$route['default_controller'] = "user";
$route['404_override'] = '';

$route['login'] = "/user/login";

reCaptcha Key

Lets create the Google new reCaptcha key for your application. Closely follow all the steps to get the reCaptcha Key. No need to create separate key for each domain, You can use the same keys for multiple domains also.

get the Google new reCaptcha key

Google Site and Secret Key

Once you are done with key creation, you are ready to use it in your business logic, which helps you to protect your website from spam and abuse.

google captcha site and secret key

login.php

Lets create login.php file under folder name application/views. Here we are not concentrating on login functionality , we will focus on reCaptcha logic. If you are interested in Login functionality then refer my another article, which will walk you through in details.

Biggest advantage of Google new reCAPTCHA is easy plug-in in your code, Just simply add the below line in your code along with your Google site key. It will display the captcha component on your form.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="<?= base_url();?>css/bootstrap.css" rel="stylesheet">
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <style>
     .error{
      color:red;
     }
    </style>
</head>    
<body>
 <div class="container">
     <div class="row">
         <div class="col-md-6">
             <div class="row">
                 <div class="col-md-8">
                     <h3>Login In</h3>
                     <div class="error"><strong><?=$this->session->flashdata('flashSuccess')?></strong></div>
                  <form method="post" action="/index.php/user/signin">                                             
                      <div class="form-group">                       
                       <label for="userName">Username</label> <input type="text" class="form-control" id="userName" name="userName" value="">                                              
       </div>       
       <div class="form-group">
        <label for="password"> Password </label> <input type="password" class="form-control" id="password" name="password" value="">               
       </div>
       <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>                   
                   </br>
                   <button class="btn btn-success" type="submit">Login</button>      
      </form>
     </div>
             </div>
         </div>               
     </div>
 </div>        
</body>
</html>

User Controller (user.php)

Lets creates the Controller class called User under directory name application/controllers. Here I have used curl library to connect with google captcha API to verify from abusive activities on your site.

You can load the curl $this->load->library('curl'); library programmatically in your class constructor or you can configure it into autoload.php config file.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class User extends CI_Controller{

 public function __construct(){
  parent::__construct();
  $this->load->library('curl'); 
  $this->load->library('session');
 }

 public function index(){
  $this->login();
 }

 public function login(){
  $this->load->view('login');
 }

 function signin(){

  $userName = trim($this->input->post('userName'));
  $password = trim($this->input->post('password'));
  
  $recaptchaResponse = trim($this->input->post('g-recaptcha-response'));
  
  $userIp=$this->input->ip_address();
    
  $secret='ENTER_YOUR_KEY';
  
  $url="https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response;=".$recaptchaResponse."&remoteip;=".$userIp;
  
  $response = $this->curl->simple_get($url);
  $status= json_decode($response, true);
  
  if($status['success']){     
   $this->session->set_flashdata('flashSuccess', 'Google Recaptcha Successful');
  }else{
   $this->session->set_flashdata('flashSuccess', 'Sorry Google Recaptcha Unsuccessful!!');
  }
  redirect(base_url());
 }
}

Run

Enter the url http://localhost/codeigniterexamples in your browser, It will display the login page with captcha component

login screen with google new reCaptcha

Just deal with captcha component and enter respected the verification code.

Validate google new reCaptcha

Display the respected error messages on success and failure of captcha.

login page with google recaptcha successful
1 Comments
Avatar

nandakishore

ERROR for site owner: Invalid site key

Yashwant

Yashwant

Hi there! I am founder of technicalkeeda.com and programming enthusiast. My skills includes Java,J2EE, Spring Framework, Nodejs, PHP and lot more. If you have any idea that you would want me to develop? Lets connect: yashwantchavan[at][gmail.com]