备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

spring整合kaptcha验证码

2018-05-09 1126
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前言：验证码在项目肯定会用得到，本案例是在window上运行的，若kaptcha验证码在Linux上显示的是一堆乱码，可能是因为Linux没有中文字体库和中文字体造成的，可进行如下操作：1、判断有没有中文字体库：fc-list2、若没有就安装：yum -y install fontconfig安装成功后可以在/usr/share目录下看到fonts和fontconfig目录，之前是没有的。

前言：

验证码在项目肯定会用得到，本案例是在window上运行的，若kaptcha验证码在Linux上显示的是一堆乱码，可能是因为Linux没有中文字体库和中文字体造成的，可进行如下操作：
1、判断有没有中文字体库：
fc-list
2、若没有就安装：
yum -y install fontconfig
安装成功后可以在/usr/share目录下看到fonts和fontconfig目录，之前是没有的。接着在fonts目录下新建chinese目录。然后打开我们windows电脑C盘的windows/fonts目录，找到你需要安装的字体，上传到Linux的刚才新建的chinese目录下。
3、修改chinese目录的权限：
chmod -R 755 /usr/share/fonts/chinese
4、接下来安装ttmkfdir:
yum -y install ttmkfdir
5、然后执行ttmkfdir命令：
ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir
6、然后修改字体配置文件，新增内容如下图：
vim /etc/fonts/fonts.conf

img_0010f3c881652b7411ab1195ca7c4195.png
image.png

7、最后重启Linux服务器(网上说执行fc-cache就可以不用重启，你们可以自行测试，我测试是没用的)。

一、kaptcha简介:

kaptcha 是一个很有用的验证码生成工具，由于它有许多可配置项，所以用它可以简单快捷的生成各式各样的验证码。点我下载源码。

二、开发工具及使用的核心技术:

1、eclipse
2、mybatis
3、spring
4、springmvc
5、kaptcha

本文将介绍kaptcha两种使用方式:

方式一:在spring-kaptcha.xml中配置
方式二:在web.xml中配置

三、正式开始:

一、搭骨架

1、添加依赖:

<!-- 验证码 -->
        <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>

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

2、完善配置文件
①spring-dao.xml

<!-- 配置整合mybatis过程 -->
    
    <!-- 1、配置数据库相关参数properties的属性：${url} -->
    <context:property-placeholder location="classpath:jdbc.properties" />
    
    <!-- 2、配置数据库连接池 -->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <!-- 配置连接池属性 -->
        <property name="driverClass" value="${jdbc.driver}"/>
        <property name="jdbcUrl" value="${jdbc.url}"/>
        <property name="user" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        
        <!-- c3p0连接池的私有属性 -->
        <property name="maxPoolSize" value="30"/>
        <property name="minPoolSize" value="10"/>
        <!-- 关闭连接不自动commit -->
        <property name="autoCommitOnClose" value="false"/>
        <!-- 获取连接超时时间 -->
        <property name="checkoutTimeout" value="10000"/>
        <!-- 当获取连接失败时重试次数 -->
        <property name="acquireRetryAttempts" value="2"/>
    </bean>
    

    <!-- 3、配置mybatis的sqlSessionFactory -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource" />
        <!-- 自动扫描mappers.xml文件 -->
        <property name="mapperLocations" value="classpath:mappers/*.xml"/>
        <!-- mybatis配置文件 -->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <!-- 扫描entity包，使用别名 -->
        <property name="typeAliasesPackage" value="com.zhu.kaptcha.entity"></property>
    </bean>

    <!-- 4、DAO接口所在包名，Spring会自动查找其下的类 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.zhu.kaptcha.dao" />
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property>
    </bean>

②spring-service.xml

<!-- 扫描service包下所有使用注解的类型 -->
    <context:component-scan base-package="com.zhu.kaptcha.service"/>
    
    <!-- 事务管理 -->
    <bean id="transactionManager"
        class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource" />
    </bean>
    
    <!-- 配置基于注解的声明式事物 -->
    <tx:annotation-driven transaction-manager="transactionManager"/>

