Implémenter reCAPTCHA v3 dans Java / Spring

introduction

Même si je cherchais sur Google, il n'y avait pas d'article pour Java, et le site officiel était un peu difficile à comprendre, alors je l'ai résumé.

Lien officiel

• Google reCAPTCHA Official
• À propos de la mise en œuvre frontale
• À propos de la mise en œuvre du backend

Lien de référence

• J'ai introduit reCAPTCHA v3 dans le formulaire de demande!
• La mise en œuvre de base est organisée de manière concise
• J'ai mis dans reCAPTCHA v3 --Il est organisé en tenant compte de la branche d'erreur, etc.

Comment s'inscrire

Tout d'abord, inscrivez-vous pour utiliser le service.

J'ai introduit reCAPTCHA v3 dans le formulaire de demande! ⇒Reportez-vous à "Comment enregistrer reCAPTCHA v3"

Méthode de mise en œuvre

Une fois inscrit, il ne vous reste plus qu'à l'implémenter.

Côté client

HTML Ajoutez ce qui suit dans la balise de formulaire. Définissez le token obtenu par JavaScript sur cette valeur et soumettez-le. Si vous utilisez Ajax, vous n'avez pas besoin d'écrire ceci en spécifiant directement token dans le paramètre Request.

hoge.html

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

Ajoutez ce qui suit à la partie lecture du script. Rendez reCAPTCHA disponible sur votre site. Remplacez la clé de site obtenue au moment de l'inscription par (clé de site).

hoge.html

<script src="'https://www.google.com/recaptcha/api.js?render=' +(Clé du site)"></script>

JavaScript Implémentez la fonction exécutée lors de l'envoi du formulaire comme suit. La valeur définie dans l'action (`` 'contact_form' 'dans ce qui suit) est stockée dans Response from reCAPTCHA, elle peut donc être utile pour l'analyse si vous définissez où elle a été exécutée sur le site.

hoge.js

$form = $(/*Obtenir le formulaire*/);
$button = $(/*Obtenez le bouton d'envoi dans le formulaire*/);

$button.click(function() {
		//Pour reCAPTCHA v3
		grecaptcha.ready(function () {
			grecaptcha.execute((Clé du site), {action: 'contact_form'}).then(function(token) {
				$('#recaptcha-response').val(token);

				//Le processus décrit dans la fonction avant d'implémenter reCAPTCHA est décrit ici.

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

Côté arrière

Controller Implémentez la méthode de destination POST comme suit. En fait, la partie logique doit être découpée dans la couche Service. Le jugement BOT (si une partie de la déclaration) sera expliqué dans la prochaine section Modèle.

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=" +(Clef secrète)+ "&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()) {
			//Décrivez le traitement lorsqu'il n'est pas jugé comme BOT
		} else {
			//Décrivez le traitement lorsqu'il est jugé comme BOT
		}
	} else {
		//Décrivez le traitement lorsque la connexion échoue à reCAPTCHA
	}
}

Model Implémentez le modèle qui stocke la réponse de l'API reCAPTCHA comme suit. J'utilise lombok qui génère automatiquement un getter et un setter. Veuillez consulter Officiel pour le contenu de la réponse.

Chose importante

Notez que la propriété success indique le succès / échec de la connexion API, pas le jugement de BOT. Dans reCAPTCHA, il est jugé par son propre programme s'il est BOT ou non en fonction de la propriété score renvoyée (0,0 ~ 1,0). Plus le «score» est proche de 1, plus la possibilité de BOT est faible, et plus elle est proche de 0, plus la possibilité de BOT est élevée. Google Official Interpreting the Score indique que le seuil initial devrait être de 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() {
    }
}

Ajout de propriétés à l'objet Form.

HogeForm.java

private String recaptchaResponse;

Si vous pouvez bien l'implémenter, vous pouvez vérifier le résultat avec la sortie du journal comme suit.

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

Impressions

Au début, je pensais que si je le jette dans l'API, il jugera s'il s'agit de BOT ou non. En fait, je devais juger par mon propre programme basé sur le «score», ce qui était un peu déroutant.