[JQUERY + PHP] Apply Recaptcha 2 On Your Website

[JQUERY + PHP] Use Recaptcha 2 On Your Website

In this tutorial, I want to show you how to apply Recaptcha 2 on your website step by step.

I. CREATE SIMPLE SIGN IN FORM

Code below is a simple sign in form using bootstrap 4 or you can use Materialize if you want. But I think bootstrap is the most popular framework now.

We have two fields (Username, Password) and a Submit Button here

<form>
  <div class="form-group">
     <label>Username</label>
     <input class="form-control username" type="text"></input>
  </div>
   <div class="form-group">
      <label>Password</label>
      <input class="form-control password" type="password"></input>
   </div>
   <input class="btn btn-primary">Sign In</input>
</form>

II. ADD RECAPTCHA TO OUR FORM

Step 1 : Add recaptcha 2 script to our template

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

Step 2 : Add recaptcha field to our form
- Get captcha field template

<div class="g-recaptcha" data-sitekey="YOUR_KEY"></div> ---> you need to replace "YOUR_KEY" text to our recaptcha key

- Add it into our form

<form>
  <div class="form-group">
     <label>Username</label>
     <input class="form-control username" type="text"></input>
  </div>
   <div class="form-group">
      <label>Password</label>
      <input class="form-control password" type="password"></input>
   </div>
   <div class="form-group">
       <div class="g-recaptcha" data-sitekey="YOUR_KEY"></div>
   </div>
   <input class="btn-signin btn btn-primary">Sign In</input>
</form>

III. HANDLE SIGN IN ACTION

Step 1 : Add Click Event For Sign In Button

- Here is just simple jQuery selector and apply click event for sign in button.

$('.btn-signin').on('click', function(){ });

Step 2 : Get Form Values

- Call value function to get real text value. Otherwise, you just get jQuery object array

var username = $('.username').val();
var password = $('.password').val();

Step 3 : Post It Into Our Server

$.ajax({
  type: 'POST',
  url: 'Signin.php',
  data: {
     username: username,
     password: password,
     captcha: grecaptcha.getResponse() -> important !!!! -> Captcha information
  }
})

Step 4 : Verify In Server

Here is my sample code for server validation

- Get data values (Username, Password, Captcha) from Post Request.

- Create captcha validation url.

- Make a request and get validation result.

<?php
  $secret = 'YOUR_SECRET'; ---> Replace Your Secret Key Here.
  $response = $_POST['captcha'] ---> Get Captcha.
  $username = stripslashes($_POST['username ']) ---> Get Username;
  $password= stripslashes($_POST['password']) ---> Get Password;

  $urlVerify= file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret= {$secret}&response={$response}') ---> Request to google captcha validation and get captcha result;

  $result=json_decode($urlVerify) ---> Decode result to JSON object;
  if ($result->success==true) {
        // HANDLE SUCCESS HERE
   }
?>

Then, you have it now.
Feel free to comment any questions and I'll reply you as soon as possible.... :D