How to Integrate and Validate Google reCAPTCHA v3 with the Batoi RAD Platform

Back to Help Articles
Google reCAPTCHA v3 offers robust protection against spam and malicious activities, elevating the security of your website. However, to make the most out of it, seamless integration is key. In this comprehensive tutorial, we guide you through a step-by-step process to integrate and validate Google reCAPTCHA v3 within your application developed using the Batoi RAD Platform.

Requirements

To get started, you should obtain your reCAPTCHA v3 site key and secret key. If you haven't done so yet, you can follow the steps outlined in our blog on "Understand and Use Google reCAPTCHA"

Integrate and Validate Google reCAPTCHA v3

Step 1: Create Application Parameters

Log in to your Batoi RAD platform and create two application parameters, V3_SITE_KEY and V3_SECRET_KEY, to securely store your reCAPTCHA v3 site key and secret key, respectively. Assign the values for these parameters that you obtained. Ensure that the V3_SITE_KEY parameter holds your reCAPTCHA v3 site key and the V3_SECRET_KEY parameter contains your reCAPTCHA v3 secret key.

Figure 1
Figure 1: The interface of application parameters within the Batoi RAD Platform

Step 2: Add reCAPTCHA in Your Batoi RAD Application

Now, let's add reCAPTCHA to your Batoi RAD application and check if it's working correctly on the server side.

The Batoi RAD platform offers a coding interface with distinct sections: Route Load Code, Pagepart Code, Prepart Code, and Postpart Code.

Pagepart Code

In the Pagepart section of your Batoi RAD application, create a form that you intend to protect with reCAPTCHA. Give this form a unique ID, such as "contactForm."

Postpart Code

In the Postpart section of your Batoi RAD application, include the following JavaScript code:

<script type="text/javascript"
src='https://www.google.com/recaptcha/api.js?render=<?php print $this->runData['config']['app']['V3_SITE_KEY'];?>'></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#contactForm').submit(function(e) {
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute('<?php print $this->runData['config']['app']['V3_SITE_KEY'];?>', { action: 'submit' }).then(function(token) {
$('#contactForm').prepend('<input type="hidden" name="token" value="' + token + '">');
$('#contactForm').prepend('<input type="hidden" name="action" value="submit">');
$('#contactForm').unbind('submit').submit();
});
});
});
</script>

In the above code:

  • The reCAPTCHA API script is dynamically loaded with the reCAPTCHA v3 site key.
  • jQuery is used to capture the form submission and prevent the default form submission.
  • Using reCAPTCHA's grecaptcha.execute method, a reCAPTCHA token is obtained after the "submit" action.
  • Two hidden form fields have been added. One for the reCAPTCHA token and another to identify the action as "submit."
  • Finally, the form submission is initiated.
Route Load Code

Within the Route Load Code section of your Batoi RAD platform, you'll need to include PHP code to validate the form. This code will handle the reCAPTCHA verification.

<?php
if($this->runData['request']->method == 'POST')
{
$token = $_POST['token'];
$action = $_POST['action'];

// Call cURL to perform a POST request

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('secret' => $this->runData['config']['app']['V3_SECRET_KEY'], 'response' => $token)));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
$arrResponse = json_decode($response, true);
if($arrResponse["success"] == '1' && $arrResponse["action"] == $action && $arrResponse["score"] >= 0.5)
{
$this->runData['route']['alert'] = 'success';
$this->runData['route']['alert_message'] = 'Captcha successfully verified';
}
else
{
$this->runData['route']['alert'] = 'danger';
$this->runData['route']['alert_message'] = 'Captcha verification failed';
}
}
?>

In the above PHP code:

  • The HTTP request method is verified as POST, indicating that the form has been submitted.
  • The reCAPTCHA token and action are extracted from the form submission.
  • A POST request is sent to the Google reCAPTCHA verification endpoint using cURL, with the secret key and the obtained token.
  • The response is received and decoded, and it is then validated based on the success, action, and score criteria.
  • An alert message is set to inform the user about the success or failure of the reCAPTCHA validation, depending on the verification result.
Figure 2
Figure 2: A code edit feature of microservice routes in the Batoi RAD Platform

Conclusion

Congratulations! With these steps, you have successfully integrated and validated Google reCAPTCHA v3 within your application developed using the Batoi RAD Platform. This enhances the security of your forms while ensuring a smoother user experience.

Back to Help Articles