Computer Say’s No – a CAPTCHA for Telligent Community 6.0

I keep a close eye on the Telligent forums and rarely a few weeks go by without someone asking if there is a CAPTCHA for Telligent Community 6.0. (If you are not sure what one is then Wikipedia has a nice overview: http://en.wikipedia.org/wiki/CAPTCHA). The answer is that there is not one out-of-the-box.

Telligent have written before about why there is no CAPTCHA included out-of-the-box (http://software.rob-howard.net/why-no-captcha/) and it makes sense but sometimes there is a requirement to use one, such as on the registration form.

There were a number of .Net CAPTCHAs that worked well with Telligent Community (up to and including version 5.6), but 6.0 uses scripted widgets so including .NET controls in the widgets is not possible. Therefore I set about building a CAPTCHA that would work in the new scripted widgets in 6.0.

For those who just want to add this to their site you will be able to download the installation package for the CAPTCHA enabled registration widget from the following link: download. There are also instructions for installation of the CAPTCHA at the bottom of this article.
If you are interested in the implementation then please read on for an explanation of how this was achieved.

Which CAPTCHA should I use?

I carried out some research and decided to use the Re-Captcha from Google (http://www.google.com/recaptcha/whyrecaptcha ) as this is used by over 200,000 websites and is pretty secure and easier to integrate as it is Web Service based.

I decided to integrate it into the Registration form as this is one of the pages targeted by spammers and is the common request from developers / clients looking to add a CAPTCHA to their community.
When completed the finished form will look like this:

 

Creating the Widget Extension

The first thing to understand about the new scripted widgets is that in order to access functions and methods from outside of the widget a widget extension must be created. You can read more about these here: http://telligent.com/community/developers/w/developer6/creating-new-widget-extensions.aspx. My Extension method looks like this:

namespace Aseabridge.Extensions
{
   public class ASWidgetExtension : IScriptedContentFragmentExtension{
        public string ExtensionName { get { return "aseabridge_extensions_v1"; } }
        public object Extension { get { return new ASExtensions(); } }
        public string Name
        {
            get { return "Aseabridge Extensions Plugin"; }
        }
        public string Description
        {
            get { return "Enables widgets to use Aseabridge Extensions"; }
        }
        public void Initialize()
        {

}

}

It is fairly simple and returns an instance of a class called ASExtensions() which contains two Key Methods:

  1. CreateCaptchaControl() - this creates a new instance of the Recaptcha control
  2. ValidateCaptcha() - this validates the Captcha Control when a user enters the code.

Enabling the Extension

Now that I have these two methods I need to use them in the registration widget. To do this I first deployed my compiled assembly to the Community /bin folder (to make them accessible to the widget) and enabled the plugin in the control panel as shown below.

 

It is easy to see if an custom extension is working and available to the widgets by looking at the ‘self-documenting’ widget API documentation in widget studio in the control panel. You can see my two methods are visible here:

Using the Extension

In order to add the CAPTCHA to the registration form I created a copy of the out-of-the-box 'User – Login And Create' widget and called it ‘CAPTCHA Enabled User – Login And Create’. I first added some velocity script to the ‘form_join_manual.vm’ template tab to call my widget extension and output the captcha like so:

#set($captchaControl = $aseabridge_extensions_v1.CreateCaptchaControl("recaptcha", $captchaTheme, $captchaPublicKey, $captchaPrivateKey))
 $captchaControl

In the main Widget template tab I added script to get the CAPTCHA form fields and get the private and public keys and other options such as the theme from the widget configuration (more on this later):

 #set ($challengeFieldInput = $core_v2_widget.UniqueId('recaptcha_challenge_field'))
 #set ($challengeResponseInput = $core_v2_widget.UniqueId('recaptcha_response_field'))
 #set ($captchaPublicKey = $core_v2_widget.GetStringValue('captchaPublicKey', ''))
 #set ($captchaPrivateKey = $core_v2_widget.GetStringValue('captchaPrivateKey', ''))
 #set ($showCaptcha = $core_v2_widget.GetBoolValue('showCaptcha', true))
 #set ($captchaTheme = $core_v2_widget.GetStringValue('captchaTheme', 'red'))

I also included code to call my method to validate the CAPTCHA when the form is submitted:

#set($captchaOk = $aseabridge_extensions_v1.ValidateCaptcha($challengeField, $challengeResponse, $captchaPrivateKey))

If the validation fails then a message is displayed to the user asking them to try again:

 

 

 

 

 

 

Configuring the widget options

Finally I added the required resources (for labels and text) and some configuration to the widget to allow the settings for the CAPTCHA to be defined. The settings look like so when configuring the widget on the page in edit mode:

This only covers the core updates and additions made to the widget but if you open up the widget and take a look through it you will see these and additional changes in more detail.

Improvements and Usage

I began to implement client side validation of the code but there were some issues with this so currently this version only checks client-side for a blank entry and handle the validation of the code entered server-side. I may look to complete the client-side validation in a future release.

It should also we pretty easy to re-use the code from the registration on other forms in the Community such as the login page and comment forms.

Instructions for Installation

It is pretty simple to download and use this widget in your own community site:

  1. Download the installation package here: download
  2. Open the installation folder of your Community site on the server and copy the Aseabridge.Extensions.dll from the installation package into the /bin folder of your site.
  3. Go to the control panel: Administration » Site Administration » Manage Widgets and import the CaptchaEnabledUserLoginAndCreate-Widget.xml file from the installation package.
  4. Go to: https://www.google.com/recaptcha/admin/create and create a keys for your domain.
  5. Go to the control panel: Administration » Site Administration » Manage Plugins and enable the Aseabridge Extensions Plugin.
  6. Go to your create user page (http://yoursite/user/createuser.aspx) and enter edit mode. Search for the ‘CAPTCHA Enabled User – Login And Create’ widget and drag and drop it onto the page.
  7. Click the pen icon in the widgets header bar , click the ‘RE-CAPTCHA Settings tab’ and add your public and private keys generated in step 4. Also tick to enable the CAPTCHA and select one of the supported themes.
  8. Save the page.

That should be it, you will now have a registration form with a CAPTCHA which should stop those pesky spam-bots or at least make their life harder.

I hope you find this useful and please use the comments at the bottom of this article to provide feedback or ask any questions.

Thanks

Adam

 

Any questions?

If you need more information or have any questions just get in touch and we'd be happy to answer them for you.