How To Add Google reCAPTCHA v3 In HTML Form Based PHP/Laravel Website

  • 16-07-2022
  • 1204
  • Laravel 9
  • Haresh Chauhan

How To Add/Integrate Google reCAPTCHA v3 In HTML Form Based PHP/Laravel Website?; Hello Developers, In this post we will teach you how to integrate google reCAPTCHA v3 in your HTML form Based PHP - Laravel website. Also, I will tell you how to generate a recaptch google site key and site secret key in this tutorial.

What is reCAPTCHA?

The reCAPTCHA will protect your website from fraud and abuse without creating extra function and friction. The reCAPTCHA uses to advanced protection of your website from adaptive advanced challenges to keep malicious software and hackers and robotics engines.

The reCAPTCHA V3 services implementing from the google. This service provides by google to protect against automation and spam by adding inside the form.

This is very easy to integrate Google Recaptcha in your form and all types of input that you want to protect against robotics and automation fillup. This reCAPTCHA must be implemented from both side client and server sides.

This reCAPTCHA with the form filled will send to the server side and check with the google server with our secret key provided by them.

Google reCAPTCHA V2 v/s V3

Using Google reCAPTCHA v2 used just need to click "I am not a robot" checkbox and also can serve some images for the user to recognize that given challenge.

Google reCAPTCHA v3 runs in the background of the website and generates a score based on the user "Activity And Users Behaviour" of the higher score mostly likely a human. There is no image challenge recognized by the user and click to the checkbox. This work on the user behaviour.

OUTPUT PREVIEW : image

You can see in above image something like this you will get in your site once you integrate google Recaptcha in your site.

So let's start this tutorial by generating the key.

Generate Key

First, We will generate a site key and site secret key for this ReCaptcha integration on our site. Both keys are must be needed else your google Recaptcha will not able to run in your form. Just click on the here given link and follow the next step to generate your key credential. Genrate Recaptch Site Key

Once, you click on the above-given link you will see v3 Admin Console menu in the header section as per in image given.

image

There you can see the PLUS sign at the top right of the site, As in the below image given. Click on this button.

image

After you clicked on the plus button now you can see some details are asking for the generated Recaptcha label, google Recaptcha version, and domain name. Just fill in all the details and submit.

image

Now, You can see your site key and site secret key after submitted. Just copy and paste it into your notepad.

image

How To Add Google reCAPTCHA v2 In HTML Form Based PHP/Laravel Website

Integration In Form

First, We will make an HTML-based form and then will add a button tag and this in this button tag we will pass some attribute. First, we will pass the class attribute and will add a class "g-recaptcha" after it the second attribute will add "data-sitekey" in this attribute, we will pass the site given which is provided by Google then after "data-callback" attribute add of the submit form.

Then we will import a script for the google Recaptcha you can see it below example given. After it, all are ready from the client side.

On the server side, we will send a request to the Google server to validate the Recaptcha te request come from the client side. If the request status will return true and the repatch is validated.

index.php 
<?php
if(isset($_POST['submit'])){
    
  $recaptcha_secret = "{SITE SECRATE KEY PUT HERE}";
  $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret."&response=".$_POST['g-recaptcha-response']);
  $response = json_decode($response, true);
  
  if($response["success"] === true){

    echo "Form Submit Successfully.";

  }else{

    echo "You are a robot";
  }
}
?>
  
<html>
    <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js"></script>
    </head>
    <body>
    <form action="?" method="POST">
        <label>Name :<input type="text"></label>
        <label>Email :<input type="text"></label>
        <label>Address :<input type="text"></label>
        <p></p>
        <!-- CAPTCH CODE BUTTON -->
          <button class="g-recaptcha" 
            data-sitekey="{SITE KEY PUT HERE}" 
            data-callback='onSubmit' 
        data-action='submit'>Submit</button>
    </form>
    </body>
</html>

This is a simple HTML form with integration reCAPTCHA client side and PHP server side.

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :