页面验证码及刷新demo

验证码：就是将一串随机产生的数字或符号，生成一幅图片，图片里加上一些干扰象素（防止OCR），由用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。
作用：验证码一般是防止有人利用机器人自动批量注册、对特定的注册用户用特定程序暴力破解方式进行不断的登陆、灌水。因为验证码是一个混合了数字或符号的图片，人眼看起来都费劲，机器识别起来就更困难。

直接看代码吧，这里我们有四个文件，一个前台验证码显示输入页面authCode.html，一个验证码校验页面checkCode.jsp，一个验证码请求的AuthCodeServlet.java，一个验证码生成类AuthCode.java

先看两个前台的页面

authCode.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<script>  
    function refresh() { 
        document.getElementById("authImg").src = "captcha.do?time=" + new Date().getTime();
    }  
</script>  

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    <form action="checkCode.jsp" method="post">  
        <img src="captcha.do" id="authImg" /><a onClick="refresh()">看不清</a><br>  
        <input type="text" name="inputCode"> <input type="submit" value="提交"> <br>  
    </form>  
</body>  
</html>

checkCode.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  

<%  
    if(request.getParameter("inputCode").equals(session.getAttribute("authCode"))) {  
        out.print("输入正确");  
    }else{  
        out.print("输入错误");  
    }  
%>  
<a href="javascript:history.go(-1)">返回</a>

再看后台的两个Java类文件

AuthCodeServlet.java

package com.captcha;

import java.io.IOException;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AuthCodeServlet
 */
@WebServlet("/captcha.do")
public class AuthCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public AuthCodeServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String authCode = AuthCode.getAuthCode(); 

// 为方便查看，我们后台打印验证码出来
        System.out.println(authCode);
        request.getSession().setAttribute("authCode", authCode);    //将验证码保存到session中，便于以后验证  

        try {  
            //发送图片  
            ImageIO.write(AuthCode.getAuthImg(authCode), "JPEG", response.getOutputStream());  
        } catch (IOException e){  
            e.printStackTrace();  
        }  
}

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

AuthCode.java

package com.captcha;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.util.Random;

/**
 * 验证码生成类
 * @author zhangqi
 */
public class AuthCode {

public static final int AUTHCODE_LENGTH = 7;        //验证码长度  
    public static final int SINGLECODE_WIDTH = 15;  //单个验证码宽度  
    public static final int SINGLECODE_HEIGHT = 30; //单个验证码高度  
    public static final int SINGLECODE_GAP = 4;     //单个验证码之间间隔  
    public static final int IMG_WIDTH = AUTHCODE_LENGTH * (SINGLECODE_WIDTH + SINGLECODE_GAP);  
    public static final int IMG_HEIGHT = SINGLECODE_HEIGHT;  

    /**
     * 获取验证码方法
     * @return 
     */
    public static String getAuthCode() {  
        String authCode = "";  
        for(int i = 0; i < AUTHCODE_LENGTH; i++) {  
            authCode += (new Random()).nextInt(10);  
        }  
        return authCode;  
    }  

    /**
     * 验证码图片流生成
     * @param authCode
     * @return
     */
    public static BufferedImage getAuthImg(String authCode) {  
        //设置图片的高、宽、类型  
        //RGB编码：red、green、blue  
        BufferedImage img = new BufferedImage(IMG_WIDTH, IMG_HEIGHT, BufferedImage.TYPE_INT_BGR);  
        //得到图片上的一个画笔  
        Graphics g = img.getGraphics();  
        //设置画笔的颜色，用来做背景色  
        g.setColor(Color.YELLOW);  
        //用画笔来填充一个矩形，矩形的左上角坐标，宽，高  
        g.fillRect(0, 0, IMG_WIDTH, IMG_HEIGHT);  
        //将画笔颜色设置为黑色，用来写字  
        g.setColor(Color.black);  
        //设置字体：斜体、字号  
        g.setFont(new Font(null, Font.ITALIC, 30));  

        //输出数字  
        char c;  
        for(int i = 0; i < authCode.toCharArray().length; i++) {  
            //取到对应位置的字符  
            c = authCode.charAt(i);  
            //画出一个字符串：要画的内容，开始的位置，高度  
            g.drawString(c + "", i * (SINGLECODE_WIDTH + SINGLECODE_GAP)+ SINGLECODE_GAP / 2, IMG_HEIGHT);  
        }  
        Random random = new Random();  
        //干扰素  
        for(int i = 0; i < 20; i++) {  
            int x = random.nextInt(IMG_WIDTH);  
            int y = random.nextInt(IMG_HEIGHT);  
            int x2 = random.nextInt(IMG_WIDTH);  
            int y2 = random.nextInt(IMG_HEIGHT);  
            g.drawLine(x, y, x + x2, y + y2);  
        }  
        return img;  
    }  
}

服务启动后验证结果

初始页面验证码

页面验证码及刷新demo

点击看不清之后

页面验证码及刷新demo

同时查看下后台的验证码打印情况

页面验证码及刷新demo

说明验证码输出无误。

注意事项：

开发过程中，最初的验证码重刷的js方法如下

<script>  
    function refresh() { 
        document.getElementById("authImg").src = "captcha.do";
    }  
</script>

在点击看不清时，就是无法请求到后台的新验证码；在查看网络请求时，发现js并未向后台发送请求。

搜查原因后发现，这种写法，每次都向后台发送同样的请求，浏览器会先从浏览器缓存中获取结果文件，由于页面初始化时向后台请求过一次验证码，导致后续的每次重刷都是取到前一次的验证码结果，即页面初始化的验证码结果。

解决此问题的根本，便是告诉浏览器，重刷时的请求和之前的请求是不同的请求，加一个时间戳或随机数便可以了。

所以，便有了上面的

<script>  
    function refresh() { 
        document.getElementById("authImg").src = "captcha.do?time=" + new Date().getTime();
    }  
</script>

好了，这个demo就到这里了，欢迎沟通学习。

秒客网

页面验证码及刷新demo

相关文章