KendoUI Captcha

The Kendo UI Captcha widget is a security measure that prevents automated spam from performing tasks such as form submissions in your application. The widget generates distorted images of letters and numbers that are easily decipherable to humans, but not to automated programs (spam bots).

Design-Time

The kendoCaptcha control can be added to a Form or Page from the Visual Studio Toolbox. It should look like this when dropped onto the designer.

Kendo Captcha Design-Time

The design-time appearance of the kendoCaptcha control will not feature a random captcha phrase. The logic for this must be implemented in your code (see below).

Configuring the kendoCaptcha control requires handling several different requests from the client. This includes generation, image processing, and validation.

Sample Implementation

C#

// Code for implementing the kendoCaptcha on a Page.

public kendoCaptcha()
{
	InitializeComponent();
}

/// <summary>
/// Process incoming data requests from the client.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void kendoCaptcha1_WebRequest(object sender, WebRequestEventArgs e)
{
	switch (e.Request["action"])
	{
		case "handler":
			e.Response.ContentType = "application/json";
			e.Response.Write(ProcessHandler());
			break;

		case "image":
			e.Response.BinaryWrite(GetImage(e.Request["captchaId"]));
			break;

		case "validationHandler":
			e.Response.ContentType = "application/json";
			e.Response.Write(ProcessValidation(e.Request["captchaId"], e.Request["captcha"]));
			break;
	}
}

/// <summary>
/// Generate and return a new Captcha.
/// </summary>
/// <returns></returns>
private object ProcessHandler()
{
	CaptchaImage newCaptcha = CaptchaHelper.GetNewCaptcha();
	Application.Session["captcha" + newCaptcha.UniqueId] = newCaptcha;
	
	return new
	{
		captcha = $"./{((Widget)this.kendoCaptcha1).GetServiceURL()}?action=image&captchaId={newCaptcha.UniqueId}",
		captchaId = newCaptcha.UniqueId
	}.ToJSON();
}

/// <summary>
/// Generate and return the Captcha image.
/// </summary>
/// <param name="captchaId"></param>
/// <returns></returns>
private byte[] GetImage(string captchaId)
{
	CaptchaImage captcha = (CaptchaImage)Application.Session["captcha" + captchaId];
	var image = CaptchaHelper.RenderCaptcha(captcha);

	using (MemoryStream ms = new MemoryStream())
	{
		image.Save(ms, ImageFormat.Png);
		return ms.ToArray();
	}
}

/// <summary>
/// Validate the Captcha input and display the corresponding AlertBox.
/// </summary>
/// <param name="captchaId"></param>
/// <param name="captcha"></param>
/// <returns></returns>
private object ProcessValidation(string captchaId, string captcha)
{
	CaptchaImage captchaImage = Application.Session["captcha" + captchaId];

	var success = CaptchaHelper.Validate(captchaImage, captcha);

	if (success)
		AlertBox.Show("Success!", MessageBoxIcon.Information);
	else
		AlertBox.Show("Failed.", MessageBoxIcon.Error);

	return success.ToString().ToLower();
}

API in jQuery Captcha Widget Demo | Kendo UI for jQuery

Runtime

The resulting kendoCaptcha control will look something like this:

Kendo Captcha Runtime