Ajax Fancy Capcha

几天前看见JE上新闻上的Jquery插件中，有一个叫Ajax Fancy Captcha的验证码插件，虽然jcaptcha也还不错，但就因为一验证码莫明的多个组件出来，这并不是什么好事，更何况jcaptcha还依赖几个其它的组件。当然也有人说可以用recaptcha，虽然recaptcha没有用过，不过人家说了：reCAPTCHA is a Web service，我个人不太喜欢，内网根本不能用。因此一直在思考有没有办法用JS来代替。由于以前没有找到，所以也只有忍了，jcaptcha将就着用吧！但我发现Fancy时，我心动了，正好这几天有这个心情，决定花点时间把它应用到JAVA上来。首先到官方去看了一下，使用原理是：先从服务端获得一个0-4的数字（这个数字表示需要验证的是第几张图片），当把正确的图片拖到正确的位置时，生成一个隐藏的字段，这个字段的值就是这个随机数，当提交表单时，就把这个隐藏字段的值与服务端传过来的值比较，相等则通过。

由于官方的例子是采用PHP做的，本人从来没学过，也不打算学，所以不是很懂，看了个大概，基本算看懂了，但是采用JAVA来做，还是遇到了一些问题。

Fancy的文件主要有下面几个：

引用

-captcha
–imgs
–captcha.css
–jquery.captcha.js
–captcha.php
–iepngfix.htc
-latest-jquery
-latest-jquery-ui
-example.html
-readme.txt

由于官方的例子采用的PHP，所以里面含有PHP文件。实际上用JAVA时，有些文件是不需要的。

先从JSP说起，在JSP里需要做的事并不多，首先在头部引入声明：

...
<script type="text/javascript"
              src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript"
              src="${pageContext.request.contextPath}/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript"
              src="${pageContext.request.contextPath}/captcha/jquery.captcha.js"></script>
              
<script type="text/javascript" charset="utf-8">
 $(function() {
 $(".ajax-fc-container").captcha({formId: "myForm"});
 });
 </script>
 
 <link rel="stylesheet" type="text/css" 
   href="${pageContext.request.contextPath}/captcha/captcha.css"></link>

...

需要注意的是要把form的ID做相应的修改，目录可以根据情况自己改变，当然jquery.captcha.js也要做相应的修改。经过上面声明以后，在相应的位置加入验证图片：

...
<div class="ajax-fc-container"></div>
...

JSP页面处理好以后，需要处理的就是JS代码了，JS代码其实很简单，就在jquery.captcha.js
文件内，这里需要注意两点：

一、验证的基本显示，例如把相应的英文改成相应的中文等，其实很简单，如：

...
var defaults = {  
	   borderColor: "",  
	   captchaDir: "captcha",  
	   url: "./RandomCaptcha.action?getNumber",  
	   formId: "myForm",  
	   text: "<font size='2'>验证你是一个人,<br />拖动 <span>scissors</span> 进入圆圈内.</font>",
	   items: Array("pencil", "scissors", "clock", "heart", "note") 
	  };
..

二、需要从服务端获得随机数字，这里需要用到AJAX请求，上面的URL就是相应的请求路径。getNumber表示请求执行此Action的getNumber方法，说到服务端，还真是麻烦，JAVA Web框架众多，但大多都复杂，就算古老的Struts，也依赖很多包，还要搞一堆配置，Struts2虽然功能强大，但用来照样有些复杂，更不用说其它的wicket,Tapestry了，就做一个简单的例子实在不想用那些复杂的框架，但是也不愿意直接用Servlet，还是Stripes好啊！功能强大，最让人称道的是它依赖的JAR特别少，只有一个common-logging文件，总算做了件好事。下面以Stripes为例，服务端的关键代码如下：

.....
	@DontValidate
	@HttpCache(allow = false)
	public Resolution getNumber() {

		return new StreamingResolution("text/plain") {
			@Override
			public void stream(HttpServletResponse response) throws Exception {
				int captcha = new Random().nextInt(5);
				response.getWriter().write(captcha + "");

			}
		};
	}
...

如果没用过Stripes的也不要紧，上面代码的意思就是返回一个数字字符串，不过别看着简单，其中出了一个问题，本人花了很长时间才解决，那就是那个看起来有点奇怪的captcha+""，理论上说，可以直接写成：

response.getWriter().write(captcha );

但实际上传过去的是乱码，这就奇怪了，如果是中文，出现乱码可能是字节编码的问题，怎么数字也会是乱码？这个问题搞了很久，还是不知道原因，以前也用过这种方式传数据，没出现什么问题呀，难道是框架的问题！仔细看了下框架的源码，也没发现什么问题呀！就这一个问题让自己引申出了一系列的问题（JQuery,Stripes,Servlet甚至tomcat），差点去研究JavaScriptResolution去了。最后发现字符格式的问题，虽然以前也用过，但是从来没有试过只传整数的方式。所以不得已，后面加个空字符串，总算解决了问题。

后来还是花了点时间，试用了一下JavaScriptResolution，可能稍微要简单一点，需要修改两个地方：
一、返回StreamingResolution修改成JavaScriptResolution：

...
public Resolution getNumber() {
		Random random = new Random();
		int captcha = new Random().nextInt(5);
		return new JavaScriptResolution(captcha);
	}
....

二、由于是以javascript的格式返回的，所以JavaScriptResolution在返回的数据后面加了个";",于是相应的JS文件也要修改，原来的代码：

...
var rand = $.ajax({ url: options.url,async: false }).responseText;
...

修改成：

...
var rand = eval($.ajax({ url: options.url,async: false }).responseText);
...

这样看起来似乎稍微要简单一点，当然JavaScriptResolution还有一些比较强大的功能，尤其是处理复杂的数据时，非常有用。

通过上面几步，就可以看见基本的效果了：




在拖动图片到圆圈内时，Fancy会创建一个隐藏字段，代码如下：

...
$("#" + options.formId).append("<input type=\"hidden\" style=\"display: none;\" name=\"captcha\" value=\"" + rand + "\">");
...

这个字段的值就是从服务端传过来的数字，因此判断验证是否通过，只需要在服务端判断
字段captcha的值是否与刚才从服务端传过来的数字是否相等即可。

这样一个比较有创意的验证机制就做完啦！

评论

2 楼 litianpeng 2016-01-14  

虽然是2009年写的帖子 不过还是要请问一下先生 我按照你的方法写了一遍 关键没有
成功 我也不知道是哪一步错误 不只能否提供些信息 谢谢 邮箱[e-mail]  急

1 楼 redlight168 2013-08-09  

，今天刚看到这个，觉得很不错，楼主分享一下源代码，我的邮箱是 [e-mail]，谢谢