ASP.NET 验证码插件 BotDetect CAPTCHA

以前开发ASP.NET项目的验证码功能，都是自己用GDI+去绘制。现在都是使用质量比较高的插件，除了省时省力，安全性也比自己瞎搞的高，我自己个人项目中比较常用的是BotDetect CAPTCHA这个插件，当然还有其他十分优秀的验证码插件，感兴趣的可以网上找找。

演示项目下载地址（使用VS2017开发）：

• 百度网盘
• GitHub

BotDetect CAPTCHA依然属于传统字符验证码，这几年很多大型网站都开始用滑动验证码/滑动行为验证码，也有点击行为验证码，还有类似12306那种图形验证码。虽然种类繁多但是还是得根据自己的需求来选择。

在开始使用BotDetect CAPTCHA插件之前，需要知道这个插件有分免费版和付费版（全功能版），一般自用就用免费版的，免费版的一些功能和设置选项比付费版少，而且验证码会带有外链，不过基本上能满足个人项目的需求，更详细的功能对比还是去官网查看比较好。

关于这个插件的使用，官方的文档真的非常详细，建议耐心看完，而且也有详细的案例和演示，包括ASP.NET MVC各个版本和ASP.NET WebForm，另外插件也支持多种语言。这里我根据自己的项目经验，讲下几点需要注意的地方（我自己的项目是用ASP.NET MVC5开发的）。

---

第一步安装插件，建议使用NuGet，神兵利器不用多说，搜索CAPTCHA或者BotDetect CAPTCHA就可以找到插件安装包。

---

第二步设置Web.config，插件安装好后项目会自动引用相关的DLL，另外配置文件也会自动添加。这里需要注意下，配置文件里的插件配置可以根据自己的需求进行更改。如果是和我一样用免费版的，建议botDetect节点的配置参考我的：

<botDetect helpLinkEnabled="true" helpLinkMode="text"  soundEnabled="false"/>

helpLinkEnabled="true" helpLinkMode="text",主要是设置插件帮助链接为文本模式，会在验证码图片下方单独放一个链接，不然默认情况下点击验证码会调整到帮助链接（其实就是插件的外链）。除非使用付费版的才可以关闭，否则你设置helpLinkEnabled="false"也没用，只能投机取巧的通过设置来防止习惯性点击验证码图片刷新，导致跳转到其他页面。刷新功能插件是有额外提供一个刷新按钮。soundEnabled="false" 是关闭语音播放功能，因为是自己用所以就关闭了。

另外在sessionState的节点中，插件默认设置cookieless="AutoDetect"，这里建议取消cookieless设置（不设置等于使用默认的），AutoDetect模式的效果是如果用户浏览器不支持cookie，那么会在URL后面添加一个小尾巴（标识符）。这里可以看下MSDN文档：

我是这样设置的：

<sessionState mode="InProc" timeout="20" sessionIDManagerType="BotDetect.Web.CustomSessionIdManager, BotDetect" />

---

第三步设置并修改下RouteConfig.cs文件，在路由注册方法的添加如下代码：

routes.IgnoreRoute("{*botdetect}", new { botdetect = @"(.*)BotDetectCaptcha\.ashx" });

主要是忽略掉对BotDetectCaptcha.ashx这个一般处理程序的路由处理，毕竟这个插件就靠这个一般处理程序来操作验证码了，不设置RouteConfig会导致插件无法生效。

---

第四步修改视图页面，在视图页面中一共需要四步操作：

1. 需要引入BotDetect.Web.Mvc命名空间;
2. 引入BotDetect插件样式
3. 通过插件扩展的Html Helper类生成验证码图片
4. 添加验证码输入框和验证结果消息

View代码：

@{ 
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using BotDetect.Web.Mvc;

@section styles{    
    <link href="@BotDetect.Web.CaptchaUrls.Absolute.LayoutStyleSheetUrl" rel="stylesheet" type="text/css" />
}

<div>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        MvcCaptcha exampleCaptcha = new MvcCaptcha("exampleCaptchaId");        
        <div>
            @Html.Captcha(exampleCaptcha)
        </div>
        <div>
            <label>验证码:</label>
            @Html.TextBox("captchaCode")
        </div>      
        <div>
            <input type="submit" value="提交验证码" />
        </div>
        <div>
            <label>错误信息：</label>
            <span style="color:#a94442;font-weight:700;">
                @Html.ValidationMessage("captchaCode")
            </span>
        </div>        
    }
</div>

通过Html.Captcha生成验证码图片需要实例化一个MvcCaptcha类作为对象参数传入。另外要注意下验证码图片的ID和MvcCaptcha类对象的ID，要和后面控制台代码对应！

---

第五步修改后台控制器代码，这里需要三个步骤：

1. 引入插件命名空间
2. 在需要的操作方法（Action）上方添加插件的验证属性CaptchaValidation
3. 判断验证码是否通过并根据自己情况做下一步操作，返回对应的 ActionResult

关键代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using BotDetect.Web.Mvc;

namespace BotDetect_CAPTCHA_Demo.Controllers
{
    public class HomeController : Controller
    {        
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        [AllowAnonymous]
        [CaptchaValidation("captchaCode", "exampleCaptchaId", "验证码输入错误！！！")]
        public ActionResult Index(string captchaCode)
        {

            if (ModelState.IsValid)
            {
                //验证码验证成功
                //如果之前验证码输入错误并显示信息，会自动隐藏错误信息
                //注意：验证码只要输入正确，结果会进行缓存
                //之后重复提交验证码会发现就算输入错误也会成功通过，因为已经缓存了通过的结果
            }
            else
            {
                //验证码验证失败
                //视图界面需要调用@Html.ValidationMessage("对应输入框name")，才能显示属性中定义的错误信息
                //或者自己做处理
            }

            return View();
        }
    }
}

关于CaptchaValidationAttribute，主要参数如下：

1. string inputfield，验证码输入框ID，注意和视图上对应
2. string captchaId，MvcCaptcha实例化的对象ID，注意和视图上对应
3. string errorMessage，验证失败的错误信息，在视图界面上要通过@Html.ValidationMessage(string inputfield)才能显示错误信息。

---

其实这些步骤官方文档说的很详细，只是我自己再用自己的语言总结下。总的来说使用起来不是太困难，比起自己重复造轮子，用这些插件也比较方便。

另外经常上博客园的朋友可以留意下如果有印象，博客园早期的注册页面，验证码也是用BotDetect CAPTCHA这个插件： 

---

---

---