开源的验证码框架Kaptcha实现验证码效果

本项目是通过maven创建的，首先需要导入Kaptcha的jar包，然后在spring中配置Kaptcha的属性，还需要实现一个生成验证码的controller类，最后在前端显示。pom.xml导包：com.github.pengglekaptcha2.3.2配置Kaptcha的spring文件，我这里是新建一个sprin

文章共1,406字 · 阅读需要大约5分钟

一键AI生成摘要，助你高效阅读

问答

Sunshine_du

5793人浏览 · 2017-11-25 12:37:14

Sunshine_du · 2017-11-25 12:37:14 发布

本项目是通过maven创建的，首先需要导入Kaptcha的jar包，然后在spring中配置Kaptcha的属性，还需要实现一个生成验证码的controller类，最后在前端显示。

pom.xml导包：

<dependency>  
     <groupId>com.github.penggle</groupId>  
     <artifactId>kaptcha</artifactId>  
     <version>2.3.2</version>  
   </dependency>

配置 Kaptcha的 spring文件，我这里是新建一个spring- Kaptcha.xml文件

<bean id="defaultKaptcha" class="com.google.code.kaptcha.impl.DefaultKaptcha">  
        <property name="config">  
            <bean class="com.google.code.kaptcha.util.Config">  
                <constructor-arg>  
                    <props>  
                        <!-- 验证码宽度 -->  
                        <prop key="kaptcha.image.width">110</prop>  
                        <!-- 验证码高度 -->  
                        <prop key="kaptcha.image.height">50</prop>  
                        <!-- 生成验证码内容范围 -->  
                        <prop key="kaptcha.textproducer.char.string">0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ</prop>  
                        <!-- 验证码个数 -->  
                        <prop key="kaptcha.textproducer.char.length">4</prop>  
                        <!-- 是否有边框 -->  
                        <prop key="kaptcha.border">no</prop>  
                        <!-- 边框颜色 -->  
                        <prop key="kaptcha.border.color">105,179,90</prop>  
                        <!-- 边框厚度 -->  
                        <prop key="kaptcha.border.thickness">1</prop>  
                        <!-- 验证码字体颜色 -->  
                        <prop key="kaptcha.textproducer.font.color">black</prop>  
                        <!-- 验证码字体大小 -->  
                        <prop key="kaptcha.textproducer.font.size">30</prop>  
                        <!-- 验证码所属字体样式 -->  
                        <prop key="kaptcha.textproducer.font.names">楷体</prop>  
                        <!-- 干扰线颜色 -->  
                        <prop key="kaptcha.noise.color">black</prop>  
                        <!-- 验证码文本字符间距 -->  
                        <prop key="kaptcha.textproducer.char.space">3</prop>  
                        <!-- 图片样式 :阴影-->  
                        <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.ShadowGimpy</prop>  
                    </props>  
                </constructor-arg>  
            </bean>  
        </property>  
    </bean>  

实现一个生成验证码的controller类
[java] view plain copy
/** 
 * Created by xuweijie on 2017/3/8. 
 * 生成验证码Controller. 
 */  
@Controller  
public class CaptchaController {  
  
    private Producer kaptchaProducer=null;  
  
    @Autowired  
    public void setCaptchaProducer(Producer kaptchaProducer) {  
        this.kaptchaProducer = kaptchaProducer;  
    }  
  
    @RequestMapping("/kaptcha")  
    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception{  
        response.setDateHeader("Expires",0);  
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");  
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");  
        response.setHeader("Pragma", "no-cache");  
        response.setContentType("image/jpeg");  
        String capText = kaptchaProducer.createText();  
        request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);  
        BufferedImage bi = kaptchaProducer.createImage(capText);  
        ServletOutputStream out = response.getOutputStream();  
        ImageIO.write(bi, "jpg", out);  
        try {  
            out.flush();  
        } finally {  
            out.close();  
        }  
        return null;  
    }  
}  


前端：这里有的js函数的作用是当点击验证码图片的时候会更新验证码
[html] view plain copy
<%@ page contentType="text/html;charset=UTF-8" language="java" %>  
<html>  
<head>  
    <title>用户登录</title>  
    <script type="text/javascript">  
        function changeVerifyCode() {  
            var time=new Date().getTime();  
            document.getElementById("kaptchaImage").src="/kaptcha?d="+time;//为了不让验证码缓存，为了安全起见，需要次次都刷新  
        }  
    </script>  
</head>  
  
<body>  
<br><br><br>  
    <div align="center">  
        <h1>登录</h1>  
        <br><br><br>  
        <form action="/login" method="POST">  
            用  户  名：<input type="text" name="username" placeholder="请输入用户名"><br><br><br>  
            密      码：<input type="password" name="password" placeholder="请输入密码"><br><br>  
            验  证  码：<input type="text" name="verifyCode" placeholder="请输入验证码"/>  
            <img src="/kaptcha.jpg" id="kaptchaImage" title="看不清，点击换一张" οnclick="changeVerifyCode()"><br><br>  
            <input type="submit" value="登录">      <input type="reset" value="取消">  
        </form>  
    </div>  
</body>  
</html>  

最后一步就是做判断验证码输入正不正确啦，由于本项目集成了shiro，所以逻辑是当验证码通过后再去执行shiro的登录认证
[java] view plain copy
@RequestMapping(value = "/login",method = RequestMethod.POST)  
   public String login(HttpServletRequest request, Model model){  
       CustomException customException=null;  
       String verifyCode=request.getParameter("verifyCode").toUpperCase();  
       String username=request.getParameter("username");  
       String password=request.getParameter("password");  
       //判断验证码输入是否正确  
       if(verifyCode.equals(request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY))){  
           if((username!=null && password!=null)){  
               UsernamePasswordToken token=new UsernamePasswordToken(username,password);  
               Subject subject= SecurityUtils.getSubject();  
               try{  
                   subject.login(token);  
               }catch (AuthenticationException e){  
                   customException=new CustomException(e.getMessage());  
               }  
               if( subject.isAuthenticated()){  
                   subject.logout();  
                   model.addAttribute("username",username);  
                   return "/loginsuccess";  
               }else {  
                   model.addAttribute("exception",customException.getMessage());  
                   return "/refuse";  
               }  
           }  
       }else {  
           System.out.print("验证码输入不正确");  
       }  
       return "login";  
   }