Open In App

Google reCAPTCHA Integration in PHP

Last Updated : 04 Apr, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to discuss how to integrate Google reCAPTCHA v2 in PHP.

Approach:

  • Register your site at Google reCAPTCHA
  • Submit HTML form
  • Get response key at server side
  • Re-verify the key and give response to user end.

Step 1: Register your site at Google reCAPTCHA — Register your website at Google reCAPTCHA platform to get keys i.e. Site key and Secret key needed to code the HTML form.

Click here to go to Google reCAPTCHA website. 

Demo to Register site at Google reCAPTCHA

 

Step 2: Creating Google reCAPTCHA form in HTML — Here, we are going to create a simple HTML form with action as action.php, one input field, and a button. Meanwhile, we need to add Google reCAPTCHA CDN link in our HTML document and a div tag in the form to get reCAPTCHA in the HTML document.

CDN Link: <script src=”https://www.google.com/recaptcha/api.js” async defer></script>

Div Tag: <div class=”g-recaptcha” data-sitekey=”your_site_key”></div> 

Note: You need to replace “your_site_key” with your Site Key.

Example: 

index.html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <!-- CSS file -->
    <link rel="stylesheet" href="style.css">
  
    <!-- Google reCAPTCHA CDN -->
    <script src=
        "https://www.google.com/recaptcha/api.js" async defer>
    </script>
</head>
  
<body>
    <div class="container">
        <h1>Google reCAPTCHA</h1>
  
        <!-- HTML Form -->
        <form action="action.php" method="post">
            <input type="text" name="name" id="name" 
                placeholder="Enter Name" required>
            <br>
  
            <!-- div to show reCAPTCHA -->
            <div class="g-recaptcha" 
                data-sitekey="your_site_key">
            </div>
            <br>
  
            <button type="submit" name="submit_btn">
                Submit
            </button>
        </form>
    </div>
</body>
  
</html>


style.css




.container {
    border: 1px solid rgb(73, 72, 72);
    border-radius: 10px;
    margin: auto;
    padding: 10px;
    text-align: center;
}
    
h1 {
    margin-top: 10px;
}
    
input[type="text"] {
    padding: 10px;
    border-radius: 5px;
    margin: 10px;
    font-family: "Times New Roman", Times, serif;
    font-size: larger;
}
    
button {
    border-radius: 5px;
    padding: 10px;
    color: #fff;
    background-color: #167deb;
    border-color: #0062cc;
    font-weight: bolder;
    cursor: pointer;
}
    
button:hover {
    text-decoration: none;
    background-color: #0069d9;
    border-color: #0062cc;
}
    
.g-recaptcha {
    margin-left: 513px;
}


Step 3: PHP Back end — We have successfully submitted the HTML form, now it’s time to code PHP back-end. After the submission of form, at the server-side, we are checking that the valid form is submitted or not by using the “isset()” function. After the validation, we fetched the name in $name variable and Google recaptcha response in $recaptcha variable.

Code snippet:

PHP




<?php
    
// Checking valid form is submit or not
if (isset($_POST['submit_btn'])) {
    
    // Storing name in $name variable
    $name = $_POST['name'];
    
    // Storing google recaptcha response
    // in $recaptcha variable
    $recaptcha = $_POST['g-recaptcha-response'];
}
?>


Step 4: Verify the captcha – In order to verify the captcha, we need to make a post request to the following URL.

  • URL: https://www.google.com/recaptcha/api/siteverify?secret=<secret_key>&response=<response_key>
  • secret_key: This key you will get from Google console i.e. Secret Key.
  • response_key: This key comes from the client-side when a user submits the form.
  • g-recaptcha-response is the name of response key that browser will generate upon form submit. If its blank or null means user has not selected the captcha, so return the error.
  • Your need to replace “your_secret_key” with your Secret Key.

action.php




<?php
    
// Checking valid form is submitted or not
if (isset($_POST['submit_btn'])) {
      
    // Storing name in $name variable
    $name = $_POST['name'];
    
    // Storing google recaptcha response
    // in $recaptcha variable
    $recaptcha = $_POST['g-recaptcha-response'];
  
    // Put secret key here, which we get
    // from google console
    $secret_key = 'your_secret_key';
  
    // Hitting request to the URL, Google will
    // respond with success or error scenario
          . $secret_key . '&response=' . $recaptcha;
  
    // Making request to verify captcha
    $response = file_get_contents($url);
  
    // Response return by google is in
    // JSON format, so we have to parse
    // that json
    $response = json_decode($response);
  
    // Checking, if response is true or not
    if ($response->success == true) {
        echo '<script>alert("Google reCAPTACHA verified")</script>';
    } else {
        echo '<script>alert("Error in Google reCAPTACHA")</script>';
    }
}
  
?>


Output: 



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads