How to Add CAPTCHA Security Images to Wildflower Comments

So you love Wildflower CMS for CakePHP, and you've used it to create a number of blogs. However you've noticed something. You are getting comment spammed.

Put simply, Wildflower doesn't have a good solution for preventing comment spam.

Initial Setup

1) Download the latest Wildflower development copy to your system. You can find the latest code for Wildflower on GitHub.

2) Set up your development environment. This includes:

• Apache virtual host setup to point to your wildflower/app/webroot folder
• Setup your local database called "wildflower"
• Modify your hosts file so that it points to the Apache domain
• Restart Apache.

3) At this point you should have a working copy of Wildflower.

Download Securimage CAPTCHA

You can download Securimage here:

Securimage Download

• Grab the zip file and unpack it into your app/vendors/ directory.
• Download the words.zip file and extract to app/vendors/securimage/words/
  

Building the Dynamic Image

• Download the Captcha.php script and place it in app/webroot/

• Edit app/webroot/.htaccess and add the following line:

RewriteEngine On
RewriteRule ^img/captcha.jpg$ captcha.php [QSA,L]
RewriteCond %{REQUEST_FILENAME} !-d
...

• Test the image by going to http://yourvirtualhost/img/captcha.jpg

Create the Form View

Copy

• ~/wildflower/views/wild_posts/view.ctp

to

• /app/views/plugins/wildflower/wild_psts/view.ctp

(Create the directories as needed)

• Now edit /app/views/plugins/wildflower/wild_psts/view.ctp and add the following two lines in the Comments Form.

$form->input('url', array('label' => 'Website URL (optional)')),
$form->input('content', array('label' => 'Message', 'type' => 'textbox')),
$html->image('captcha.jpg', array('alt'=>'Code', 'id'=>'security_image')),
$form->input('security_code', array('label' => 'Enter the word.')), $form->hidden('post_id', array('value' => $post['WildPost']['id'])),


Process the Form

• Open up ~/wildflower/models/wild_comment.php

• Add the following Validation Rule:

public $validate = array(
'name' => VALID_NOT_EMPTY,
'email' => array('rule' => 'email', 'message' => 'Please enter a valid email address'),
'url' => array('rule' => 'url', 'message' => 'Please enter a valid URL', 'allowEmpty' => true),
'security_code' => array('rule'=>'validSecurityCode', 'message'=>'The word you entered was not correct.', 'allowEmpty' => false),
'content' => VALID_NOT_EMPTY
);

• Add the following Function:

function validSecurityCode() {
if (!empty($this->data[$this->name]['security_code']) && strtolower($this->data[$this->name]['security_code']) != strtolower($_SESSION['securimage_code_value'])) {
unset($this->data[$this->name]['security_code']);
return false;
}
return true;
}

Try to add a comment to a blog post and see what happens.