ReCaptcha

ReCaptcha is een van de velen captcha's in de wereld, maar toch is de functionaliteit uniek.

Zoals jullie misschien al weten, zorgen captcha's er voor dat spambots geen (of in minder mate) kans van slagen hebben bij jouw formulier. Captcha's zijn er in verschillende soort en maken, maar zijn meestal plaatjes met woorden of tekens. Je moet dan de woorden of tekens overtypen in een input veld en vervolgens wordt in de back-end (PHP) gecontroleerd of de woorden of tekens overeen komen met de ingevulde waarde.

Je hebt sterke en minder sterke captcha's. Je hebt duidelijke en minder duidelijke captcha's. Maar je hebt ook goede en minder goede captcha's, en reCaptcha is één van die goede.

ReCaptcha is met als doel gemaakt om de integratie van een captcha in je applicatie zo simpel en veilig mogelijk te maken.



Het hele systeem is gebaseerd op het API principe. Met andere woorden: een client kan met behulp van een request maken naar de server en de response wordt gebruikt binnen de API. In dit geval is die response de hele captcha en heeft de client maar één bestand nodig; in mijn geval recaptcha.php. Omdat het hele systeem een API is, moet het ook kunnen identificeren. Dat gebeurt met behulp van een private en public key.
Omdat het op het API principe is gebaseerd, heb je de GD library ook helemaal niet nodig, omdat het genereren van het plaatje allemaal op de server van reCaptcha gebeurt. Hierdoor is de server belasting voor jouw ook minimaal.

Wat reCaptcha zo uniek maakt, is dat reCaptcha woorden uit ingescande boeken gebruikt. Hierdoor is er een enorm scala aan woorden en dus meer variëteit aanwezig in de captcha zelf. De woorden worden ook nog eens vervaagd, waardoor de kans van slagen van een captcha-recognizer minder groot wordt.
Het is ook mogelijk om een audio versie van de captcha te gebruiken. Hier worden audio-signalen gebruikt om de gebruiker de juiste invoer door te geven.

Een andere toepassing die reCaptcha heeft, is veilige e-mail adressen weer te geven. Met behulp van een encryptie methode wordt het e-mail adres in de html versleuteld, maar is het nog steeds mogelijk om het op de pagina weer te geven. Ook hier wordt de private en public key weer gebruikt, om zo te kunnen communiceren met de API op de server van reCaptcha.

Misschien is het je ook al opgevallen dat er twee woorden worden weergegeven op het plaatje in plaats van een. Dit komt, omdat er één woord is, waarvan de server API zelf het niet kon lezen (OCR) en één woord is, waarvan de server API zelf wel kon lezen.
Nu het interessante deel. De captcha bevat dus het onleesbare woord en het leesbare woord. Als de gebruiker nu beiden woorden in probeert te typen en vervolgens verzendt naar de server API, dan kan de server API al met enige vermoedens het onleesbare woord definiëren. Dit komt door de gebruiker, want de gebruiker heeft gezegd dat die vlek gelijk staat aan dat woord. De volgende keer stuurt de server API nogmaals die onleesbare woord, maar deze keer is er al iets meer zekerheid over de betekenis (bits en bytes) van die vlek. En zo wordt de vocabulaire steeds gevoed door de gebruikers zelf.

Om te beginnen met reCaptcha zul je je eerst aan moeten melden op reCaptcha.net. Wanneer je je hebt aangemeld en je bent ingelogd kun je een domein toevoegen waar je reCaptcha op wilt toepassen.



Wanneer je klaar bent met dit allemaal, geeft reCaptcha je jouw public en private key die je in je applicatie nodig zult hebben, wil je met de API kunnen communiceren. Deze pagina met public en private key kun je ten alle tijden bekijken en zal altijd aanwezig zijn. De key's zullen niet ongeldig worden naar verloop van tijd.

