验证码在登录页面的使用

效果：

1，打开登录页面时，4位验证码的图片位置，去后台加载图片回来，其中生成了4位验证码放到session中，登录时在session中获取。

2，点击登录，在session中获取验证码，进行验证。

二、demo:

jsp代码：

<p class="login_field">
                                    <span>
                                        <input type="text" id="user_vcode" name="user_vcode" placeholder="验证码" maxlength="4" class="login_field_input login_input_code">
                                    </span>
                                    <span class="code_img">
                                        <img src="${ctx }/verify/verifyCode" width="110" height="40" id="verifyCodeImage">
                                        <input id="user_des_code" name="user_des_code" type="hidden">
                                    </span>
                                    <span>
                                        <a id="changeVerifImageRegister" onclick="javascript:changeImage();" class="code_change">换一张</a>
                                    </span>
                                </p>

换一张的js方法：

// 验证码刷新控制
        function changeImage() {
            $('#verifyCodeImage').attr('src',
                    '${ctx }/verify/verifyCode?timestamp=' + Math.floor(Math.random() * 100));
        }

后台java代码：

@RequireNoLogin
    @RequestMapping(value = "/verifyCode")
    public void verifyCode(HttpServletRequest req, HttpServletResponse resp, String serialNo)
            throws ServletException, java.io.IOException {
        init();
        // 定义图像buffer
        BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = buffImg.createGraphics();
        // 创建一个随机数生成器类
        Random random = new Random();
        // 将图像填充为白色
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, width, height);
        // 创建字体，字体的大小应该根据图片的高度来定。
        Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);
        // 设置字体。
        g.setFont(font);
        // 画边框。
        // g.setColor(Color.BLACK);
        g.drawRect(0, 0, width - 1, height - 1);
        // 随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。
        g.setColor(Color.BLACK);
        for (int i = 0; i < 10; i++) {
            int x = random.nextInt(width);
            int y = random.nextInt(height);
            int xl = random.nextInt(12);
            int yl = random.nextInt(12);
            g.drawLine(x, y, x + xl, y + yl);
        }
        // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
        StringBuffer randomCode = new StringBuffer();
        int red = 0, green = 0, blue = 0;
        // 随机产生codeCount数字的验证码。
        for (int i = 0; i < codeCount; i++) {
            // 得到随机产生的验证码数字。
            String strRand = String.valueOf(codeSequence[random.nextInt(10)]);
            // 产生随机的颜色分量来构造颜色值，这样输出的每位数字的颜色值都将不同。
            red = random.nextInt(198);
            green = random.nextInt(233);
            blue = random.nextInt(109);
            // 用随机产生的颜色将验证码绘制到图像中。
            g.setColor(new Color(red, green, blue));
            g.drawString(strRand, (i + 1) * x, codeY);
            // 将产生的四个随机数组合在一起。
            randomCode.append(strRand);
        }
        // 将四位数字的验证码保存到Session中。
        HttpSession session = req.getSession();
        session.setAttribute(UPSConstant.VALIDATECODE, randomCode.toString());
        //indexRedisService.setMess2Reids(UPSConstant.VALIDATECODE + "-" + serialNo, randomCode.toString());
        // 禁止图像缓存。
        resp.setHeader("Pragma", "no-cache");
        resp.setHeader("Cache-Control", "no-cache");
        resp.setDateHeader("Expires", 0);
        resp.setContentType("image/jpeg");
        // 将图像输出到Servlet输出流中。
        ServletOutputStream sos = resp.getOutputStream();
        ImageIO.write(buffImg, "jpeg", sos);
        sos.close();
    }

验证码在登录页面的使用

推荐阅读