Adding Open-Source LylaCaptcha to BlogCFC

The next step is to edit the xml config file for LylaCaptcha. You will need to set the location for the temp image files by modifying the outputDirectory attribute. I set mine to /img/captcha/ which is a folder I created for this purpose. I also decided to change height config to 45 and font size to 25 to shrink the size of the generated file (this is purely for appearance sake...this step is not necessary but it shrinks the size of the captcha a bit so it doesn't utlize so much real estate). That's it. The rest of the configuration parameters can remain the same unless you choose to go further. One of the nice things about LylaCaptcha is the sheer amount of configurable settings it includes (and for a new open-source project, it is very well documented - though the documentation could potentially include a more usable example, but Peter has mentioned that an example application is in the works).

Ok, now we need to modify some of the BlogCFC files - you will need to keep this in mind for future BlogCFC upgrades. You can begin by adding this code to line 60 of application.cfm:

<!--- NOTE: added lyla capthca --->
<cfset application.captcha = CreateObject("component","org.captcha.captchaService").init(configFile="/org/captcha/captcha.xml") />
<cfset application.captcha.setup() />

This code is exactly what it seems, it initializes the captcha component with your configuration XML. The second line is required because LylaCaptcha was built with user's adding dependency injection via ColdSpring in mind.

The next step will be to create two include files (which I have included in the download attachment to this post). The first is called captcha.cfm. It includes the form fields necessary to display the captcha and collect the user's response. It includes the hash needed to verify the correct response in a hidden form field. The code is pretty basic:

<cfset variables.captcha = application.captcha.createHashReference() />
<cfoutput>
<input type="hidden" name="captchaHash" value="#variables.captcha.hash#" />
<tr>
<td colspan="2" align="right"> Captcha text: <input type="text" name="captchaText" size="6" />
</td>
</tr>
<td colspan="2" align="right">
<img src="showCaptcha.cfm?hashReference=#variables.captcha.hash#" />
</td>
</tr>
</cfoutput>

The createHashReference() function creates the hash code that we will use later to generate the captcha and it is stored in the hidden form field. Finally, the image src is another include of sorts (showCaptcha.cfm) that will serve up the generated captcha image via cfcontent like so:

<cfset variables.captcha = application.captcha.createCaptchaFromHashReference("file",url.hashReference) />
<cfcontent type="image/jpg" file="#variables.captcha.fileLocation#" deletefile="true" reset="false" />

You will notice that the captcha file is generated from hash reference above. Both of these files are placed in the root directory of your blog (i.e. the client folder in the blogCFC zip download). Now just include captcha.cfm in the form line 193 of addcomment.cfm.

The next step is including the code to validate the captcha entry. You can add the captcha validation at line 73 of addcomment.cfm as follows:

<!--- captcha validation --->
<cfif not len(form.captchaText)>
<cfset errorStr = errorStr & "Please enter the Captcha text.<br>">
<cfelseif NOT application.captcha.validateCaptcha(form.captchaHash,form.captchaText)>
<cfset errorStr = errorStr & "The captcha text you have entered is incorrect.<br>">
</cfif>

The first part of the if statement obviously checks to ensure that the captcha was entered, but the second code validates the entry using the validateCaptcha() function of LylaCaptcha. It takes two arguments, the first being the hash code and the second is the captcha text (i.e. the form entry by the user) and simply returns a boolean either validating or invalidating the match. Simple enough. Note, I did not use the resource bundle in BlogCFC to generate the error messages obviously to make the example code easier to follow.

Well, that's it...comment spammers be damned. If you would like to test out my code, just comment on this entry with whatever ego boosting compliments you might have for me (unless you are a spammer that is) ;)

Download the attachment.