Implement reCAPTCHA v3 in Java / Spring

Introduction

Even if I googled, there was no article for Java, and the official website was a little difficult to understand, so I summarized it.

Official link

-Google reCAPTCHA Official -About front-end implementation --About backend implementation

Reference link

-I introduced reCAPTCHA v3 to the inquiry form! --The basic implementation is concisely organized -I put in reCAPTCHA v3 --It is organized in consideration of error branching etc.

How to register

First, register to use the service.

I introduced reCAPTCHA v3 to the inquiry form! ⇒Refer to "How to register reCAPTCHA v3"

Implementation method

Once registered, all you have to do is implement it.

Client side

HTML Add the following in the form tag. Set the token obtained by JavaScript to this value and submit. If you use Ajax, you don't need this description by directly specifying token in Request parameter.

hoge.html

<input type="hidden" name="recaptchaResponse" id="recaptchaResponse">

Add the following to the script reading part. Make reCAPTCHA available on your site. Substitute the site key obtained at the time of registration for (site key).

hoge.html

<script src="'https://www.google.com/recaptcha/api.js?render=' +(Site key)"></script>

JavaScript Implement the function executed at form submit as follows. The value set in action ('contact_form' in the following) is stored in Response from reCAPTCHA, so it may be useful for analysis if you set where it was executed on the site.

hoge.js

$form = $(/*Get form*/);
$button = $(/*Get the submit button in the form*/);

$button.click(function() {
		//For reCAPTCHA v3
		grecaptcha.ready(function () {
			grecaptcha.execute((Site key), {action: 'contact_form'}).then(function(token) {
				$('#recaptcha-response').val(token);

				//The process described in the function before reCAPTCHA implementation is described here

				$form.submit();
			});
		});
});

Back end side

Controller Implement the POST destination method as follows. Actually, the logic part should be cut out to the Service layer. The BOT judgment (if statement part) will be explained in the next Model section.

HogeController.java

@RequestMapping(value = "/hoge", method = RequestMethod.POST)
public String hogePost(
		@Valid @ModelAttribute("hogeForm") HogeForm hogeForm,
		BindingResult bindingResult,
		HttpServletRequest request, SitePreference sitePreference, Model model) {

	String url = "https://www.google.com/recaptcha/api/siteverify?secret=" +(Secret key)+ "&response=" + hogeForm.getRecaptchaResponse;
	RestTemplate restTemplate = new RestTemplate();
	RecaptchaResult result = restTemplate.getForObject(url, RecaptchaResult.class);

	log.info("reCAPTCHA result: " + result.toString());

	if (result.isSuccess()) {
		if ( 0.5 <= result.getScore()) {
			//Describe the processing when it is not judged as BOT
		} else {
			//Describe the processing when it is judged as BOT
		}
	} else {
		//Describe the processing when the connection fails to reCAPTCHA
	}
}

Model Implement Model that stores Response of reCAPTCHA API as follows. I am using lombok which automatically generates getters and setters. Please refer to Official for the contents of Response.

Important thing

Note that the success property indicates the success / failure of the API connection, not the judgment of whether it is a BOT or not. In reCAPTCHA, the program determines whether it is a BOT based on the returned score property (0.0 to 1.0). The closer the score is to 1, the lower the possibility of BOT, and the closer it is to 0, the higher the possibility of BOT. Google Official Interpreting the score says that the initial threshold should be 0.5.

RecaptchaResult.java

package com.croooober.v1.cr_www.model.api;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import lombok.Data;

@Data
@JsonIgnoreProperties(ignoreUnknown = true)
public class RecaptchaResult {
    private boolean success;
    private String challenge_ts;
    private String hostname;
    private float score;
    private String action;

    public RecaptchaResult() {
    }
}

Also added properties to the Form object.

HogeForm.java

private String recaptchaResponse;

If you can implement it well, you can check the result with log output as follows.

reCAPTCHA result: RecaptchaResult(success=true, challenge_ts=2020-01-08T04:19:27Z, hostname=hoge.com, score=0.9, action=contact_form)

Impressions

At first, I thought that if I throw it in the API, it will judge whether it is a BOT or not. Actually, I had to judge by my own program based on score, which was a little confusing.