In this post, I want to show how to integrate ReCaptcha in a Spring Boot application. This will be an important step if you have forms in your application and if those forms are publicly available on the internet. You can face a lot of spams or bots trying to fill those forms. To avoid these spams from bots, ReCaptcha is of utmost importance.
Google offers a reCaptcha service that we will integrate with Spring Boot application to stop bots from submitting the forms in our application.
Registration with Google for ReCaptcha
Google offers a reCaptcha service that developers can use in their applications. As part of this implementation, we will register our service in Google APIs so that Google can provide us credentials to use while calling its service.
We can register our site at Google Recaptcha Administration. This registration will provide us with site-key and site-secret.
Now as part of Spring boot application, we can store these credentials in application.properties file as below:
# ==================================================================================== # Google reCaptcha Settings # ==================================================================================== google.recaptcha.key.site=site-key google.recaptcha.key.secret=site-secret
We will make these properties available through a spring bean object in our application, so we can use them when we call Google Recaptcha Service.
UI changes to display ReCaptcha box
Now to display Recaptcha box on your form, we will add the following code in our templates where our public form resides. In this case, I am putting Recaptcha box in Contact Us and Sign Up pages as those are publicly available forms.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Renters Feedback</title>
<!-- other scripts and stylesheets -->
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<form method = "post" id="contactus" th:action="@{/contact}">
<!--- other code to display contact us form -->
<div class="g-recaptcha" th:attr="data-sitekey=${@captchaSettings.getSite()}"></div><br/><br/>
<span id="captchaError" class="alert alert-danger col-sm-4" style="display:none"></span>
</form>
</body>
</html>
Server-side handling of ReCaptcha
So as we have a widget on our form. When a user completes a challenge and submits the form, the request will be sent to the server containing an encoded site key and a unique string that identifies user’s challenge completion.
But on the server side, we can’t just assume and trust what the user has submitted. So we need to verify this captcha challenge by sending a request to Google API at https://www.google.com/recaptcha/api/siteverify by passing captcha response we have received.
If the verification is successful, the json response from API will contain a success parameter.
If the verification fails, then an application will throw an exception and reCaptcha library will instruct a client to create a new challenge.
One thing to understand here is that we limit how many attempts a client can make to reCaptcha challenge. The reason for this is to avoid any kind of DoS attack. Of course, this is precautionary and elementary step. We implement ReCaptchaAttemptService to block if a client tries to use the challenge for more than 4 attempts.
Demo of the complete workflow of ReCaptcha
Conclusion
In this post, we showed how we can use google reCaptcha service to integrate a reCaptcha widget in a form that is publicly available to avoid bots spams. From the security perspective, this is an important step and developers should take into account this important feature for their web applications.
References
- Recaptcha with Spring Boot Application – Recaptcha With Spring Boot Application
- Protecting Spring Boot application with Google Recaptcha – Protecting Spring Boot Application