Tijd om reCaptcha te downloaden en te installeren. Ga naar http://code.google.com/p/recaptcha/downloads/list?q=label:phplib-Latest en download de laatste release van reCaptcha. ReCaptcha wordt vrijgegeven in de vorm van een zip bestand.



Wanneer je het zip bestand hebt uitgepakt zie je de bestanden die ook in bovenstaande plaatje te zien zijn. Recaptchalib.php is het kernbestand en zul je ook moeten importeren in je project. De overige PHP bestanden zijn voorbeelden hoe je de captcha kunt gebruiken en hoe je de mailhide optie van reCaptcha kunt gebruiken.

Het enige wat je hoeft te doen is de recaptchalib.php te importeren in je project en in principe ben je dan al klaar. De PHP kant van dit verhaal wordt nu uitgelegd.

Om te kijken hoe je reCaptcha gebruikt in je project, kun je het beste gewoon het bijgeleverde voorbeeld bekijken en analyseren. Hier volgt de code:

<html>
  <body>
    <form action="" method="post">
<?php

require_once('recaptchalib.php');

// Get a key from http://recaptcha.net/api/getkey
$publickey = "";
$privatekey = "";

# the response from reCAPTCHA
$resp = null;
# the error code from reCAPTCHA, if any
$error = null;

# was there a reCAPTCHA response?
if (isset($_POST["recaptcha_response_field"])) {
        $resp = recaptcha_check_answer ($privatekey,
                                        $_SERVER["REMOTE_ADDR"],
                                        $_POST["recaptcha_challenge_field"],
                                        $_POST["recaptcha_response_field"]);

        if ($resp->is_valid) {
                echo "You got it!";
        } else {
                # set the error code so that we can display it
                $error = $resp->error;
        }
}
echo recaptcha_get_html($publickey, $error);
?>
    <br/>
    <input type="submit" value="submit" />
    </form>
  </body>
</html>

En nu dan de code analyseren:

<?php

require_once('recaptchalib.php');

In dit stuk wordt de API controller geladen, waardoor je kunt communiceren met de API server. Deze ene regel is van essentieel belang.

// Get a key from http://recaptcha.net/api/getkey
$publickey = "";
$privatekey = "";

# the response from reCAPTCHA
$resp = null;
# the error code from reCAPTCHA, if any
$error = null;

Zoals je ziet moet je in dit stuk code de public en private key van die ene pagina invullen. Dit zou ik dan ook zeer zeker doen. Ga naar de pagina, kopieer de public en private key en plak deze key's in dePHP code van hierboven. Tevens worden de variabelen $resp en $error gedefiniëerd in de bovenstaande code zodat ze later gebruikt kunnen worden.

if ($_POST["recaptcha_response_field"]) {
        $resp = recaptcha_check_answer ($privatekey,
                                        $_SERVER["REMOTE_ADDR"],
                                        $_POST["recaptcha_challenge_field"],
                                        $_POST["recaptcha_response_field"]);

        if ($resp->is_valid) {
                echo "You got it!";
        } else {
                # set the error code so that we can display it
                $error = $resp->error;
        }
}

Hier wordt gekeken of er een request wordt gedaan aan reCaptcha. Als dat het geval is, gaat reCaptcha kijken naar het antwoord van de server API. Daarbij zijn een aantal parameters nodig, namelijk je private key, het IP adres van de bezoeker (logging) en nog verdere HTML velden.
Vervolgens met behulp van $resp->is_valid kun je kijken of de captcha goed is ingevuld. Als dat niet het geval is, gooit reCaptcha een error en kun je daar je eigen error handling in zetten.

Overigens zul je het input veld recaptcha_response_field en recaptcha_response_field niet terug vinden in de HTML van het voorbeeld. Dit komt, omdat die velden mee komen met de volgende regel:

echo recaptcha_get_html($publickey, $error);

Deze functie geeft de HTML terug die nodig is om de captcha weer te geven. Daarbij is echter je public key voor nodig, zodat je je kunt identificeren bij reCaptcha. De HTML response bevat alle velden en bevat een standaard opmaak.

