快捷導(dǎo)航

使用JQuery和s3captche實(shí)現(xiàn)一個(gè)水果名字的驗(yàn)證

更新時(shí)間：2009年08月14日 01:28:33 作者：

大家登陸各種網(wǎng)站見到的驗(yàn)證碼應(yīng)該無(wú)外乎數(shù)字,字母和漢字。有沒有見識(shí)過使用水果名字和水果圖片來驗(yàn)證客戶端不是個(gè)機(jī)器人嗎？

先看個(gè)圖片：

1.介紹:

s3captcha是一個(gè)非常有用的可以讓圖片順序顯示的一個(gè)JQuery插件。它是通過php實(shí)現(xiàn)的。但是我發(fā)現(xiàn)很容易把它轉(zhuǎn)化為asp.net和C#的代碼。我做了一個(gè)config的配置文件可以在文件中配置圖片的源和名字等。

然后介紹一下s3captcha的實(shí)現(xiàn)原理,

上圖所示是它的實(shí)現(xiàn)模式。
1.它隨即生成圖片的index;
2.把一系列隨機(jī)數(shù)據(jù)賦給圖片的index.
3.可以從圖片列表中選擇一個(gè)隨機(jī)的index.
4.讓圖片隨機(jī)的顯示為一個(gè)radio box.
它使用JQuery實(shí)現(xiàn)的radio box到圖片List的轉(zhuǎn)換。
2.代碼:
首先是把圖片的index數(shù)組順序打亂,重新輸出：

復(fù)制代碼代碼如下:

public static List<int> shuffle(List<int> input) 
{ 
List<int> output = new List<int>(); 
Random rnd = new Random(); 

int FIndex; 
while (input.Count > 0) 
{ 
FIndex = rnd.Next(0, input.Count); 
output.Add(input[FIndex]); 
input.RemoveAt(FIndex); 
} 

input.Clear(); 
input = null; 
rnd = null; 

return output; 
}

使用xml來作為s3captche的配置文件:

復(fù)制代碼代碼如下:

<?xml version="1.0" encoding="utf-8" ?> 
<s3capcha> 
<icons> 
<name>apple,cherry,lemon,pear,strawberry</name> 
<title>Apple,Cherry,Lemon,Pear,Strawberry</title> 
<width>33</width> 
<height>33</height> 
<ext>jpg</ext> 
<folder>fruit</folder> 
</icons> 
<message>Verify that you are a human not robot, please choose {0}</message> 
</s3capcha>

GetHtmlCode的代碼：

復(fù)制代碼代碼如下:

public static string GetHtmlCodes(string PathTo, out int SessionValue) 
{ 
bool HasValue = false; 
if (string.IsNullOrEmpty(Message)) 
HasValue = LoadConfig(); 
else 
HasValue = true; 

if (HasValue) 
{ 
Random Rnd = new Random(); 
int RandomIndex = Rnd.Next(0,IconNames.Length); 

List<int> values = new List<int>(); 
for(int i = 0; i < IconNames.Length;i++) 
values.Add(i); 
values = shuffle(values); 

string WriteThis = "<div class=\"s3capcha\"><p>" + 
string.Format(Message, "<strong>" + IconTitles[values[RandomIndex]] + 
"</strong>") + "</p>"; 

int[] RandomValues = new int[IconNames.Length]; 
for (int i = 0; i < IconNames.Length; i++) 
{ 
RandomValues[i] = Rnd.Next(); 
WriteThis += string.Format(RowTemplate, 
IconTitles[values[i]], RandomValues[i], 
PathTo + "/icons/" + Folder + "/" + 
IconNames[values[i]] + "." + Extention, 
Width, Height); 
} 
WriteThis += "<div style="\" style="\""clear:left\"></div></div>"; 
SessionValue = RandomValues[RandomIndex]; 
return WriteThis; 
} 
else 
{ 
SessionValue = -1; 
return "Invalid data, config file not found"; 
} 
}

3.使用ajax方法來實(shí)現(xiàn)驗(yàn)證信息的判斷彈出框:
s3capcha.ashx 用來實(shí)現(xiàn)當(dāng)向服務(wù)器請(qǐng)求時(shí),返回html：

復(fù)制代碼代碼如下:

public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/html"; 

int USession; 
context.Response.Write(s3capcha.GetHtmlCodes("../../s3capcha", out USession)); 
context.Session[s3capcha.s3name] = USession; 

context.Response.End(); 
}

verify.ashx文件·來實(shí)現(xiàn)驗(yàn)證功能:

復(fù)制代碼代碼如下:

public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 

if (s3capcha.Verify(context.Session[s3capcha.s3name], 
context.Request.Form[s3capcha.s3name])) 
context.Response.Write("Success"); 
else 
context.Response.Write("Fail"); 

context.Response.End(); 
}

JQuery實(shí)現(xiàn)的ajax代碼:

復(fù)制代碼代碼如下:

//Javascript codes 
$(document).ready(function() { 
getCapcha(); 
$("form").bind('submit', function() { 
$.ajax({ 
url: 'verify.ashx', 
type: 'POST', 
data: { 's3capcha': $("input[name=s3capcha]:checked").val() }, 
cache: false, 
success: function(data) { 
alert(data); 
getCapcha(); 
} 
}); 
return false; 
}); 
});