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

来源：互联网发布：盲源分离理论与算法编辑：程序博客网时间：2024/06/10 01:40

本项目是通过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="看不清，点击换一张" onclick="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";     }

阅读全文

0 0