成都创新互联网站制作重庆分公司

如何在spring中使用kaptcha实现验证码

本篇文章给大家分享的是有关如何在spring中使用kaptcha实现验证码,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

创新互联长期为近1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为宁城企业提供专业的成都网站设计、做网站,宁城网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

 一、搭骨架

1、添加依赖:


  
   com.github.penggle
   kaptcha
   2.3.2
  

要使用kaptcha验证码,除了spring和mybatis那些依赖,只需引入这一个即可。

2、完善配置文件

①spring-dao.xml


 
 
 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
 
 

 
 
  
  
  
  
  
  
  
 

 
 
  
  
 

②spring-service.xml


 
 
 
 
  
 
 
 
 

③spring-web.xml


  
  
  
   
   
     
     
   
  
  
  
  

④web.xml


    spring-dispatcher
    org.springframework.web.servlet.DispatcherServlet
    
      contextConfigLocation
      classpath:spring/spring-*.xml
    
  
  
    spring-dispatcher
    /
  

  
  
    encodingFilter
    org.springframework.web.filter.CharacterEncodingFilter
    true
    
      encoding
      UTF-8
    
  
  
    encodingFilter
    /*
  

至此,骨架就搭起来了,接下来完成对数据库的操作。

二、对数据库的操作

1、entity层

User.java

public class User {
  private int uid;
  private String userName;
  private String passWord;
}

2、dao层

UserDao.java

public interface UserDao {
  User findUserByUserName(String userName);

}

UserDao.xml





  
    SELECT *
    FROM tb_user
    WHERE
    user_name=#{userName}
  

3、service层

UserServiceImpl.java

@Service
public class UserServiceImpl implements UserService {

  @Autowired
  private UserDao userDao;

  @Override
  public boolean login(String userName, String passWord) {
    User user = userDao.findUserByUserName(userName);
    if (passWord.equals(user.getPassWord())) {
      return true;
    } else {
      return false;
    }
  }
}

注:写到dao层和service层应该做一下Junit测试,测试比较简单,这里就不做说明了。

三、整合kaptcha

方式一、通过spring-kaptcha.xml配置

1、在resources的spring文件夹下新建 spring-kaptcha.xml配置文件,内容如下:

spring-kaptcha.xml


    
      
        
          
            yes
            105,179,90
            blue
            125
            45
            45
            code
            4
            宋体,楷体,微软雅黑
          
        
      
    
  

注:这个bean就是配置了一些验证码的属性,也可以直接写在spring-web.xml中,根据个人习惯,我喜欢把不同模块的配置写在不同的文件中。

2、新建一个controller用于生成验证码

CodeController.java

@Controller
public class CodeController {
  @Autowired
  private Producer captchaProducer = null;
  @RequestMapping("/kaptcha")
  public void getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {
    HttpSession session = request.getSession();
    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 = captchaProducer.createText();
    session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
    //向客户端写出
    BufferedImage bi = captchaProducer.createImage(capText);
    ServletOutputStream out = response.getOutputStream();
    ImageIO.write(bi, "jpg", out);
    try {
      out.flush();
    } finally {
      out.close();
    }
  }

}

注意:这个controller的路由为“kaptcha”,那么等下前端验证码的src就为kaptcha.jpg 。

3、新建一个工具类用于比对验证码

CodeUtil.java

public class CodeUtil {
  /**
   * 将获取到的前端参数转为string类型
   * @param request
   * @param key
   * @return
   */
  public static String getString(HttpServletRequest request,String key) {
    try {
      String result = request.getParameter(key);
      if(result != null) {
        result = result.trim();
      }
      if("".equals(result)) {
        result = null;
      }
      return result;
    }catch(Exception e) {
      return null;
    }
  }
  /**
   * 验证码校验
   * @param request
   * @return
   */
  public static boolean checkVerifyCode(HttpServletRequest request) {
    //获取生成的验证码
    String verifyCodeExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
    //获取用户输入的验证码
    String verifyCodeActual = CodeUtil.getString(request, "verifyCodeActual");
    if(verifyCodeActual == null ||!verifyCodeActual.equals(verifyCodeExpected)) {
      return false;
    }
    return true;
  }
}

注意:这里get传的参数名为“verifyCodeActual”,那么等下在页面中验证码的name值也得为这个。

接下来就可以使用验证码了!

4、用户登录的Controller

UserController.java

@Controller
@RequestMapping("/user")
public class UserController {

  @Autowired
  private UserService userService;

  @RequestMapping("/login")
  public String login(@RequestParam("userName") String userName, @RequestParam("passWord") String passWord,
      HttpServletRequest request) {
    boolean result = userService.login(userName, passWord);
    if (!CodeUtil.checkVerifyCode(request)) {
      request.setAttribute("codeErr", "验证码有误!");
      return "fail";
    } else {
      if (result) {
        request.setAttribute("user", userName);
        return "success";
      } else {
        request.setAttribute("errMsg", "用户名或密码错误!");
        return "fail";
      }
    }
  }
}

注:这里调用CodeUtil工具类比对输入的验证码是否正确。

5、前端页面

login.jsp

<%@ page language="java" import="java.util.*"
  contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>




