推荐一个好的验证码MvcCaptcha

ゝ一世哀愁。 2022-06-16 14:47 183阅读 0赞

MvcCaptcha的地址如下

[http://www.webdiyer.com/mvccaptcha/][http_www.webdiyer.com_mvccaptcha]

验证码技术是目前很多WEB程序采用的一种安全防御技术，主要用于防止使用软件程序自动和批量提交表单。MvcCaptcha是应用于ASP.NET MVC Web应用程序中的验证码控件，功能强大，使用简单方便，生成的验证码图片效果如下：

![MvcCaptcha][]

### MvcCaptcha的主要特点： ###

1.  支持自定义验证码图片的字体扭曲程度（None, Low, Medium, High, Extreme五级）和图片中的文本个数；
2.  支持自定义验证码图片的背景杂色级别（None, Low, Medium, High, Extreme五级）；
3.  支持自定义验证码图片的干扰线条级别（None, Low, Medium, High, Extreme五级）；
4.  可自定义验证码图片中使用的文本，英文字母、数字及汉字均可；
5.  使用Session保存验证码文本，确保安全；
6.  可以在用户激活验证码输入框时才生成图片（类似于百度帖吧的验证码生成方式），减轻服务器负担；
7.  支持Ajax方式加载图片，即使应用验证码的当前页面被缓存，也可保证每次生成新的验证码图片；
8.  支持在web.config中全局设置验证码相关属性；

### 已知问题： ###

1.  使用Ajax加载模式时，jQuery脚本库必须先于验证码控件关加载，否则验证码图片无法加载；
2.  路由配置中需有默认的“\{controller\}/\{action\}/\{id\}”路由，否则需要单独为验证码控件设置路由；

以上问题在以后升级时会逐步完善，谢谢支持！

如何使用MvcCaptcha验证码控件

1.  下载并在ASP.NET MVC项目中添加对MvcCaptcha.dll的引用；
2.  在当前页面的Form中添加验证码输入文本框，供用户手工输入验证码用，验证码文本框可以放在Form中的任何地方，示例如下：
    
        <input type="text" name="_mvcCaptchaText" id="_mvcCaptchaText" />
    
    文本框的name和id可以是MvcCaptcha默认的“\_mvcCaptchaText”，也可以是自定义的其它值，在当前Form被提交后，MvcCaptcha控件会在服务器端获取这个文本框的值进行验证，如果文本框的name和id值不是默认的“\_mvcCaptchaText”，则在在前台注册码证码控件和在后台进行验证时需要进行额外设置，下面会详细说明。
3.  在当前页面上添加放置验证码图片的容器元素，可以是div、span等任何元素，并为其设置id值，示例如下：
    
        <div id="captchaImage"></div>
    
    id属性值可以默认为“captchaImage”，如果设置为其它值，则需要在注册MvcCaptcha控件时额外设置，下面会有详细说明。
4.  在Form内注册MvcCaptcha，示例如下：
    
    **Razor语法：**
    
        @Html.MvcCaptcha()
    
    **WebForm语法：**
    
        <%:Html.MvcCaptcha()%>
    
    若前面所讲的验证码输入文本框的id不是默认的“\_mvcCaptchaText”，或者验证码图片容器元素的id不是默认的“captchaImage”，则需要在MvcCaptchaOptions属性中指定，假定验证码文本框的id是“captchaInput”，图片验证码的容器元素的id是“imgContainer”，则上面的注册代码应改为：
    
    **Razor语法：**
    
        @Html.MvcCaptcha(new MvcCaptchaOptions {ValidationInputBoxId = "captchaInput", CaptchaImageContainerId = "imgContainer" })
    
    **WebForm语法：**
    
        <%:Html.MvcCaptcha(new MvcCaptchaOptions {ValidationInputBoxId = "captchaInput", CaptchaImageContainerId = "imgContainer" })%>
    
    其中的ValidationInputBoxId是验证码输入文本框的客户端ID，CaptchaImageContainerId是包含验证码图片的容器元素的客户端ID。
    
    若要启用Ajax延迟加载验证码图片功能，则需要设置MvcCaptchaOptions属性的DelayLoad为true，示例如下：
    
    **Razor语法：**
    
        @Html.MvcCaptcha(new MvcCaptchaOptions {DelayLoad = true,ValidationInputBoxId = "captchaInput", CaptchaImageContainerId = "imgContainer" })
    
    **WebForm语法：**
    
        <%:Html.MvcCaptcha(new MvcCaptchaOptions {DelayLoad = true,ValidationInputBoxId = "captchaInput", CaptchaImageContainerId = "imgContainer" })%>
5.  在后台Controller的Action方法上添加ValidateMvcCaptchaAttribute过滤器，示例如下：
    
        [ValidateMvcCaptcha][HttpPost]
        public ActionResult Login(LoginModel login){...}
    
    如果前面提到的验证码输入文本框的name属性值不是默认的“\_mvcCaptchaText”时，需要在过滤器中显式指定该值，假定验证码文本框的name属性值为“captchaInput”，则代码应改为：
    
        [ValidateMvcCaptcha("captchaInput")][HttpPost]
        public ActionResult Login(LoginModel login){...}
    
    在Action方法中，用ModelState.IsValid进行验证，示例如下：
    
        [ValidateMvcCaptcha("captchaInput")][HttpPost]
        public ActionResult Login(LoginModel login){
        if (ModelState.IsValid){
        //验证通过
        }
        else{
        //验证失败
        }}

小技窍：

若要进行客户端unobtrusive Javascript验证，可以在验证码文本框代码中加上 data-val="true" data-val-required="验证码不能为空"，示例如下：

[http_www.webdiyer.com_mvccaptcha]: http://www.webdiyer.com/mvccaptcha/
[MvcCaptcha]: /images/20220616/1425f028e2554953b2a5d8ccff941514.png