Simple captcha component for CakePHP (New)

Posted by Arvind K. in CakePHP on May 07, 2010

Updated on – December 23, 2011

Download files

Follow these simple steps to make it working. (I assume that someone trying it has proficient knowledge of CakePHP framework. I may or may not help in problems which are related to knowledge of CakePHP rather than component itself).

Copy attached font file (monofont) to ‘webroot’ folder.

Copy component file (captcha.php) to app/controllers/components

Create a function similar to the following in your controller. (NOTE: I have used “signups” controller for demonstration purpose only. You should change controller name accordingly.)

	function captcha()	{
		$this->autoRender = false;
		$this->layout='ajax';
		if(!isset($this->Captcha))	{ //if Component was not loaded throug $components array()
			App::import('Component','Captcha'); //load it
			$this->Captcha = new CaptchaComponent(); //make instance
			$this->Captcha->startup($this); //and do some manual calling
		}
		//$width = isset($_GET['width']) ? $_GET['width'] : '120';
		//$height = isset($_GET['height']) ? $_GET['height'] : '40';
		//$characters = isset($_GET['characters']) && $_GET['characters'] > 1 ? $_GET['characters'] : '6';
		//$this->Captcha->create($width, $height, $characters); //options, default are 120, 40, 6.
		$this->Captcha->create();
	}

Call the captcha action from within your img tag in the view file as below:

echo $form->create("Signups");
echo $html->image($html->url(array('controller'=>'signups', 'action'=>'captcha'), true),array('style'=>'','vspace'=>2)); ?>
echo 'Enter the given security code:';
echo $form->input('Signup.captcha',array('autocomplete'=>'off','label'=>false,'class'=>'','error'=>__('Failed validating code',true)));
echo $form->submit(__(' Submit ',true));
echo $form->end();

And you are done! The captcha image should look like Cakephp Captcha COmponent

Also, you can re-generate the captcha by adding (replacing code in line 2 of the above) ajax code something similar to the following:

<div id="captchaID" ><?php
echo $html->image($html->url(array('controller'=>'signups', 'action'=>'captcha'), true),array('style'=>'','vspace'=>2)); ?></div>
<?php echo $ajax->link('Can not read this code? Reload.','regenerate code',array('url'=>'reload_captcha','update'=>'captchaID')); ?>

In the code above it calls a reload_captcha function of the current controller. You can place reload_captcha in current controller or preferrably in the app_controller to make it available universally. Here’s the code:

	function reload_captcha()	{
		App::import('Component','Captcha'); //load it
		$this->Captcha = new CaptchaComponent(); //make instance
		$this->Captcha->startup($this); //and do some manually calling
		$this->layout='ajax';
		Configure::write('debug',0);
		$this->viewPath = 'elements'.DS;
		$this->render('reload_captcha');
	}

Obviousaly it renders a reload_captcha element. So create a reload_captcha.ctp file and place it in views/elements with the following code in it:

<?php echo $html->image($html->url(array('controller'=>'signups', 'action'=>'captcha'), true),array('style'=>'','vspace'=>2)); ?>

There is model validation code included in the files with example of how to validate it. Files include a model with new validation entry along with two function.

You can see it in working here. Let me know if you discover any issue while implementing it. Your suggestions to improve it are always welcome.

Download files

Share

Possibly Related posts:

Tags : , ,

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

58 Comments

Leave Comment

Freelance Jobs