验证码验证设置

---

立即下载Kendo UI for jQuery

本文解释了如何使用应用程序的后端来验证用户对Kendo UI Captcha的响应。

始终生成Captcha并在应用程序的服务器端应用验证，这种方法保证没有程序或机器人可以通过JavaScript在客户端访问Captcha的值，然后避开验证。

注意：要继续下面的教程，请确保在您的项目中添加并引用了Captcha服务器端提供程序。

开始

为了生成验证码并验证用户的输入，Kendo UI验证码依赖于以下主要选项：

• Handler——设置获取生成图像的URL处理程序、函数或操作配置。
• AudioHandler——设置获取生成音频的URL处理程序、函数或操作配置。
• ValidationHandler——设置可以远程验证验证码的URL处理程序、函数或操作配置。

1.要生成新的Captcha，请使用CaptchaHelper中的GetNewCaptcha()方法，将验证码保存到会话。

public ActionResult Reset()
{
CaptchaImage newCaptcha = CaptchaHelper.GetNewCaptcha();

Session["captcha" + newCaptcha.UniqueId] = newCaptcha;

return Json(new
{
captcha = Url.Action("image", "captcha", new { captchaId = newCaptcha.UniqueId }),
captchaId = newCaptcha.UniqueId
}, JsonRequestBehavior.AllowGet);
}

public ActionResult Image(string captchaId)
{
CaptchaImage captcha = (CaptchaImage)Session["captcha" + captchaId];
var image = CaptchaHelper.RenderCaptcha(captcha);
byte[] bmpBytes;

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

return File(bmpBytes, "image/png");
}

2.介绍Kendo UI for jQuery验证码：

<input id="captcha" />

<script>
$("#captcha").kendoCaptcha({
handler: "./reset",
audioHandler: function (args) {
args.success("./audio?captchaId=" + args.data.captchaId);
},
validationHandler: "./validate",
error: function (data) {
console.log(data);
}
});

</script>

预览：

3.添加验证码的服务器端验证处理程序：

public ActionResult Validate(CaptchaModel model)
{
string text = GetCaptchaText(model.CaptchaID);

return Json(text == model.Captcha.ToUpperInvariant());
}