基于Servlet的验证码技术

基于Servlet的验证码技术

原理：验证码Servlet产生随机字符，保存到Session中，以后从Session中获取这个随机字符和用户输入进行比对。

第一步：产生随机验证码工具Servlet（要求能够看懂核心代码）：

@WebServlet(urlPatterns = "/verifyCodeController")
public class VerifyCodeController extends HttpServlet {

    // 常用字符集
    private char[] data = "abcdefghijklmnopqrstuvwxyz0123456789目日口田山人口手士".toCharArray();
    //随机验证码胡Session中的名称
    private String VERIFY_CODE_NAME = "verifyCode";

    public static final int WIDTH = 120;
    public static final int HEIGHT = 30;


    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }


    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);// 创建缓存

        Graphics graphics = image.getGraphics();// 获得画布
        setBackGround(graphics);// 设置背影色
        setBorder(graphics);// 设置边框
        drawRandomLine(graphics);// 画干扰线
        String random = drawRandomNum((Graphics2D) graphics);// 写随机数
        System.out.println("验证码：" + random);
        request.getSession().setAttribute(VERIFY_CODE_NAME, random); //核心代码：将随机字符存在session中
        response.setContentType("image/jpeg");// 将图形写给浏览器
        // 发头控制浏览器不要缓存
        response.setDateHeader("expries", -1);
        response.setHeader("Cache-Control", "no-cache");
        response.setHeader("Pragma", "no-cache");

        ImageIO.write(image, "jpg", response.getOutputStream());// 将图片写给浏览器
    }


    // 设置背景色
    private void setBackGround(Graphics g) {
        g.setColor(Color.WHITE);// 设置颜色
        g.fillRect(0, 0, WIDTH, HEIGHT);// 填充区域

    }


    //设置边框
    private void setBorder(Graphics g) {
        g.setColor(Color.BLUE);// 设置边框颜色
        g.drawRect(1, 1, WIDTH - 2, HEIGHT - 2);// 边框区域
    }


    // 画随机线条
    private void drawRandomLine(Graphics g) {
        g.setColor(Color.GREEN);// 设置颜色
        for (int i = 0; i 
    
        
        Title 
        
        
            url = "verifyCodeController";
            function reloadVerifyCode() {//点击换一张验证码
                var imgSrc = $("#veryCodeImg");
                var url = imgSrc.attr("src");
                imgSrc.attr("src", function () { //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳
                    var timestamp = (new Date()).valueOf();
                    url = url + "?timestamp=" + timestamp;
                    return url;
                });
                $("#info").html("");
            }
    
            function ReloadCode() {
                var time = new Date();
                document.getElementById("imagecode").src = "/servlet/ImageServlet?d=" + time;
            }
    
            function checkVerifyCode() {       //验证码验证
                var code0 = $("#verifyCodeInput").val();
                $.ajax({ //用ajax验证随机数字是否正确
                    type: "POST",
                    url: 'loginServlet?op=checkVerifyCode',
                    data: {code0 : code0},
                    success: function (data) {  //验证以后处理提交信息或错误信息
                        if (data.toString() == "match") {
                            $("#info123").html("验证码正确");
                        } else {
                            $("#info123").html("验证码不正确");
                        }
                    }
                });
            }
        
    
    
        
            
            
            
            验证码：