③spring-web.xml

 <!-- 配置springmvc -->
    <!-- 1、开启springMvc注解模式 -->
    <mvc:annotation-driven />
    
     <!--2、定义视图解析器 -->
     <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
         <property name="prefix" value="/"/>
         <property name="suffix" value=".jsp"/>
     </bean>
    
    
    <!-- 3、扫描web相关的bean -->
    <context:component-scan base-package="com.zhu.kaptcha.controller"/>

④web.xml

<servlet>
        <servlet-name>spring-dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring/spring-*.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>spring-dispatcher</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!-- 编码过滤器 -->
    <filter>
        <filter-name>encodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <async-supported>true</async-supported>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

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

二、对数据库的操作

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zhu.kaptcha.dao.UserDao">

    <select id="findUserByUserName" resultType="com.zhu.kaptcha.entity.User">
        SELECT *
        FROM tb_user
        WHERE
        user_name=#{userName}
    </select>

</mapper>

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

<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
        <property name="config">
            <bean class="com.google.code.kaptcha.util.Config">
                <constructor-arg>
                    <props>
                        <prop key="kaptcha.border">yes</prop>
                        <prop key="kaptcha.border.color">105,179,90</prop>
                        <prop key="kaptcha.textproducer.font.color">blue</prop>
                        <prop key="kaptcha.image.width">125</prop>
                        <prop key="kaptcha.image.height">45</prop>
                        <prop key="kaptcha.textproducer.font.size">45</prop>
                        <prop key="kaptcha.session.key">code</prop>
                        <prop key="kaptcha.textproducer.char.length">4</prop>
                        <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop>
                    </props>
                </constructor-arg>
            </bean>
        </property>
    </bean>

注:这个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"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>登录</title> 

<script type="text/javascript">
         function refresh() {
            document.getElementById('captcha_img').src="kaptcha.jpg?"+Math.random();
         }      
</script>

</head>

<body>
    <form action="${pageContext.request.contextPath }/user/login" method="post">
        userName:<input type="text" name="userName" /><br /> 
        password:<input type="password" name="passWord" /><br />
        验证码:  <input type="text" placeholder="请输入验证码" name="verifyCodeActual">
                <div class="item-input">
                   <img id="captcha_img" alt="点击更换" title="点击更换"
                        onclick="refresh()" src="kaptcha.jpg" />
                   </div>
                <input type="submit" value="登录" />
    </form>
    
</body>
</html>

success.jsp

<body>
   <h1>欢迎登录，${user}</h1>
</body>

fail.jsp

<body>
   对不起，登录失败，原因:<br>
  ${codeErr}
   <h2>${errMsg}</h2>
</body>

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

6、测试:
输入正确的验证码:

img_2c7e78ecff373315055844e33f52b300.png
图片发自简书App

登录成功:

img_fd7d5a0c4643c26ae70dd35011e7ffd2.png
图片发自简书App

输入错误的验证码:


img_61e2f5952d81862873317a876ad7587d.png
图片发自简书App

页面显示验证码有误:

img_e5e73417a48a39c76c197b8bd0db5872.png
图片发自简书App

点击验证码可以更换！

方式二、在web.xml中配置验证码：
相比于方式一，一增二减。
减:
1、在上面那个项目的基础上，把CodeController.java删掉。

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

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

