How to add captcha to a form

•  
•  
•  
•  

• sensenet.com
• Forum
• Blog
• [1]
• [2]

• 100%
• 6.4
• Enterprise
• Community
• Planned

Overview

A CAPTCHA (an acronym for "Completely Automated Public Turing test to tell Computers and Humans Apart") is a type of challenge-response test to determine whether or not the user is human. In this article it will be shown how to implement a simple captcha on a SenseNet form based on MSCaptcha

This guide uses MSCaptcha however if you do not want to add a third-party dll to your solution, you may use Google's reCaptcha that is validated on Google's server

Steps

Add the captcha to the UI

• First of all download the MSCaptcha files (dll and resource file) and copy them into the References folder of your project.

• In Visual Studio add the MSCaptcha.dll as a reference to the appropriate project (in case of form, to CorePortlets).

Add MSCaptcha.dll as reference to the solution

• Now, you are able to use MSCaptcha's CaptchaControl in your views. Add the following lines to the view you would like to modify. (In case of forms, to /WebSite/Root/Global/contentviews/FormItem/Edit.ascx):

Register the Assembly in the view:

  <%@ Register Assembly="MSCaptcha" Namespace="MSCaptcha" TagPrefix="cc" %>

Instantiate the CaptchaControl and a TextBox for the user input

<div>
  <cc:CaptchaControl ID="CaptchaControl" runat="server" Height="50px" Width="180px" CaptchaLength="5" BackColor="White" EnableViewState="False" />
  <asp:TextBox class="sn-form-fields" ID="CaptchaInput" runat="server"></asp:TextBox>
</div>

If the <cc:CaptchaControl> is still not recognized, try adding TagName "MSCaptcha" to the Register part

CaptchaControl

Web.config settings

If your run your site from IIS in order to display the captcha image itself, you have to make the following changes in the Web.config depending on what kind of Application Pool the IIS uses:

IIS Classic Application Pool:

You will need to add a new handler to <httpHandlers> in <system.web> section of your Web.Config:

<system.web>
 <httpHandlers>
    <add verb="GET" path="CaptchaImage.axd" type="MSCaptcha.captchaImageHandler, MSCaptcha"/>
 </httpHandlers>
</system.web>

IIS Integrated Application Pool

You will need to add the following handler to

<handlers>

in

<system.webServer>

section of your Web.Config.

<add name="CaptchaImage" verb="GET" path="CaptchaImage.axd" type="MSCaptcha.CaptchaImageHandler, MSCaptcha"/>

And after adding your Web.Config should look like this.

<system.webServer>
 <handlers>
    <add name="CaptchaImage" verb="GET" path="CaptchaImage.axd" type="MSCaptcha.CaptchaImageHandler, MSCaptcha"/>
 </handlers>
</system.webServer>

And if your site makes use of Authentication then you must allow CaptchaImage.axd for all users by adding

<location>

tag in your Web.Config file.

<location path="CaptchaImage.axd">
 <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
 </system.web>
</location>
</configuration>

Implement validation

To let the user know if the text she has detected was right or not, you have to implement the validation in the code-behind.

Place validation in FormPortlet.cs, so it looks so:

using MSCaptcha;
...
void _cvFormItem_UserAction(object sender, UserActionEventArgs e)
{
    switch (e.ActionName)
    {
        case "save":
        var isCaptchaValid = validateCaptcha(e);
	...		
    }
}
 
private bool validateCaptcha(UserActionEventArgs e)
{
    var captchaControl = e.ContentView.FindControl("CaptchaControl") as CaptchaControl;
    var captchaInput = e.ContentView.FindControl("CaptchaInput") as TextBox;
 
    captchaControl.ValidateCaptcha(captchaInput.Text);       
    return captchaControl.UserValidated;
}

If the text is incorrect, the CaptchaControl is reloaded automatically and the user can try it again.