Captcha
Use CAPTCHA on Forms
A CAPTCHA is one of the most common tests used on the Web to tell a human from a computer in interactions such as filling out web forms. The user is supposed type characters from a distorted image that appears on the screen. The input is evaluated and if correct, the user is presumed to be human.
Starting from SP 3 for Version 1.2, C1 CMS has the built-in CAPTCHA functionality, which you can use with web forms rendered by XSLT functions or created on ASP.NET pages.
How to use the C1 CMS CAPTCHA functionality on ASP.NET pages
To implement the CAPTCHA functionality on ASP.NET pages you need to:
- add the Captcha control to your web form and
- test the user’s input on a postback in the code behind.
To be able to use the Captcha control, you should:
- Download and unpack the sample Captcha control in the same directory where your ASP.NET page is.
- Register the tag for the Captcha control.
<%@ Register src="Captcha.ascx" tagname="Captcha" tagprefix="uc1" %>
This control includes a CAPTCHA image and a text input field.
To test the user’s input, you need to use the Captcha control’s Validate method and then, check its IsValid property.
Validate
This method validates the user’s input against the CAPTCHA.
IsValid
If true, the property indicates that the user’s input has been validated against the CAPTCHA; otherwise, false. Based on this property’s value, you can plan the further course of action on the form.
Sample ASP.NET Page with Captcha control
Let’s see some sample markup/code that illustrates how the Captcha control is used on the form.
CaptchaTest.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CaptchaTest.aspx.cs" Inherits="CaptchaTest" %>
<%@ Register src="Captcha.ascx" tagname="Captcha" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>CAPTCHA test</title>
</head>
<body>
<asp:MultiView ID="mlvMain" runat="server">
<asp:View ID="viewInput" runat="server">
<form id="form" runat="server">
<div>
Name:
<br />
<asp:TextBox runat="server" ID="txtName" />
<br />
E-mail:
<br />
<asp:TextBox runat="server" ID="txtEmail" />
<uc1:Captcha ID="Captcha1" runat="server" />
<asp:Button ID="btnSubmit" runat="server" OnClick="OnSubmit" CausesValidation="true" Text="Submit" />
<asp:ValidationSummary id="validationSummary" runat="server" />
</div>
</form>
</asp:View>
<asp:View ID="viewSumbitted" runat="server">
Submitted. Thank you for the participation!!!
</asp:View>
</asp:MultiView>
</body>
</html>In the markup above:
1. We have added the Captcha control with the registered tag prefix
2. We have also added the button ("btnSubmit") and specified the OnSubmit method to be the handler for its OnClick event.
3. Besides, we have two more fields (Name and Email) and use the MultiView control to present the user different views based on the validity of his/her input in the Captcha control.
4. We use the ValidationSummary control to show all the validation messages in one place.
Now we should add the OnSubmit method to CaptchaTest.aspx.cs and write code that will evaluate the user’s input for the CAPTCHA image.
CaptchaTest.aspx.cs:
using System;
public partial class CaptchaTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
mlvMain.SetActiveView(viewInput);
}
}
protected void OnSubmit(object sender, EventArgs e)
{
this.Validate();
if(!IsValid)
return;
mlvMain.SetActiveView(viewSumbitted);
Captcha1.Validate();
if (Captcha1.IsValid)
{
Captcha1.ResetValue();
mlvMain.SetActiveView(viewSumbitted);
}
else
{
mlvMain.SetActiveView(viewInput);
}
}
}In the code above:
- We initialize the form to the default view (
viewInput) - We have added the
OnSubmitmethod called when theSubmitbutton is clicked. - Apart from validating regular form fields, in the
OnSubmitmethod, we call theValidatemethod on theCaptcha1control on the form, which tests the user’s input against the Captcha cipher represented by the image and sets theIsValidproperty. - Next, we check the
IsValidproperty of theCaptcha1control. The value (true/false) conditions our further course of action. - If the input is valid, we call the
ResetValuemethod that resets the CAPTCHA cipher and present the other view to the user (viewSubmitted). - Otherwise, we present the
viewInputview to the user.