MVC下驗證碼

標籤：c   java   http   a   ext   width   

驗證碼技術是目前很多WEB程式採用的一種安全防禦技術，主要用於防止使用軟體程式自動和批量提交表單。MvcCaptcha是應用於ASP.NET MVC Web應用程式中的驗證碼控制項，功能強大，使用簡單方便，產生的驗證碼圖片效果如下：

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. 下載並在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="驗證碼不可為空"，樣本如下：

<input type="text" name="_mvcCaptchaText" id="_mvcCaptchaText" data-val="true" data-val-required="驗證碼不可為空" />