技术帮
 

基于谷歌Kaptcha实现验证码

本网站内容基本都是原创作品,未得到作者同意也欢迎转载
转载请注明出处:技术帮
说你呢,赶紧长按二维码,然后点击识别图中二维码

任何技术难题可进QQ群提问:【小崔说编程
对于提问的原则是:没有你不能问的,只有我不会答的

1472955908895017376.png说两句


基于J2EE开发应用程序的时候,我们经常会需要实用验证码来确保是人在做操作,而不是网络黑客在搞破坏,例如在登录和注册的时候,都会需要用户输入一个验证码。

页面效果如下:

blob.png

本文将讲述如何实现验证码

1473058358717068189.png 实现验证码的思路

首先,在用户请求访问登录页面的时候,Server端随机生成验证码字符串。具体的算法我们不考虑,任何算法都可以。

其次,使用Java的绘图类和方法,根据验证码字符串绘制成一张图片,然后利用response对象将该对象显示在浏览器端,这时候用户看到就好像是一张普通的图片一样,而根本感觉不到这张图片是每次访问的时候通过java代码临时绘制的。

第三步,服务端将验证码字符串放入Session,等待用户登录提交的时候与Session中保存的验证码字符串做比对

第四步,当用户登录的时候,需要根据第二步展示给他的图片输入验证码,然后提交到服务器,服务器比对用户提交的验证码和Session中保留的原验证码

这就是验证码的设计思路和原理。


 下载Kaptcha的jar包

在项目中使用谷歌的Kaptcha,需要下载kaptcha.jarfilters.jar

本例子使用kaptcha-2.3.2.jar  和  filters-2.0.235.jar 

下载后将这两个jar放入WEB-INF/lib文件夹下。

 配置web.xml

kaptcha实际是将自己注册为一个servlet,这样用户通过浏览器访问注册的URL地址就可以打开一个图片了,也就是第一节中第二步描述的功能,注册servlet请在web.xml中添加如下配置:

	<servlet>
		<servlet-name>Kaptcha</servlet-name>
		<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>Kaptcha</servlet-name>
		<url-pattern>/yanzhengma.jpg</url-pattern>
	</servlet-mapping>

从上图的配置可以看到,只要访问http://ip:域名/上下文路径/yanzhengma.jpg,就可以打开一张图片了。如果没有问题的话,访问效果如下:

blob.png


 在登录窗口放入验证图片

在登录窗口的html代码修改为如下:

  <form action="<%=request.getContextPath() %>/do_login.do" method="post">
  <table>
    <tr><td>登录账号</td><td><input type="text" name="admin_code"></td></tr>
    <tr><td>登录密码</td><td><input type="password" name="admin_pwd"></td></tr>
    <tr><td>验证码</td><td><input type="text" name="yzm"> 
     <img src="<%=request.getContextPath() %>/yanzhengma.jpg"></td></tr>
    <tr><td colspan="2"> <button type="submit">提交</button> </td></tr>
  </table>
  </form>

显示页面效果如下:

blob.png

可以看出,kaptcha注册的url地址被放入了一个img的src属性中,由于Kaptcha最终输出就是一张图片,所以直接可以显示出验证码图片。

 登录验证

等用户填写验证码并提交后,在服务端如何验证呢?

服务端要从Session中取出原验证码字符串,获取方法如下:

String srcKey=(String)req.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);

可以看到,这就是简单的从session中获取属性值的办法,参数是Constants.KAPTCHA_SESSION_KEY是Kaptcha定义的一个常量。


至此,Kaptcha的基本使用功能就介绍完毕了。


Kaptcha还有一些其他设置,在此做一下简单的介绍:

参数的设置方法是在web.xml中增加参数:

	<servlet>
		<servlet-name>Kaptcha</servlet-name>
		<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
		<init-param>
			<param-name>kaptcha.border</param-name>
			<param-value>no</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>Kaptcha</servlet-name>
		<url-pattern>/yanzhengma.jpg</url-pattern>
	</servlet-mapping>



属性描述默认
kaptcha.border
图片边框,合法值:yes,noyes
kaptcha.border.color边框颜色,合法值:rgb或者white,black,blueblack
kaptcha.border.thickness
边框宽度,合法值:>01
kaptcha.image.width
图片宽度
200
kaptcha.image.height
图片高度50
kaptcha.producer.impl
图片实现类com.google.code.kaptcha.impl.DefaultKaptcha
kaptcha.textproducer.impl
文本实现类com.google.code.kaptcha.text.impl.DefaultTextCreator
kaptcha.textproducer.char.string文本集合,验证码值从此集合中获取abcde2345678gfynmnpwx
kaptcha.textproducer.char.length验证码长度5
kaptcha.textproducer.font.names字体Arial, Courier
kaptcha.textproducer.font.size字体大小40
kaptcha.textproducer.font.color字体颜色合法值: r,g,b  或者 white,black,blue.black
kaptcha.textproducer.char.space文字间隔2
kaptcha.noise.impl干扰实现类com.google.code.kaptcha.impl.DefaultNoise
kaptcha.noise.color干扰颜色,合法值: r,g,b 或者 white,black,blueblack
kaptcha.obscurificator.impl图片样式:

水纹com.google.code.kaptcha.impl.WaterRipple

鱼眼com.google.code.kaptcha.impl.FishEyeGimpy

阴影com.google.code.kaptcha.impl.ShadowGimpy

com.google.code.kaptcha.impl.WaterRipple
kaptcha.background.impl背景实现类com.google.code.kaptcha.impl.DefaultBackground
kaptcha.background.clear.from背景颜色渐变,开始颜色light grey
kaptcha.background.clear.to背景颜色渐变,结束颜色white
kaptcha.word.impl文字渲染器com.google.code.kaptcha.text.impl.DefaultWordRenderer
kaptcha.session.keysessionkeyKAPTCHA_SESSION_KEY
kaptcha.session.datesession dateKAPTCHA_SESSION_DATE