# 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](/files/3r8XQL8Hn3jeomFGYFTX)

{% hint style="info" %}
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).
{% endhint %}

{% hint style="warning" %}
Configuring the **kendoCaptcha** control requires handling several different requests from the client. This includes **generation**, **image processing**, and **validation**.
{% endhint %}

### Sample Implementation

{% tabs %}
{% tab title="C#" %}

```csharp
// 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();
}
```

{% endtab %}
{% endtabs %}

{% embed url="<https://demos.telerik.com/kendo-ui/captcha/api>" %}

## **Runtime**

The resulting **kendoCaptcha** control will look something like this:

![Kendo Captcha Runtime](/files/2NyRJZRxaIiUTuXlrtCM)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wisej.com/examples/premium/kendoui-captcha.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.