码迷,mamicode.com
首页 > 编程语言 > 详细

Spring-Boot集成kaptcha实现表单图片验证

时间:2019-04-09 14:03:31      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:boot   输出流   alt   contex   一个   对象   hal   eth   等等   

Kaptcha是一个基于SimpleCaptcha的验证码开源项目,Kaptcha的使用比较方便,只需添加jar包依赖之后简单地配置就可以使用了。

添加依赖

如果你使用maven来统一管理jar包,则在工程的pom.xml中添加dependency

<dependency>  
    <groupId>com.google.code.kaptcha</groupId>  
    <artifactId>kaptcha</artifactId>  
    <version>2.3.2</version>  
</dependency>

如果是非maven管理的项目,则直接在官网下载kaptcha的jar包,然后添加到项目lib库中,下载地址:

Kaptcha

原理

  • 后台生成验证码图片,将图片传到前台。
  • 后台在session中保存验证码内容。
  • 前台输入验证码后传到后台在后台取出session中保存的验证码进行校验。

注意,验证码的明文是不能传送到前端的。前端内容都是透明的,不安全。验证码是用来防机器人并不是单单防人。如果把验证码明文传到前端很容易就会被破解。

图片验证码的配置类KaptchaConfig

定义图片的信息,包括边框,颜色等等

import org.springframework.stereotype.Component;

import java.util.Properties;

import org.springframework.context.annotation.Bean;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;

/**
 * @program: component
 * @author: ***
 * @description: 这是图片验证的配置类
 * @create: 2019/4/5 10:51
 **/
@Component
public class KaptchaConfig {

    @Bean
    public DefaultKaptcha getDefaultKaptcha() {
        com.google.code.kaptcha.impl.DefaultKaptcha defaultKaptcha = new com.google.code.kaptcha.impl.DefaultKaptcha();
        Properties properties = new Properties();
        // 图片边框
        properties.setProperty("kaptcha.border", "yes");
        // 边框颜色
        properties.setProperty("kaptcha.border.color", "105,179,90");
        // 字体颜色
        properties.setProperty("kaptcha.textproducer.font.color", "red");
        // 图片宽
        properties.setProperty("kaptcha.image.width", "110");
        // 图片高
        properties.setProperty("kaptcha.image.height", "40");
        // 字体大小
        properties.setProperty("kaptcha.textproducer.font.size", "30");
        // session key
        properties.setProperty("kaptcha.session.key", "code");
        // 验证码长度
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        // 字体
        properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
        Config config = new Config(properties);
        defaultKaptcha.setConfig(config);

        return defaultKaptcha;
    }
}

KaptchaController类实现图片的生成与校验

首先一定要注入验证码工具 DefaultKaptcha

@Autowired
    DefaultKaptcha defaultKaptcha;

import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import com.google.code.kaptcha.impl.DefaultKaptcha;

/**
 * @program: component
 * @author: ***
 * @description: Kaptcha控制
 * @create: 2019/4/5 10:54
 **/
@Controller
public class KaptchaController {
    /**
     * 1、验证码工具
     */
    @Autowired
    DefaultKaptcha defaultKaptcha;

    /**
     * 2、生成验证码
     *
     * @param httpServletRequest
     * @param httpServletResponse
     * @throws Exception
     */
    @RequestMapping("/defaultKaptcha")
    public void defaultKaptcha(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse)
            throws Exception {
        byte[] captchaChallengeAsJpeg = null;
        ByteArrayOutputStream jpegOutputStream = new ByteArrayOutputStream();
        try {
            // 生产验证码字符串并保存到session中
            String createText = defaultKaptcha.createText();
            httpServletRequest.getSession().setAttribute("rightCode", createText);
            // 使用生产的验证码字符串返回一个BufferedImage对象并转为byte写入到byte数组中
            BufferedImage challenge = defaultKaptcha.createImage(createText);
            ImageIO.write(challenge, "jpg", jpegOutputStream);
        } catch (IllegalArgumentException e) {
            httpServletResponse.sendError(HttpServletResponse.SC_NOT_FOUND);
            return;
        }

        // 定义response输出类型为image/jpeg类型,使用response输出流输出图片的byte数组
        captchaChallengeAsJpeg = jpegOutputStream.toByteArray();
        httpServletResponse.setHeader("Cache-Control", "no-store");
        httpServletResponse.setHeader("Pragma", "no-cache");
        httpServletResponse.setDateHeader("Expires", 0);
        httpServletResponse.setContentType("image/jpeg");
        ServletOutputStream responseOutputStream = httpServletResponse.getOutputStream();
        responseOutputStream.write(captchaChallengeAsJpeg);
        responseOutputStream.flush();
        responseOutputStream.close();
    }

    /**
     * 3、校对验证码
     *
     * @param httpServletRequest
     * @param httpServletResponse
     * @return
     */
    @RequestMapping("/imgvrifyControllerDefaultKaptcha")
    public ModelAndView imgvrifyControllerDefaultKaptcha(HttpServletRequest httpServletRequest,
                                                         HttpServletResponse httpServletResponse) {
        ModelAndView andView = new ModelAndView();
        String rightCode = (String) httpServletRequest.getSession().getAttribute("rightCode");
        String ClientCode = httpServletRequest.getParameter("ClientCode");
//        rightCode是生成码,ClientCode是表单提交码
        System.out.println("rightCode:" + rightCode + " ———— ClientCode:" + ClientCode);
        if (!rightCode.equals(ClientCode)) {
            andView.addObject("info", "验证码错误");
            andView.setViewName("index");
        } else {
            andView.addObject("info", "登录成功");
            andView.setViewName("success");
        }
        return andView;
    }

    @RequestMapping("/toIndex")
    public String toIndex() {
        return "index";
    }
}

前端页面Login.html

简单的一个表单就可以,此处需要注意几点:

  1. onclick="this.src=‘defaultKaptcha?d=‘+new Date()*1" //每次点击图片是刷新图片,重新生成图片
  2. src="defaultKaptcha" // 访问controller中的验证方法




    技术图片


实现的效果

Spring-Boot集成kaptcha实现表单图片验证

标签:boot   输出流   alt   contex   一个   对象   hal   eth   等等   

原文地址:https://www.cnblogs.com/jeemia/p/10676354.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!