codervlogortex

Integrate Invisible reCAPTCHA v3 with HTML and PHP

Step by step tutorial with sample code on how to integrate Google invisible reCAPTCHA v3 to your HTML forms and verifying the response with PHP.

What is an Invisible reCAPTCHA?

Invisible reCAPTCHA, developed by Google, is an anti-spam system that helps websites make sure that a user is a real person and not a bot or automated script without making the user solve puzzles or click on checkboxes.

Checkout How to Integrate Google reCAPTCHA v2 with HTML and PHP?

reCAPTCHA V3 operates in the background without showing any badge or widget and analyzes user behavior on a website, including mouse movements, time spent on a page, and other similar variables.

Based on this analysis, the system can tell whether the user is most likely a person or a robot. If the system is sure that the user is human, they will be able to do what they want on the website (like submit a form or log in) without having to prove it again.

If the system isn't sure that the user is human, they may have to do a more traditional reCAPTCHA puzzle or click on checkboxes.

How to Integrate reCAPTCHA V3 with HTML and PHP?

Step 1: Add a New Site to reCAPTCHA Admin Console

You need to register a new site in the Google reCAPTCHA console by visiting this link https://www.google.com/recaptcha/admin/create.

  • Give your site's name in the Label field.
  • Choose reCAPTCHA v3 if its not already selected.
  • Add your website url under the "Domains" section; you can add multiple domains by hitting enter.

Register new site in reCAPTCHA

  • Check the Terms & Conditions checkbox.
  • Leave the Send alerts to owners checkbox checked which will report you if they find any annomalies.
  • Hit Submit.

Register new site in reCAPTCHA

Step 2: Copy the Keys

You will see SITE KEY and SECRET KEY generated for you once your site has been added; be sure to copy both before moving to the Analytics page or closing the window.

reCAPTCHA keys

Step 3: Client Side Integration

Copy and paste the following sample code into your HTML site, making sure to replace the SITEKEY.

  • Make sure to add the data-sitekey, data-callback, and data-action attributes to your submit button.
  • Add the reCAPTCHA API script at the bottom of the page.
  • Add an onSubmit function that gets triggered when the user submits the form.
  • Once the onSubmit function gets triggered, you can submit the form using javascript or you can trigger an HTTP request using AJAX.
<form action="action.php" method="POST" id="myform">
    <div>
        <input type="email" name="email" placeholder="Email" required>
    </div>
    <div>
    <button class="g-recaptcha"
        data-sitekey="6Lc1PxElAAAAABQbBMhv0U5JnHrPy7lQayGK06vi"
        data-callback='onSubmit'
        data-action='submit'>Submit</button>
    </div>
</form>

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

<script>
   function onSubmit(token) {
    //you can submit the form or send an ajax request
    document.getElementById("myform").submit();
   }
 </script>

Step 4: Server Side Integration

The CAPTCHA value will be sent in a POST variable named "g-recaptcha-response".

We will have to verify its value with the reCAPTCHA API using PHP curl. Make sure PHP Curl is enabled on your server.

If you get a "success" response, go ahead and do the next steps. If you don't, give the user an "Invalid CAPTCHA" error.

<?php
    function reCaptcha($recaptcha){
        $secret = "6Lc1PxElAAAAALss17mz0Cz_eoVg-LMohwU67ddN";
        $ip = $_SERVER['REMOTE_ADDR'];

        $postvars = array("secret"=>$secret, "response"=>$recaptcha, "remoteip"=>$ip);
        $url = "https://www.google.com/recaptcha/api/siteverify";

        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_TIMEOUT, 10);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $postvars);
        $data = curl_exec($ch);
        curl_close($ch);

        return json_decode($data, true);
    }

    $recaptcha = $_POST['g-recaptcha-response'];

    $res = reCaptcha($recaptcha);

    if($res['success']){
        $email = $_POST['email'];
        echo "Success ".$email;
    }
    else{
        echo "CAPTCHA Failed";
    }
?>

Conclusion

This strategy aims to improve the user experience and decrease friction while still offering a strong defence against automated attacks.

This can make things easier and less frustrating for real users who might otherwise have to go through difficult verification processes.

Related Posts