web应用验证码的组成:
(1)输入框
(2)显示验证码的图片
验证码的制作流程:
生成验证码的容器使用 j2ee的servlet
生成图片需要的类:
(1) bufferedimage 图像数据缓冲区
(2)graphic绘制图片
(3)color获取颜色
(4)random生成随机数
(5)imageio输入图片
具体实现流程:
(1)定义一个servlet,用于生成验证码
(2)定已bufferedimage对象,主要作用就是制作一个图片缓冲区,作为图片的一个临时容器。
(3)获得graphic对象,画图的“背景”,理解为"画布"
(4)通过random生成随机数,来制作验证信息
(5)通过graphic操作,进行具体画图
(6)信息存至session中
(7)使用imageio输出生成的图片,通过设置imageio的 write()方法中的out参数,response.getoutputstream(),将图片传至前台
(8)制作验证用的servlet,提取session中的数据进行验证(这里采用ajax异步方法)
具体代码实现(web端验证码实例)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<html> <head> <meta http-equiv= "content-type" content= "text/html; charset=utf-8" > <title>java验证码</title> <script src= "https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script> </head> <body> 验证码输入:<input type= "text" name= "checkcode" > <img id= "codeimg" alt= "验证码" src= "imageservlet" > <a href= "javascript:reloadcode();" >看不出清楚?</a><br/> <input type= "submit" value= "提交" > <div id= "info" style= "color:red;" ></div> <script type= "text/javascript" > $(function(){ //ajax异步传验证码至后台 $( "input[type=submit]" ).click(function(){ $.post( "checkcode" , { "code" :$( "input[name=checkcode]" ).val()}, function(data,textstatus) { console.log(textstatus); $( "#info" ).html(data); }, "text" ); }); }) //js刷新,重新请求页面,获得新的验证码 function reloadcode(){ var time = new date().gettime(); //创建不同的时间 $( "#codeimg" ).attr( "src" , "imageservlet?time=" +time); //因为时间参数不同,请求重新 } </script> </body> </html> |
imageservlet类(验证码生成部分)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
@webservlet ( "/imageservlet" ) public class imageservlet extends httpservlet { private static final long serialversionuid = 1l; /** * @see httpservlet#httpservlet() */ public imageservlet() { super (); // todo auto-generated constructor stub } /** * @see httpservlet#doget(httpservletrequest request, httpservletresponse response) */ protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { // todo auto-generated method stub bufferedimage bimg = new bufferedimage( 68 , 22 , bufferedimage.type_int_rgb); graphics g = bimg.getgraphics(); color color = new color( 200 , 151 , 255 ); //颜色生成 g.setcolor(color); g.fillrect( 0 , 0 , 68 , 22 ); char [] ch= "abcdefghjiklmnopqrstuvwxyz0123456789" .tochararray(); //获得一个含有字母和数字的数组,后续随机从中获取字符 random random = new random(); //创建随机数 int len = ch.length,index; stringbuffer sbuffer = new stringbuffer(); //循环产生4个随机字符 for ( int i = 0 ;i< 4 ;i++) { index = random.nextint(len); //产生随机字母与数字 g.setcolor( new color(random.nextint( 88 ),random.nextint( 120 ),random.nextint( 90 ))); //创建随机颜色 g.drawstring(ch[index]+ "" , (i)* 15 + 3 , 18 ); sbuffer.append(ch[index]); //将随机获取的字符放置缓冲串中 } request.getsession().setattribute( "newcode" , sbuffer.tostring()); //存至session便于后续验证 imageio.write(bimg, "jpg" , response.getoutputstream()); //通过imageio输出图片,并传至前台 } /** * @see httpservlet#dopost(httpservletrequest request, httpservletresponse response) */ protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { // todo auto-generated method stub doget(request, response); } } |
checkcode(验证码验证servlet)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
@webservlet ( "/checkcode" ) public class checkcode extends httpservlet { private static final long serialversionuid = 1l; /** * @see httpservlet#httpservlet() */ public checkcode() { super (); // todo auto-generated constructor stub } /** * @see httpservlet#doget(httpservletrequest request, httpservletresponse response) */ protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { // todo auto-generated method stub response.setcharacterencoding( "utf-8" ); string code = request.getparameter( "code" ).touppercase(); //获取传来验证码并进行大小写转换 string result= null ; if (request.getsession().getattribute( "newcode" ).equals(code)) { result= "验证成功!" ; response.getwriter().append(result); } else { result= "验证码错误!" ; response.getwriter().append(result); } } /** * @see httpservlet#dopost(httpservletrequest request, httpservletresponse response) */ protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { // todo auto-generated method stub doget(request, response); } } |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:http://www.cnblogs.com/TheGCC/p/8903586.html