hCaptcha integration tutorial

In this post, I will explain to you how we can integrate hCaptcha which was the best alternative to Google reCaptcha. Captcha code prevents your website from unusual traffic which can crash your website.

What is Captcha?

Captcha (Completely Automated Public Turing test to tell Computers and Humans Apart). In simple words, captcha helps us to identify whether the user is real or a robot.

What is hCAPTCHA?

hCaptcha is a free service that helps us to prevent our website from spam and abuse. hCaptcha protects user privacy and also give a reward to the website. It is a drop-in replacement for reCAPTCHA: you can switch within minutes.

Integration hCaptcha in PHP

To integration hCaptcha in your PHP website you need to create an account in hCaptcha and add your site there, I will explain complete step by step integration below.

Step 1. Go to hCaptcha and create an account.

Step 2. Now you need to add your website on click on the New Site button.

hCaptcha integration

Step 3. Add your website or subdomain where you want to show Captcha. You also set your hCaptcha difficulty here.

Step 4. Now once you save your site you have your SiteKey which we use to display hCaptcha on your website.

integration of hCaptcha

Step 5. To add captcha in the website you need to add below javascript file inside <head> tag

 <script src='https://www.hCaptcha.com/1/api.js' async defer></script>

Now you can add below div where you want to show hCaptcha.

<div class="h-captcha" data-sitekey="3aed0eb9-3e30-445a-ade0-59e224da2f8d"></div>

Here is the complete code of integration.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src='https://www.hCaptcha.com/1/api.js' async defer></script>
</head>
<body>
    <div class="container">
        <h1 class="mt-5 text-center">hCaptcha demo for PHP</h1>

        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4">
            <form method="post" action="verify.php">
                <div class="form-group">
                    <label for="name">First Name</label>
                    <input type="text" class="form-control" id="name" name="name">
                </div>
                <div class="form-group">
                    <label for="lastname">Last Name</label>
                    <input type="text" class="form-control" id="lastname" name="last_name">
                </div>
                <div class="form-group form-check">
                    <div class="h-captcha" data-sitekey="3aed0eb9-3e30-445a-ade0-59e224da2f8d"></div>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
            </div>
            <div class="col-md-4"></div>
        </div>
    </div>
</body>
</html>

Step 6. Now to add serverside verification you need a secret which you get from hCaptcha website under the setting tab. Add the below code to verify the captcha result.

<?php
if(isset($_POST['name'])){
    if(isset($_POST['h-captcha-response']) && !empty($_POST['h-captcha-response'])){
        $secret = "<your_secret>";
        $remote_address = $_SERVER['REMOTE_ADDR'];
        $verify_url = "https://hcaptcha.com/siteverify?secret=".$secret."&response=".$_POST['h-captcha-response']."&remoteip=".$remote_address;

        $response = file_get_contents($verify_url);
        $responseData = json_decode($response);

        if($responseData->success){
            echo "Next process"
        }else{
            echo "error validating captcha";
        }
    }else{
        echo "Please fill all fields <a href='https://demo.trinitytuts.com/hCaptcha/'>back</a>";
    }
}

that it. I hope this post helps you to integrate hCaptcha on your website you can try the live demo from the below link.

Live demo of hCaptcha

Please don’t forget to subscribe to my youtube channel (link above) and like our Facebook page.