Zo gebruik je dus reCaptcha in je applicatie. Omdat reCaptcha zo weinig omvang heeft, is het ook makkelijker te integreren en komt er ook minder kopieer en plak werk aan te pas.

Zoals ik al eerder aan gaf, komt de HTML response met alle velden die nodig zijn en ook de standaard opmaak, namelijk de rode opmaak.

Natuurlijk zal zo'n rode opmaak niet mooi staan bij bijvoorbeeld een groene layout, dus daarom is er een simpele manier om de hele layout naar eigen hand aan te passen.

Allereerst zul je reCaptcha moeten zeggen dat er een eigen layout wordt gebruikt. Dat doe je met deze JS script:

<script>
	var RecaptchaOptions = {
		theme: 'custom',
		lang: 'nl'
		custom_theme_widget: 'recaptcha_widget'
	};
</script>

Hier geef je aan dat je een eigen theme wilt stylen met behulp van CSS, de response teksten in het Nederlands naar jouw toe gestuurd moeten worden en wat de reCaptcha container wordt (dus waar de hele captcha HTML response in komt te staan).

Omdat reCaptcha nu niet weet wat de nieuwe opmaak van de HTML response moet worden, wordt er van je geëist dat er op z'n minst:

• [li]Een div aanwezig moet zijn met als ID recaptcha_image. Deze div bevat later het plaatje die reCaptcha mee geeft.[/li]
  [li]Een input veld met zowel het ID als de name recaptcha_response_field. In dit veld moet de gebruiker de reCaptcha woorden intypen (of de nummers voor de audio versie).[/li]
  [li]In ons geval ook een div met als ID recaptcha_widget. Dit hoeft alleen wanneer je in bovenstaande JS script ook de optie custom_theme_widget hebt gedefiniëerd. Let op!! Deze div MOET als extra attribute style="display:none" om zo te voorkomen dat de pagina gaat flikkeren.[/li]

Verder kun je de HTML response nog uitpluizen, om zo alle onderdelen te kunnen stylen met behulp van CSS.

Hier alle onderdelen op een rijtje:

• [li]recaptcha_widget , div[/li]
  [li]recaptcha_image , div[/li]
  [li]recaptcha_only_if_incorrect_sol , class[/li]
  [li]recaptcha_only_if_no_inccorrect_sol , class[/li]
  [li]recaptcha_only_if_image , class[/li]
  [li]recaptcha_only_if_sound , class[/li]
  [li]recaptcha_response_field , input ook voor de name attribute![/li]
  [li]javascript:Recaptcha.reload() , method[/li]
  [li]javascript:Recaptcha.switch_type(newtype) , method[/li]
  [li]javascript:Recaptcha.showhelp() , method[/li]
  [li]javascript:Recaptcha.get_challenge() , method[/li]
  [li]javascript:Recaptcha.get_response() , method[/li]
  [li]javascript:Recaptcha.focus_response_field() , method[/li]
  [li]javascript:Recaptcha.create(public_key, element, options) , method[/li]
  [li]javascript:Recaptcha.destroy() , method[/li]

Je kunt nu elke class apart opmaken, zodat elk stukje van de HTML response wordt opgemaakt. De method's die hier boven worden genoemd, kun je gebruiken om bijvoorbeeld het plaatje te refreshen of om te switchen tussen image of audio versie.

Ondanks dat reCaptcha zo compact is en zo weinig omvang heeft, is het toch een erg uitgebreide oplossing om spammers in je applicatie tegen te gaan.

Deze documentatie heb ik gebruikt, en dat kun jij ook ;)

reCaptcha Wiki
PHP documentatie van reCaptcha
Client-side documentatie van reCaptcha

Succes en vooral veel plezier met reCaptcha en ik hoop dat je er een beetje wat van geleerd hebt...