前端图形验证码小结

概述: 四位的图形验证码,由阿拉伯数字及大小写字母组成

前端代码:

js文件:

$(function () {

    //验证码的点击刷新
    $("#imgCode").click(function () {
        this.src = basePath + "/loan/jcaptcha/captcha?time=" + Date.now();
    });

});

html文件

<div class="login-yzm">
		     <div id="showCaptcha" class="yzm-box" style="display:block;">
			 	<input id="captcha" type="text" class="yzm" placeholder="点击右侧图片可刷新"/>
			 	<img th:src="@{/loan/jcaptcha/captcha}" id="imgCode" style="cursor:pointer;border:0; display:inline;vertical-align:middle;"/>
		     </div>
		     <ul><li id="showId" style="color:red;font-size:12px;width:222px;margin-top:10px;margin-bottom:10px;line-height:18px;"></li></ul>
		     </div>

效果简述:进入登录页面的时候,会自动生成一个图形验证码(HTML代码实现).点击图形验证码,会进行刷新(JS代码实现,主要是加上了一个时间戳,让src访问的资源进行变化,可以再次访问后台加载静态资源).

后端:

 //图形验证码
    private static final int WIDTH = 120;
    /**
     * 图片高度： 50px
     */
    private static final int HEIGHT = 50;
    /**
     * 处理图片验证码方法
     *
     * @param request
     * @param response
     */
    @RequestMapping(value="/jcaptcha/captcha")
    public void handleCaptchaRequest(HttpServletRequest request, HttpServletResponse response) {

        //生成 4 位随机验证码
        String captcha = this.getRandomCode(4);
        //将生成的验证码放入Session作用域中,等待与前端输入的数据进行验证
        request.getSession().setAttribute("verificationCode",captcha);
        try {
            //创建字节数组输出流
            ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream();
            //创建图片缓存对象,BufferedImage.TYPE_INT_RGB ： 表示一个图像，该图像具有整数像素的 8 位 RGB 颜色
            BufferedImage bufferedImage = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
            //获取图片的画布
            Graphics graphics = bufferedImage.getGraphics();
            //设置画布背景色
            graphics.setColor(Color.GREEN);
            //设置画布填充区域
            graphics.fillRect(0, 0, WIDTH, HEIGHT);
            //边框区域
            graphics.drawRect(1, 1, WIDTH - 2, HEIGHT - 2);
            //设置字体颜色
            graphics.setColor(Color.BLACK);
            //设置字体样式
            graphics.setFont(new Font("微软雅黑", Font.ITALIC, 32));
            //填充数据
            graphics.drawString(captcha, 10, 38);
            //将生成的验证码存放到 session 中
            request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, captcha);
            ImageIO.write(bufferedImage, "jpeg", jpegOutputStream);
            byte[] captchaChallengeAsJpeg = jpegOutputStream.toByteArray();
            //将验证码输出到页面
            response.setHeader("Cache-Control", "no-store");
            response.setHeader("Pragma", "no-cache");
            response.setDateHeader("Expires", 0L);
            response.setContentType("image/jpeg");
            ServletOutputStream respOs = response.getOutputStream();
            respOs.write(captchaChallengeAsJpeg);
            respOs.flush();
            respOs.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    /**
     * 生成 0-9 ， a-z,A-Z 的随机字符串
     * @param count
     * @return
     */
    private String getRandomCode(int count) {
        String[] array =
                {"A","B","C","D","E","F","G","H","I","J","K","L","M","N",
                        "O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b",
                        "c","d","e","f","g","h","i","j","k","l","m","n","o","p",
                        "q","r","s","t","u","v","w","x","y","z","0","1","2","3",
                        "4","5","6","7","8","9"};
        StringBuilder result = new StringBuilder();
        for (int i = 0; i < count; i++) {
            //生成一个下标 0-61 之间一个整数
            Random random = new Random();
            int index = random.nextInt(62);
            //从 array 数组中获取该下标字符放到 result 中
            result.append(array[index]);
        }
        return result.toString();
    }

@RequestMapping("/checkLogin.do")
    @ResponseBody
    public BaseResult checkLogin(String phone,String md5Password,String verificationCode,HttpSession session){
		//从Session中获取验证码和参数接收到的验证码进行比对
		//验证码不通过直接返回错误信息:"验证码错误"
		//验证码通过,再验证账号密码,通过则登录,不通过则返回"账号或密码错误"
        String verificationCodeSession = (String) session.getAttribute("verificationCode");
        if(verificationCode.equalsIgnoreCase(verificationCodeSession)){
            User user = userService.checkLogin(phone,md5Password);
            Double availableMoney = null;
            if(user != null){
                availableMoney = userService.getUserAvaliableMoneyByUid(user.getId());
                session.setAttribute(Constant.LOGIN_USER,user);
                session.setAttribute("availableMoney",availableMoney);
                return BaseResult.success();
            }
            return BaseResult.error("账号或密码错误");
        }
        return BaseResult.error("验证码错误");
    }