CAPTCHA is een test die controleert wanneer een mens of computersysteem acties uitvoert. Hiervoor zijn meerdere manieren zoals het invoeren van een stuk tekst, klikken op plaatjes, het vinken van een vakje of onzichtbare checks. Er zijn verschillende soorten CAPTCHA waarvan de bekendste CAPTCHA, reCAPTCHA en hCaptcha zijn. Deze link geeft meer informatie over reCAPTCHA.
CAPTCHA wordt gebruikt om geautomatiseerde (spam)bots te blokkeren, zonder dat legitieme bezoekers van de website hier hinder van ondervinden. Bij gebruik van CAPTCHA is misbruik van (contact)formulieren en aanmeldingpagina's grotendeels te voorkomen. Geen enkele oplossing is 100% waterdicht. Kwaadwillenden maken gebruik van steeds geavanceerdere systemen, daarom is het belangrijk om ondanks gebruik van CAPTCHA ontvangen berichten via het contactformulier goed te controleren op juistheid.
Om CAPTCHA te implementeren zijn er diverse WordPress plug-ins te gebruiken als WPForms, Google reCAPTCHA en hCaptcha. Hiervoor heb je een app key nodig, deze vraag je aan via de website van de leverancier. Vervolgens voer je de api key in bij de geïnstalleerde plugin.
Api key aanvragen:
Voor het implementeren van CAPTCHA in de code is net als bij de WordPress versie een api key nodig die via een van de bovenstaande links aan te vragen is. Deze key neem je daarna op in de code voor jouw gekozen CAPTCHA methode. Hieronder zijn een aantal methoden opgenomen met een korte uitleg en verwijzing naar de documentatie.
De onderstaande stappen tonen de implementatie van hCaptcha volgens de hCaptcha documentatie.
<script src="https://js.hcaptcha.com/1/api.js" async defer></script><html>
<head>
<title>hCaptcha Demo</title>
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
</head>
<body>
<form action="" method="POST">
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
## Zet onderstaande hCaptcha request in de form
<div class="h-captcha" data-sitekey="jouw_api_key"></div>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Een onzichtbare CAPTCHA check is via reCAPTCHA v2 mogelijk door deze mee te geven aan een button zoals de google documentatie aangeeft en onderstaande stappen beschrijven.
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
## Voeg de api javascript en submit toe
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
</head>
<body>
<form id="demo-form" action="?" method="POST">
## Voeg captcha met jouw api key toe aan de button
<button class="g-recaptcha" data-sitekey="jouw_api_key" data-callback="onSubmit">Submit</button>
<br/>
</form>
</body>
</html>Het implementeren van v3 is vergelijkbaar met v2 door een api oproep toe te voegen met een callback en in de submit knop zoals de documentatie aangeeft.
<script src="https://www.google.com/recaptcha/api.js"></script> <script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script><button class="g-recaptcha" data-sitekey="jouw_api_key"
data-callback='onSubmit' data-action='submit'>Submit</button>Mocht je nog ergens tegen aan lopen, of mocht er informatie missen op deze pagina, laat het ons dan gerust weten! Wij staan dag en nacht klaar om je verder te helpen, en houden er van om feedback van onze trouwe partners/klanten te horen.