登录 


     function refresh() {
      document.getElementById('captcha_img').src="kaptcha.jpg?"+Math.random();
     }   





  
    userName: 
    password:
    验证码: 
        
          
          
              

success.jsp


  

欢迎登录,${user}

fail.jsp


  对不起,登录失败,原因:
 ${codeErr}   

${errMsg}

注:login.jsp的js代码是完成“点击更换”功能;注意验证码的name要和传入工具类中的名字一样,src就是生成验证码的controller路由加上.jpg。

6、测试:

输入正确的验证码:

如何在spring中使用kaptcha实现验证码

登录成功:

如何在spring中使用kaptcha实现验证码

输入错误的验证码:

如何在spring中使用kaptcha实现验证码

页面显示验证码有误:

如何在spring中使用kaptcha实现验证码

点击验证码可以更换!

 方式二、在web.xml中配置验证码

相比于方式一,一增二减。

减:

1、在上面那个项目的基础上,把 CodeController.java删掉

2、把 spring-kaptcha.xml删掉,其他的保留。

增:

1、在 web.xml添加如下配置:


  
    Kaptcha
    com.google.code.kaptcha.servlet.KaptchaServlet
    
    
      kaptcha.border
      no
    
    
    
      kaptcha.textproducer.font.color
      black
    
    
    
      kaptcha.image.width
      135
    
    
    
      kaptcha.textproducer.char.string
      ACDEFHKPRSTWX345679
    
    
    
      kaptcha.image.height
      50
    
    
    
      kaptcha.textproducer.font.size
      43
    
    
    
      kaptcha.noise.color
      red
    
    
    
      kaptcha.textproducer.char.length
      4
    
    
    
      kaptcha.textproducer.font.names
      Arial
    
  
  
    Kaptcha
    /kaptcha.jpg
  

注:这段配置就是用来配置验证码的,注意最后的 /kaptcha.jpg 要与验证码中的 src = "kaptcha.jpg" 对应。

这样就完成了验证码的配置,接下来测试。 测试:

输入错误的验证码:

如何在spring中使用kaptcha实现验证码

页面显示验证码错误:

如何在spring中使用kaptcha实现验证码

输入正确的验证码:

如何在spring中使用kaptcha实现验证码

登录成功:

如何在spring中使用kaptcha实现验证码

测试通过!

 总结:

1、在页面中加验证码很简单,只需要添加 即可。用一个img标签,然后通过src指向生成验证码的controller的路由加上 .jpg(验证码用spring方式配置),或者通过src指向

/kaptcha.jpg ,即 src="kaptcha.jpg"

2、点击更换也简单,就是给img标签加一个onclick事件,然后用js完成。

点击更换的js:


     function refresh() {
      document.getElementById('captcha_img').src="kaptcha.jpg?"+Math.random();
     }   

然后在img标签中加上 onclick="refresh()" ,这样就完成了这个点击事件。

3、更多kaptcha属性的配置

Constant描述默认值
kaptcha.border图片边框,合法值:yes , noyes
kaptcha.border.color边框颜色,合法值: r,g,b (and optional alpha) 或者 white,black,blue.black
kaptcha.border.thickness边框厚度,合法值:>01
kaptcha.image.width图片宽200
kaptcha.image.height图片高50
kaptcha.producer.impl图片实现类com.google.code.kaptcha.impl.DefaultKaptcha
kaptcha.textproducer.impl文本实现类com.google.code.kaptcha.text.impl.DefaultTextCreator
kaptcha.textproducer.char.string文本集合,验证码值从此集合中获取abcde2345678gfynmnpwx
kaptcha.textproducer.char.length验证码长度5
kaptcha.textproducer.font.names字体Arial, Courier
kaptcha.textproducer.font.size字体大小40px.
kaptcha.textproducer.font.color字体颜色,合法值: r,g,b  或者 white,black,blue.black
kaptcha.textproducer.char.space文字间隔2
kaptcha.noise.impl干扰实现类com.google.code.kaptcha.impl.DefaultNoise
kaptcha.noise.color干扰 颜色,合法值: r,g,b 或者 white,black,blue.black
kaptcha.obscurificator.impl图片样式: 
 水纹com.google.code.kaptcha.impl.WaterRipple 
 鱼眼com.google.code.kaptcha.impl.FishEyeGimpy
 阴影com.google.code.kaptcha.impl.ShadowGimpy
com.google.code.kaptcha.impl.WaterRipple
kaptcha.background.impl背景实现类com.google.code.kaptcha.impl.DefaultBackground
kaptcha.background.clear.from背景颜色渐变,开始颜色light grey
kaptcha.background.clear.to背景颜色渐变, 结束颜色white
kaptcha.word.impl文字渲染器com.google.code.kaptcha.text.impl.DefaultWordRenderer
kaptcha.session.keysession keyKAPTCHA_SESSION_KEY
kaptcha.session.datesession dateKAPTCHA_SESSION_DATE

以上就是如何在spring中使用kaptcha实现验证码,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


分享文章:如何在spring中使用kaptcha实现验证码
文章链接:http://cxhlcq.com/article/ighoeg.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部