WordPress - Code Snippets

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:

Aangepast Login-Venster

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:

Inlog-Venster met Captcha

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:

Captcha Foutmelding

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:

1. Installeer en Activeer de plugin “Really Simple Captcha” welke de Captcha-Afbeelding genereert;
2. Voeg de voorgaande 2 stukjes code toe aan het functions.php -bestand in het Child-Thema.

That’s All

Overige Artikelen