驗(yàn)證碼驗(yàn)證設(shè)置

---

立即下載Kendo UI for jQuery

本文解釋了如何使用應(yīng)用程序的后端來(lái)驗(yàn)證用戶對(duì)Kendo UI Captcha的響應(yīng)。

始終生成Captcha并在應(yīng)用程序的服務(wù)器端應(yīng)用驗(yàn)證，這種方法保證沒(méi)有程序或機(jī)器人可以通過(guò)JavaScript在客戶端訪問(wèn)Captcha的值，然后避開驗(yàn)證。

注意：要繼續(xù)下面的教程，請(qǐng)確保在您的項(xiàng)目中添加并引用了Captcha服務(wù)器端提供程序。

開始

為了生成驗(yàn)證碼并驗(yàn)證用戶的輸入，Kendo UI驗(yàn)證碼依賴于以下主要選項(xiàng)：

• Handler——設(shè)置獲取生成圖像的URL處理程序、函數(shù)或操作配置。
• AudioHandler——設(shè)置獲取生成音頻的URL處理程序、函數(shù)或操作配置。
• ValidationHandler——設(shè)置可以遠(yuǎn)程驗(yàn)證驗(yàn)證碼的URL處理程序、函數(shù)或操作配置。

1.要生成新的Captcha，請(qǐng)使用CaptchaHelper中的GetNewCaptcha()方法，將驗(yàn)證碼保存到會(huì)話。

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驗(yàn)證碼：

<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>

預(yù)覽：

3.添加驗(yàn)證碼的服務(wù)器端驗(yàn)證處理程序：

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

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