reCaptcha using Mootools’ Json Request

A captcha program can tell if a user is a human or a computer. Most websites use captcha in order to prevent spam. You can see this mostly in contact and signup forms. One great captcha service that is available today is reCaptcha. If you are not quite familiar with how reCaptcha works, I’ll show you how. First, you must get an API key first at http://recaptcha.net/api/getkey. After you get the public and private keys, create an xhtml file and insert the snippet below at the head section of the file.

<script src="http://api.recaptcha.net/js/recaptcha_ajax.js" type="text/javascript"></script>

Next, we will be needing the Mootools library which we will use in order for Recaptcha.js to function.

Let’s check the contents of Request.js.

window.addEvent('load', function(){
	Recaptcha.create("6LceYgoAAAAAAKW5gZe7WcJ23_by_uZYu-xPSf0O", 'dynamic_recaptcha_1', {
	    theme: 'white',
	    tabindex: 0,
	    callback: Recaptcha.focus_response_field
	});
});

window.addEvent('domready', function() {
	$('signup').addEvent('click', function() {
		var request = new Request.JSON({
			url: 'Recaptcha.php',
			data : {
					'recaptcha_challenge_field' :
						$('recaptcha_challenge_field').value,
					'recaptcha_response_field' :
						$('recaptcha_response_field').value
					},
			onSuccess: function(jsonObj) {
				Recaptcha.reload();
				if(jsonObj.status == false) {
					$('message').set('html', 'Words did not matched!');
				} else {
					$('message').set('html', 'Words matched!');
				}
			}
		}).send();
	});
});

Request.js performs two events. Loads the reCaptcha and executes the Json request. Now we need a php script that will handle the passed fields in order to verify the answer. Lets take a look at RecaptchaClass.php. This class is a modified version of what is in reCaptcha.net. I only put the buildJsonObject function that creates a Json formatted output.

function build_json_object( $answer ) {
		//If the recaptchaResponseField is valid...
		if( $answer['is_valid'] == true ) {
			$result = array ("status" => "true");
		} else {
			$result = array ("status" => "false");
		}
		header( "Content-type: application/json" );
		echo json_encode( $result );
	}

If the Json response is false, output an error message which is in line 26-29 of the Request.js

How to use the RecaptchaClass.js ?

Instantiate the RecaptchaClass. It accepts 3 parameters: $recaptchaResponseField, $recaptchaChallengeField and $privateKey. Call the function recaptchaCheckAnswer() and passed it in the function buildJsonObject()

$recaptcha = new ReCaptchaClass(
								$recaptchaResponseField,
								$recaptchaChallengeField,
								$privateKey
						);
$answer = $recaptcha->recaptchaCheckAnswer();
$recaptcha->buildJsonObject( $answer );

See it in action

Click here to download.