<!-- 验证码 -->
    <servlet>
        <servlet-name>Kaptcha</servlet-name>
        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
        <!-- 是否有边框 -->
        <init-param>
            <param-name>kaptcha.border</param-name>
            <param-value>no</param-value>
        </init-param>
        <!-- 字体颜色 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.color</param-name>
            <param-value>black</param-value>
        </init-param>
        <!-- 图片宽度 -->
        <init-param>
            <param-name>kaptcha.image.width</param-name>
            <param-value>135</param-value>
        </init-param>
        <!-- 使用哪些字符生成验证码 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.string</param-name>
            <param-value>ACDEFHKPRSTWX345679</param-value>
        </init-param>
        <!-- 图片宽度 -->
        <init-param>
            <param-name>kaptcha.image.height</param-name>
            <param-value>50</param-value>
        </init-param>
        <!-- 字体大小 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.size</param-name>
            <param-value>43</param-value>
        </init-param>
        <!-- 干扰线 -->
        <init-param>
            <param-name>kaptcha.noise.color</param-name>
            <param-value>red</param-value>
        </init-param>
        <!-- 字符个数 -->
        <init-param>
            <param-name>kaptcha.textproducer.char.length</param-name>
            <param-value>4</param-value>
        </init-param>
        <!-- 字体 -->
        <init-param>
            <param-name>kaptcha.textproducer.font.names</param-name>
            <param-value>Arial</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/kaptcha.jpg</url-pattern>
    </servlet-mapping>

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

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

测试:

输入错误的验证码:


img_82ad1d0874d9c2a687d433f8274c0cb3.png
图片发自简书App

页面显示验证码错误:


img_e5e73417a48a39c76c197b8bd0db5872.png
图片发自简书App

输入正确的验证码:


img_e73fb495af4acbf6204dfa98ecbeecf1.png
图片发自简书App

登录成功:


img_fd7d5a0c4643c26ae70dd35011e7ffd2.png
图片发自简书App

测试通过！

总结:

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

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

<script type="text/javascript">
         function refresh() {
            document.getElementById('captcha_img').src="kaptcha.jpg?"+Math.random();
         }      
</script>

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

3、更多kaptcha属性的配置，请参考kaptcha详细配置表。

以上内容属于个人笔记整理，如有错误，欢迎批评指正！

文章标签：
Java
Spring
测试技术
前端开发
JavaScript
关键词：
Spring验证码
Spring kaptcha验证码
贪挽懒月
目录
相关文章
Bug哆哆
|
9月前
|
安全 Java Spring
SpringBoot整合Spring Security，使用Session方式的验证码（六）
这里用到了一个常量类，到时候做验证码判断时用的比较多：
Bug哆哆
89 0
肖宜
|
10月前
|
NoSQL Java Maven
spring整合验证码-牛客论坛
spring整合验证码-牛客论坛
肖宜
60 0
一一哥Sun
|
人工智能 安全 前端开发
Spring Security系列教程13--基于过滤器实现图形验证码
前言 在前两个章节中，一一哥 带大家学习了Spring Security内部关于认证授权的核心API，以及认证授权的执行流程和底层原理。掌握了这些之后，对于Spring Security，我们不仅做到了 "知其然"，而且也做到了 "知其所以然"！ 在现在的求职环境下，只知道某个技能点的用法是远远不够的，面试官会要求我们研究某个技术的底层实现原理，所以虽然前面的两章内容掌握起来很有难度，但是还是希望各位小伙伴结合源码认真研读，这样你才能在编程之路上走的更远更高！ 总是研究底层，对于我们初学者来说，既有难度，也会影响咱们的学习积极性，所以从本篇文章开始，咱们继续学习Spring Securit
一一哥Sun
311 0
IT觅语
|
NoSQL 前端开发 JavaScript
Spring Boot整合Kaptcha登录页实现验证码功能
Spring Boot整合Kaptcha登录页实现验证码功能
IT觅语
225 0
一一哥Sun
|
存储 安全 Java
Spring Security系列教程14--基于自定义的认证提供器实现图形验证码
前言 在上一个章节中，一一哥 带大家实现了如何在Spring Security中添加执行自定义的过滤器，进而实现验证码校验功能。这种实现方式，只是实现验证码功能的方式之一，接下来我们再学习另一种实现方式，就是利用AuthenticationProvider来实现验证码功能，通过这个案例，我们学习如何进行自定义AuthenticationProvider。 一. 认证提供器简介 在上一章节中，我带各位利用自定义的过滤器实现了图形验证码效果，接下来我们利用另一种方式，基于自定义的认证提供器来实现图形验证码。 1. 认证提供器AuthenticationProvider 在第11章节中，壹哥 给大家
一一哥Sun
226 0
不断前进的皮卡丘
|
前端开发 JavaScript Java
Spring Boot实现验证码功能
Spring Boot实现验证码功能
不断前进的皮卡丘
271 0
Spring Boot实现验证码功能
游客at5iuxxf3n33o
|
JavaScript 前端开发 Java
spring整合kaptcha验证码
验证码在项目肯定会用得到，本案例是在window上运行的，若kaptcha验证码在Linux上显示的是一堆乱码，可能是因为Linux没有中文字体库和中文字体造成的，可进行如下操作：
游客at5iuxxf3n33o
140 0
spring整合kaptcha验证码
技术小阿哥
|
前端开发 Java 程序员
Jpatchca与Spring MVC整合生成验证码
技术小阿哥
1088 0
aielves
|
Java Spring 数据格式
spring security3教程系列--扩展验证码
本文章摘编、转载需要注明来源 http://write.blog.csdn.net/postedit/8575482 security的登录参数验证主要是经过UsernamePasswo...
aielves
882 0
风水道人
|
22天前
|
Java 应用服务中间件 Maven
SpringBoot 项目瘦身指南
SpringBoot 项目瘦身指南
风水道人
38 0

