驗證碼驗證設置

---

立即下載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());
}