驗證碼校驗的前世今生及心得體會

筆者在大學時，曾給學校做過網站，其中包含了用戶注冊登錄功能。有用戶注冊登錄，就需要有提交表單前的驗證碼校驗。

這里需要說明的是，有些網站的登錄注冊一開始並不需要輸入驗證碼，但是在用戶名密碼輸入錯誤一次以上以后，驗證碼輸入框便會彈出。這么做的動機，無疑是在大規模數量的注冊登錄時，前端可以將多次錯誤請求擋在外面。可以有效防止機器注冊或登錄對服務器資源的侵占。

筆者剛接下這個網站制作的工作時，才大三剛開學，對於驗證碼的生成與輸入校驗，可謂一竅不通，於是開始在網上找控件或插件，功夫不負有心人，終於找到一款封裝好的.net控件，並順利的將它集成到登錄功能中。這款控件的程序集叫作Vincent.AutoAuthCode.dll。大家可以直接搜索得到。非常感謝這款插件的作者及其分享者，幫助那時的我解決了這個問題。

這款驗證碼插件的特點是：1.零代碼量，從工具箱中直接拖拽到頁面上即可

　　　　　　　　　　　　2.自動完成驗證，並在輸入時即時提示

　　　　　　　　　　　　3.多種屬性，能夠在一定程度內，做到驗證碼圖片的自定義

以下是其使用方法的截圖：

         

最終效果如下圖：

 

 

然而在實際工作后，這款驗證碼插件功能出現了瓶頸：

一方面，並不是說這插件不好，而是隨着知識的增長和見識的提升，我們可以考慮自己制作驗證碼了。當然，自己制作驗證碼，其自定義特性肯定比封裝好的插件強很多，某些應用場景下，需要我們能夠自定義各種不同的驗證碼，甚至在驗證碼中加入漢字等。

另一方面：現在的B/S結構的web應用程序，MVC逐漸成為主流，ajax請求響應數據，依靠強大的前端JS工具，我們可以將這些數據拼裝成我們想要的前台展示。從性能角度來說，服務端的工作被減少很多，大部分展示工作都交給客戶端來完成。在PC、移動設備及瀏覽器JS引擎高速發展的今天，這逐漸成為一種趨勢並能有效的提高應用程序性能。

筆者了解到：現在不少論壇已經提供了驗證碼的制作方案，所以在此粗略的描述下驗證碼的制作過程：

1.生成隨機數字或字母，甚至是漢字，可控制字符長度，一般長度在4-5。

2.利用生成的字符串，繪制圖片，設置圖片的長度寬度等參數。

3.繪制圖片的噪音點，我們看到的圖片中的字符總有種亂花漸欲迷人眼的感覺，就是這么做出來的。

4.繪制圖片邊框。

5.將繪制好的圖片保存為流返回，筆者這里使用的是一般處理程序。

輸出驗證碼圖片的代碼如下：

　　　　　　　context.Response.ClearContent();
            context.Response.ContentType = "image/Gif";

            MemoryStream ms = CreateCodeImages.CreateCodeImg(code);
            if (null != ms)
            {
                context.Response.BinaryWrite(ms.ToArray());
            }

直接在html中調用一般處理程序，即可獲得驗證碼圖片：

 這里我們自然保存了圖片中的字符，將它存在服務端，用來做用戶輸入的校驗。通常是保存在Session里。

至於memeryStream里的代碼，筆者就不貼上來了，園子里的其他前輩也做了類似的工作，大家能夠在其中找到繪制圖片的代碼。 

 

接下來就是自制驗證碼的調用工作，由於ajax請求涵蓋了我們和服務端交互的大部分工作，所以我們使用驗證碼也可以封裝在ajax請求里，話不多說，上代碼：

/// <summary>
/// ajax調用
/// </summary>
/// <param name="options">ajax 參數</param>
/// <param name="callback">ajax success callback function</param>
/// <param name="errorCallback">ajax error callback function</param>

///<param name="checkData">驗證碼校驗時用戶的輸入</param>
/// <returns type="">$.Deferred</returns>

var ajaxWithCode = function (options, callback, errorCallback, checkData) {
            var def = $.Deferred();
            var self = this;
            //校驗驗證碼
            $.ajax({
                url: '/CheckCode.ashx?code=' + checkData,
                type: 'GET'
            }).done(function (result) {
                var res = eval('(' + result + ')');
                if (res.ok) {
                    alert("驗證成功");
                    //our Code
                    var defaultOptions = $.extend({
                        contentType: "application/json",
                        type: "POST",
                        dataType: "json",
                        async: true,
                        cache: false,
                        error: function (e1) {
                            if (e1.status == 44) {
                                alert(e1.responseText);
                                //$.messager.alert('業務異常', e1.responseText, 'error');
                            } else if (e1.status == 42) {
                                alert(e1.responseText);
                            } else if (e1.status == 0) {
                                console.log('ajax call have canceled by user');
                            }
                            else {
                                alert('服務器異常', e1.state + ' ' + e1.responseText, 'error');
                            }
                        }
                    }, options);
                    if (defaultOptions.data)
                        defaultOptions.data = ko.mapping.toJSON(defaultOptions.data);
                    else
                        delete defaultOptions.data;
                    var tt = $.ajax(defaultOptions).done(function (data) {
                        if (callback) {
                            callback(data);
                        }
                    });
                    return def;
                }
                else {
                    alert("驗證失敗");
                }
            });
        };

 

我們可以自己封裝一個ajax方法，將驗證碼的驗證放在前面，如果驗證碼錯誤，便給出錯誤提示，並阻止提交ajax請求，效果如下：

頁面沒經過美化，還請各位園友海涵。但驗證碼的制作及使用方式已經介紹完了，有興趣的朋友可以試試自制驗證碼，並添加自己的創意，比如百度的中文驗證^_^