Login Captcha Veld Toevoegen
In het artikel “WordPress Captcha & ReCaptcha” hebben we de verschillende technieken uitgelegd om formulieren te beveiligen tegen o.a. spam-robots.
Willen we een soortgelijke beveiliging toevoegen aan het inlogscherm van WordPress dan kan dat op verschillende manieren.
De meest eenvoudige manier is om daar een plug-in voor te gebruiken en daar zijn er verschillende voor te vinden via WordPress.org
Sommige maken gebruik van een afbeelding om de captcha tekst te tonen, andere genereren een tekst of rekensom. Er zijn er ook die gebruik maken van Google’s ReCaptcha.
In dit artikel beschrijven we hoe je een afbeelding-captcha kan toevoegen aan het standaard loginscherm van WordPress en maken gebruik van de plugin “Really Simple Captcha“.
Really Simple Captcha
De plug-in “Really Simple Captcha” was oorspronkelijk gemaakt als uitbreiding voor de formulieren plug-in “Contact Form 7” om inzendingen te beveiligen tegen spam. Later is deze plug-in uitontwikkeld tot een algemene tool om vrijwel ieder formulier te beveiligen.
Het inlogscherm van WordPress is niets anders dan een formulier en kan dus uitgebreid worden met eenzelfde soort beveiliging.
WordPress Inlog Captcha
In het artikel “WordPress Login Scherm Aanpassen” hebben we beschreven hoe je een eigen style login scherm kan maken:
Door middel van 2 extra functies toe te voegen aan het functions.php bestand in ons Child-Theme hebben we een extra veld gecreëerd zodat de gebruiker een Captcha moet invullen om in te kunnen loggen:
De Code-Snippet
Het volgende stukje code plaatst het extra veld met de Captcha-afbeelding:
add_action('login_form', 'qwain_login_captcha'); function qwain_login_captcha() { if(class_exists('ReallySimpleCaptcha')) { $captcha_instance = new ReallySimpleCaptcha(); $word = $captcha_instance->generate_random_word(); $prefix = mt_rand(); $captchaimg = $captcha_instance->generate_image( $prefix, $word ); $imgpath = plugins_url().'/really-simple-captcha/tmp/'.$captchaimg; ?> <input type="hidden" name="qwain_captcha_prefix" value="<?php echo $prefix; ?>"/> <label style="padding-bottom:15px;">Type de volgende tekst over:</label> <img src="<?php echo $imgpath; ?>" /><input name="qwain_captcha_answer" type="text" /> <?php } }
Het label van het veld volgt de style van het WordPress Login-Venster. We hebben hier alleen een extra padding toegevoegd zodat de tekst ongeveer op dezelfde hoogte getoond wordt als de Captcha-afbeelding.
Zoals hiervoor vermeld dien je de code toe te voegen aan het functions.php bestand van het Child-Thema. Weet je niet precies hoe dat moet, bekijk dan dit artikel: WordPress Code Snippets.
Nu we het veld hebben toegevoegd dienen we nog te controleren of de ingetypte tekst overeenkomt met de Captcha-Afbeelding. Daarvoor gebruiken we het volgende stukje code:
add_filter('wp_authenticate_user','qwain_validate_captcha',10,2); function qwain_validate_captcha($user, $password) { $return_value = $user; if(class_exists('ReallySimpleCaptcha')) { $captcha_instance = new ReallySimpleCaptcha(); $prefix = $_POST['qwain_captcha_prefix']; if(!$captcha_instance->check( $prefix, $_POST['qwain_captcha_answer'] )) { // Error Tekst $return_value = new WP_Error( 'loginCaptchaError', 'Captcha Fout. Probeer opnieuw.' ); } $captcha_instance->remove( $prefix ); } return $return_value; }
Indien de ingevoerde tekst door de gebruiker niet overeenkomt met de Captcha-Afbeelding zal de foutmelding verschijnen en dient de gebruiker nogmaals alles in te voeren:
Hiermee is nu onze login beveiligd met een Captcha waardoor hackers niet eenvoudig meer kunnen inloggen en hebben we een extra beveiliging gecreëerd op onze website.
De stappen zijn dus:
- Installeer en Activeer de plugin “Really Simple Captcha” welke de Captcha-Afbeelding genereert;
- Voeg de voorgaande 2 stukjes code toe aan het functions.php -bestand in het Child-Thema.
That’s All
Vragen & Info
Heb je vragen naar aanleiding van dit artikel, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.
Ondersteuning staat bij ons op nummer 1, wij zijn je graag van dienst !
Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… schrijf je dan in voor onze nieuwsbrief
en volg ons op Facebook .
Overige Artikelen