Recently I was working on a project for a client of mine where I needed to implement a Captcha within a DotNetNuke module. Now in the past, I have implemented Captchas on standard ASP.NET sites but I had yet to work with them in DotNetNuke. Now, DotNetNuke does have a built-in Captcha control which can be used on login/registration, but there doesn't appear to be much information out there about how to implement it in your own projects. I wanted to provide a quality solution for my client by matching the standard DNN look and feel so I decided to take a dive into the core code and find out just how you can use the Captcha control in your own module development projects. This article will first quickly explain how I went about finding this information and then will discuss the very simple steps needed to add a captcha to your project!
The Research
Knowing that a captcha is an available option for the registration page I started by looking in the /Admin/Security/Register.ascx page to see if I could find the code implemented there. This ended up turning up a few loose ends as the User.ascx control was used to provide a good majority of the code for the page. So the next step was to look at the /Admin/Users/User.ascx file, in there I found the key that I needed, the Captcha is a compiled control that is part of the DotNetNuke.UI.WebControls namespace in the DotNetNuke assembly. Now, I have an example that I could work with to put the Captcha in my page.
The Implementation
Now that I found the information it was very easy to implement the Captcha in my project. There are a total of 3 pieces of code that you must insert into your project to successfully use the Captcha control. Each of these items will be provided and detailed below.
Register the Assembly
The first step is to add the proper register declaration to your user control. This statement is what allows you to later declare and use the Captcha control in your page. You can simply copy and paste this code to the top portion of your .ascx file.
%@ Register TagPrefix="dnn" Assembly="DotNetNuke" Namespace="DotNetNuke.UI.WebControls"%>Declare the Control
The next step is to actually place an instance of the control in your module. Below is an example of a default configuration of the control, many other options exist for you to style the module to meet your needs, you can also implement a ResourceKey to allow localization of the error message.
<dnn:CaptchaControl ID="ctlCaptcha" CaptchaHeight="40" CaptchaWidth="150"
ErrorStyle-CssClass="NormalRed" cssclass="Normal" runat="server"
ErrorMessage="The typed code must match the image, please try again"/>As you can see this is a pretty simple step to complete, I have set the height and width of the captcha image to ensure that it fits nicely inside my area on the control, I also was sure to set the ErrorStyle and CssClass attributes to ensure that everything displays nicely with my skin. You have other options that you can configure here as well, including the number of characters and other items of that nature.
Validation of Captcha
The final step is to implement code in the backend that validates the Captcha to ensure that the user-supplied information was correct. Unlike other validation controls the Captcha does NOT validate prior to postback so this step is mandatory to ensure that the users supplied the Captcha. Below is some sample C# code to validate the Captcha, just a simple if statement.
if (ctlCaptcha.IsValid)
{
//Do your processing!
}Conclusion
Even though somewhat undocumented in the DotNetNuke core system the DNN core provides a very easy to implement Captcha that you can use in all of your module development projects. Please post your comments below, if you have technical questions about this article please use my forum for assistance.