热门文章

最新文章

  • 1
    【Springcloud Alibaba微服务分布式架构 | Spring Cloud】之学习笔记（八）Config服务配置+bus消息总线+stream消息驱动+Sleuth链路追踪
  • 2
    【Springcloud Alibaba微服务分布式架构 | Spring Cloud】之学习笔记（九）Nacos+Sentinel+Seata
  • 3
    Spring Cloud Alibaba 面试题及答案整理，最新面试题
  • 4
    Spring Cloud 面试题及答案整理，最新面试题
  • 5
    【构建一套Spring Cloud项目的大概步骤】&【Springcloud Alibaba微服务分布式架构学习资料】
  • 6
    Spring Security的授权管理器实现
  • 7
    Spring Boot 面试题及答案整理，最新面试题
  • 8
    Spring Security的授权&鉴权
  • 9
    Spring MVC 面试题及答案整理，最新面试题
  • 10
    【Springcloud Alibaba微服务分布式架构 | Spring Cloud】之学习笔记（一）基础知识+各个组件介绍+聚合父工程创建
  • 1
    spring cache整合redis实现springboot项目中的缓存功能
    45
  • 2
    Spring Boot整合Spring Security--学习笔记
    52
  • 3
    【spring（六）】WebSocket网络传输协议
    21
  • 4
    【spring（五）】SpringMvc总结 SSM整合流程
    30
  • 5
    【spring（一）】核心容器总结
    28
  • 6
    【spring（四）】Spring事务管理和@Transactional注解
    28
  • 7
    Spring Boot 4.0：构建云原生Java应用的前沿工具
    45
  • 8
    Java 新手如何使用Spring MVC 中的查询字符串和查询参数
    22
  • 9
    Spring 框架：企业级应用开发的强大工具
    23
  • 10
    Spring Boot的定时任务与异步任务
    51

    • 相关课程

    更多
  • 全面讲解Spring Cloud Alibaba技术栈（知识精讲+项目实战）第三阶段
  • 精通Spring Cloud Alibaba
  • 微服务框架 Spring Cloud 快速入门
  • Java Web开发系列课程 - Spring框架入门
  • Spring Boot 2.5.x开发实战
  • Spring Cloud微服务架构设计与开发实战

    • 相关电子书

    更多
  • 云栖社区特邀专家徐雷Java Spring Boot开发实战系列课程（第20讲）：经典面试题与阿里等名企内部招聘求职面试技巧
  • 微服务架构模式与原理Spring Cloud开发实战
  • 阿里特邀专家徐雷Java Spring Boot开发实战系列课程（第18讲）：制作Java Docker镜像与推送到DockerHub和阿里云Docker仓库

    • 相关实验场景

    更多
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    阿里云oss简介和使用流程