【JavaWeb】实现网页验证码

导读：常用的验证码有文本+数字，或者是算式验证码。可以自己编写，来生成验证码。亦或是使用第三方库，来生成验证码。

字母数字验证码

实现形如下图的验证码：

编写一个验证码生成类，首先写一个产生随机字符的方法：

public class CaptchaCode {private static char randomChar(){String string="QWERTYUIOPASDFGHJKLZXCVBNM1234567890";Random random=new Random();return string.charAt(random.nextInt(string.length()));}
}

然后写一个生成验证码图片的方法：

    public static String drawImage(HttpServletResponse response){//1.拼接字符串的类StringBuilder builder=new StringBuilder();//产生4位验证码for (int i = 0; i <4 ; i++) {builder.append(randomChar());}String code=builder.toString();//2.定义图片的宽度和高度int width=120;int height=25;//建立BufferedImage对象，指定图片缓冲流的长宽度和样式BufferedImage bi=new BufferedImage(width,height,BufferedImage.TYPE_3BYTE_BGR);//3.获取Graphics2d绘制对象，开始绘制验证码。图片最终会注入到缓冲流中Graphics2D graph=bi.createGraphics();//4.设置字体和大小Font font=new Font("宋体",Font.PLAIN,20);Color color=new Color(0,255,255);graph.setFont(font);graph.setColor(color);graph.setBackground(new Color(0,0,0));//绘制形状，一般是矩形graph.clearRect(0,0,width,height);//创建字体对象FontRenderContext context=graph.getFontRenderContext();//获得文字的边界Rectangle2D bounds=font.getStringBounds(code,context);//计算坐标和间距，以便字体放在矩形的正中央double x=(width-bounds.getWidth())/2;double y=(height-bounds.getHeight())/2;double acsent=bounds.getY();double baseY=y-acsent;//在矩形中绘制字体graph.drawString(code,(int)x,(int)baseY);graph.dispose();//保存到响应的输出流try {ImageIO.write(bi,"jpg",response.getOutputStream());//刷新响应流response.flushBuffer();} catch (IOException e) {e.printStackTrace();}//用于验证码的对比和存储return code;}

编写code.jsp，调用上面的方法，在响应中添加一个验证码图片流。

<%//清空浏览器缓存response.setHeader("pragma","no-cache");response.setHeader("cache-control","no-cache");response.setHeader("expires","0");//获取验证码字符，用于比对String code=CaptchaCode.drawImage(response);session.setAttribute("code",code);out.clear();out=pageContext.pushBody();
%>

在主页中，令img标签的源为上面的code.jsp，同时添加一个超链接，当点击超链接后，将img标签的src重新设置，每次点击都传入一个不同的请求，用于更换验证码。

<img src="code.jsp" alt="" id="code">
<a href="javascript:void(0);" onclick="changeCode()">看不清？换一张</a>
<script>function changeCode() {document.getElementById("code").src="code.jsp?d="+new Date().getTime();}
</script>

算术验证码

实现如下形式的验证码：

新建一个获取随机背景色的方法

private static Color getRandomColor(int fc,int bc){Random random=new Random();if(fc>255) fc=255;if(bc>255) bc=255;int r=fc+random.nextInt(bc-fc);int g=fc+random.nextInt(bc-fc);int b=fc+random.nextInt(bc-fc);return new Color(r,g,b);}

编写产生算术验证码方法，与之前的类似，只不过需要绘制干扰线。

public static String drawImageVerificate(HttpServletResponse response){int width=100,height=30;BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);Graphics2D graph=image.createGraphics();Random random=new Random();//设置背景graph.setColor(getRandomColor(240,250));graph.setFont(new Font("微软雅黑",Font.PLAIN,22));graph.fillRect(0,0,width,height);//设置干扰线颜色并绘制线条在图片中graph.setColor(getRandomColor(180,230));//100条for (int i = 0; i <100 ; i++) {int x=random.nextInt(width);int y=random.nextInt(height);int x1=random.nextInt(60);int y1=random.nextInt(60);graph.drawLine(x,y,x1,y1);}//算术表达式拼接int num1=(int)(Math.random()*10+1);int num2=(int)(Math.random()*10+1);int optor=random.nextInt(3);int result=0;    String optorstr="";switch (optor){case 0 :optorstr="+";result=num1+num2;break;case 1 :optorstr="-";result=num1-num2;break;case 2 :optorstr="*";result=num1*num2;break;}//拼接算术表达式String calc=num1+" "+optorstr+" "+num2+" = ? ";//设置表达式颜色graph.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));//绘制表达式graph.drawString(calc,5,25);graph.dispose();try {ImageIO.write(image,"JPEG",response.getOutputStream());return String.valueOf(result);} catch (IOException e) {e.printStackTrace();return null;}}

code.jsp和index.jsp与之前一样。

使用Kaptcha框架生成验证码

使用框架来产生验证码十分方便和快捷，可以指定各种样式。这里使用了Kaptcha框架，首先需要导入相关jar包，然后在web.xml中进行配置。

第一行比较重要，指定了生成验证码图片的地址为/kaptcha.jpg。

<servlet-mapping><servlet-name>Kaptcha</servlet-name><url-pattern>/kaptcha.jpg</url-pattern>
</servlet-mapping><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><init-param><param-name>kaptcha.image.width</param-name><param-value>100</param-value></init-param><init-param><param-name>kaptcha.image.height</param-name><param-value>40</param-value></init-param><!--字体、内容、验证码长度设置--><init-param><param-name>kaptcha.textproducer.font.size</param-name><param-value>28</param-value></init-param><!--产生验证码的种子--><init-param><param-name>kaptcha.textproducer.char.string</param-name><param-value>qwertyuiopasdfghjklzxcvbnm123456789</param-value></init-param><init-param><param-name>kaptcha.textproducer.char.length</param-name><param-value>4</param-value></init-param><!--噪点设置--><init-param><param-name>kaptcha.noise.impl</param-name><param-value>com.google.code.kaptcha.impl.DefaultNoise</param-value></init-param><!--设置图片样式--><init-param><param-name>kaptcha.obscurificator.impl</param-name><param-value>com.google.code.kaptcha.impl.FishEyeGimpy</param-value></init-param><init-param><!--session.setAttribute("kcode",生成好的验证码)--><param-name>kaptcha.session.key</param-name><param-value>kcode</param-value></init-param>
</servlet>

最后需要将生成的验证码，通过kaptcha.session.key来保存，通过kcode来访问生存的验证码字符串。

字符串校验

首先编写一个用于测试的jsp。

<form action="/login" method="post"><p>验证码：<input type="text" name="kaptcha" value="" id="code" maxlength="4" placeholder="请输入验证码"/><img src="http://localhost:8080/VerifyCode/kaptcha.jpg" id="changecode"/></p><p><input type="button" value="登录" id="login"></p><div id="result"></div>
</form>

然后编写一个js脚本，当用于点击图片的时候，产生一个新的验证码：

<script>$(function () {$("#changecode").on("click",function () {$(this).attr("src","http://localhost:8080/VerifyCode/kaptcha.jpg?d="+new Date().getTime());});
</script>

然后再编写一个js脚本，绑定“登录”按键。

<script>$(function () {$("#changecode").on("click",function () {$(this).attr("src","http://localhost:8080/VerifyCode/kaptcha.jpg?d="+new Date().getTime());});//给登录按钮绑定点击事件$("#login").on("click",function () {//获取用户输入的验证码var code=$("#code").val();//设置ajax请求的参数var params={"code":code};//发送ajax请求到url为login的servlet，并根据返回的data进行判断$.post("http://localhost:8080/VerifyCode/login",params,function (data) {if(data=="success"){$("#result").html("验证码输入正确");}else{$("#result").html("验证码输入错误，请重新输出");$("#code").val("").focus();}})})})
</script>

最后编写url为login的Servlet：

@WebServlet("/login")
public class LoginServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("UTF-8");//获取浏览器输出流对象，用于输出到ajaxPrintWriter out = response.getWriter();//获取用户传递过来的验证码String code = request.getParameter("code");//获取验证码框架产生的验证码（会话中存储的验证码）String sessionCode = (String)request.getSession().getAttribute("kcode");if(code!=null&sessionCode!=null) {//如果用户输入的验证码和产生在服务器端的验证码一致，那么就告诉用户输入正确if (code.equalsIgnoreCase(sessionCode)) {//登录逻辑、注册逻辑等相关的业务操作out.print("success");} else {out.print("fail");}}out.flush();out.close();}

这样就完成了验证码的校验