reCAPTCHA toevoegen aan formulier voor minder spam

reCAPTCHA toevoegen aan formulier om foutieve aanmeldingen tegen te gaan.
Logo Google reCAPTCHA.

Probleem:

Een aantal jaren geleden heb ik voor een bedrijf met een WordPress website een inschrijfformulier gemaakt.

Waarom maak je geen gebruik van Contact Form7 of Gravity Forms? Op het formulier staan specifieke velden en de antwoorden moeten omgezet worden naar een Excel bestand. Op deze manier kan de inschrijving snel door het bedrijf verwerkt worden. Maatwerk was hiervoor een betere oplossing.

De laatste maanden ontvangt het bedrijf steeds meer SPAM. In eerste instantie had ik een quiz vraag toegevoegd zoals je die ook wel bij andere websites tegenkomt. Dat heeft maar even gewerkt en het probleem kwam terug.

Oplossing:

Als betere oplossing heb ik reCAPTCHA voorgesteld aan het bedrijf. Iedereen kent deze dienst wel dat je stoplichten of zebrapaden aan moet klikken wanneer je apart gedrag vertoont. Een dienst die als irritant door echte mensen wordt ervaren maar wel werkt.

Ik heb Google reCAPTCHA via de volgende stappen toegevoegd. Je hebt hiervoor wel een Google Account nodig maar die je heb je in een paar minuten gemaakt. Zowel het Google Account als reCAPTCHA zijn gratis te gebruiken.

Stap 1:
Je hebt een twee tal sleutels nodig, bekend als client key en secret key. Deze kan je aanvragen via de website van reCAPTCHA. Belangrijk om te weten is dat je de secret key nooit met niemand mag delen, vandaar de naam secret.

Stap 2:
In dit stappenplan voeg je een hidden field toe aan jouw formulier. Dit is nodig voor reCAPTHA. Ik noem dit veld “controle”. Als je dit anders wilt noemen moet je dit in de volgende stappen wijzigen.

Stap 3:
Laadt het onderstaande Javascript bestand in via een script blok. Vervang JOUW_CLIENT_KEY door de sleutel die je in stap 1 hebt aangemaakt.
https://www.google.com/recaptcha/api.js?render=JOUW_CLIENT_KEY

Voeg onderstaande Javascript code toe in een script blok. Vervang JOUW_CLIENT_KEY door de sleutel die je in stap 1 hebt aangemaakt.


	grecaptcha.ready(function() {
		grecaptcha.execute('JOUW_CLIENT_KEY', {action:'validate_captcha'})
			.then(function(token) {
			document.getElementById('controle').value = token;
		});
	});

Stap 4:
Voeg onderstaand HTML hidden field toe aan het formulier binnen de <form></form> tags. Bijvoorbeeld onder de submit button.

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

Stap 5:
Voeg de volgende PHP functie toe aan jouw PHP code waar ook het formulier wordt verwerkt. Vervang JOUW_SECRET_KEY door de key uit stap 1.

function checkreCAPTCHA(string $recaptchaResponse): bool
{
	$recaptchaUrl = 'https://www.google.com/recaptcha/api/siteverify';
	$recaptcha    = file_get_contents($recaptchaUrl . '?secret=' . JOUW_SECRET_KEY . '&response=' . $recaptchaResponse);
	$recaptcha    = json_decode($recaptcha);

	// Controle op $recaptcha->success is heel belangrijk omdat die aangeeft of de controle uitgevoerd is.
	// De score geeft aan of de bezoeker een SPAMMER is of niet. Alles onder de 0.5 wordt gezien als SPAM.
	if ($recaptcha->success == true && $recaptcha->score >= 0.5) {
		return true;
	} else {
		return false;
	}
}

Voeg aan de code die het formulier verwerkt deze code toe:

if (isset($_POST['controle'])) {
	// Zorg dat deze waarde veilig is, in WordPress kan je dit doen met sanitize_text_field()
	$value = $_POST['controle'];
	if (checkreCAPTCHA($value)) {
		// reCAPTCHA test mislukt, invuller is een SPAMMER, toon foutmelding
	}
}

Door gebruik te maken van een PHP functie blijft de code die het formulier verwerkt compact. Je kan de functie zo ook op meerdere plekken aanroepen.

Stap 6:
Publiceer de wijzigingen op de server en vul ter test het formulier in om te zien of het nog juist werkt.

Hoe kan je testen of de code een SPAMMER juist afvangt?
Dit kan je het gemakkelijkste doen door deze regel “$recaptcha->score >= 0.5” aan te passen naar “$recaptcha->score < 0.5”. Vul vervolgens het formulier in en je zal direct een foutmelding krijgen. Vergeet niet om deze aanpassing weer terug te draaien anders kunnen echte bezoekers het formulier niet meer invullen.

Bron:
Adding Google reCAPTCHA v3 to a PHP form

2 reacties

Laat een reactie achter

Your email address will not be published. Required fields are marked *

Deze site gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.