in Java

Login by captcha and authenticate with JSON Web Token

We use a login to secure our application and restrict its access to a certain group of users. But what if everybody should be allowed to use our application if he can prove he’s human? Well, we would use a captcha.

The following example shows how we can use Google’s ReCaptcha for an anonymous login and authentication with JSON Web Token.

Add Google’s ReCaptcha to AngularJS

First, we need to add Google’s ReCaptcha to our AngularJS application. In order to use ReCaptcha, we must register our web site on https://www.google.com/recaptcha. In addition to our domain, we can also register localhost for our local development environment. By registering our web site, we will receive a public and a private key. The public key is used in the HTML below, the private key is used in our backend to verify the captcha later on.

Component

We encapsulate the captcha in an AngularJS component:

Template

We embed the captcha on our HTML by adding the ReCaptcha JavaScript library and a placeholder div which contains a certain class name and our public key. The captcha will be injected to this div.

Right under the div we add our login button.

Controller

Our controller provides a function to get a new token from the backend. However, the user must solve the captcha for this. Otherwise the backend will reject the request.

Add Google’s ReCaptcha to Spring Boot

After we added the captcha to our frontend, we must verify it in our backend. To do so, we use a Spring Boot starter for Google’s ReCaptcha:

We must add our ReCaptcha private key to the application.properties:

With this library, we can easily validate the captcha in the backend. If the captcha is invalid, we throw an exception. Otherwise, we return an authentication token to the user – this is the login.

JSON Web Token

So let’s take a look at the token. A very simple way to implement an authentication token is JSON Web Tokens. The integration with Spring Boot and AngularJS is very good.

How JWT works

JWT is based on a private key encryption. The user will get an encrypted token which contains his user name and must send this token with every request to the backend. If the token is invalid or missing, the request is denied. Since the token is send with every request, it’s stateless!

Creating a token

To create an JWT we use another library (JJWT):

Creating and verifying a token becomes very easy:

By the way, the token looks like this:

Securing our APIs

We are almost done! We have added a captcha which verifies that the user is a human. If so, we create a token and save it in our AngularJS application. The last thing we need to do, is to check the token when our API are called:

Done!

Note

Note that this post mixes two completely different things – captchas and JSON Web Tokens. You can use a captcha without JSON Web Tokens (or any other form of authentication) and you can use JSON Web Tokens without a captcha. However, if your application has a lot of POST calls which are not secured behind a login context, this approach might help to increase security (by using a captcha) and still provide a good user experience (with just a single captcha for the whole application).

Best regards,
Thomas

More

Write a Comment

Comment

  1. i’m new using springboot java. i still didn’t get it. do you have some basic tutorial to make springboot rest for integrating recapthca?

    • To integrate ReCaptcha, you need two things:

      1. Some frontend code to display the captcha and evaluate it.
      2. Some backend code to check the captcha send by the frontend.

      Are you working with AngularJS? If so, you can just use the code shown above and leave out the JWT stuff:

      The same goes for the backend:

      That’s enough to check the captcha in the frontend and backend.