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

最新推荐文章于 2024-06-25 19:37:05 发布

XWJCoding

最新推荐文章于 2024-06-25 19:37:05 发布

阅读量5.1k

点赞数 1

分类专栏： springmvc

本文链接：https://blog.csdn.net/chengxuzaza/article/details/60884957

版权

springmvc 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

导包：

 <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类

/**
 * 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函数的作用是当点击验证码图片的时候会更新验证码

<%@ 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的登录认证

 @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";
    }

XWJCoding

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC集成开源的验证码框架Kaptcha实现验证码效果

流程：本项目是通过maven创建的，首先需要导入Kaptcha的jar包，然后在spring中配置Kaptcha的属性，还需要实现一个生成验证码的controller类，最后在前端显示。导包： com.github.penggle kaptcha 2.3.2 配置Kaptcha的spring文件，我这里是新建一个spring-Kap
复制链接

扫一扫

专栏目录