服务器之家

服务器之家 > 正文

spring整合kaptcha验证码的实现

时间:2021-04-27 14:18     来源/作者:贪挽懒月

kaptcha简介:

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

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

1、eclipse

2、mybatis

3、spring

4、springmvc

5、kaptcha

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

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

方式二:在 web.xml 中配置

正式开始:

 一、搭骨架

1、添加依赖:

?
1
2
3
4
5
6
<!-- 验证码 -->
  <dependency>
   <groupid>com.github.penggle</groupid>
   <artifactid>kaptcha</artifactid>
   <version>2.3.2</version>
  </dependency>

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

2、完善配置文件

①spring-dao.xml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!-- 配置整合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

?
1
2
3
4
5
6
7
8
9
10
11
<!-- 扫描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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 配置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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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

?
1
2
3
4
5
public class user {
  private int uid;
  private string username;
  private string password;
}

2、dao层

userdao.java

?
1
2
3
4
public interface userdao {
  user finduserbyusername(string username);
 
}

userdao.xml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%@ 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

?
1
2
3
<body>
  <h1>欢迎登录,${user}</h1>
</body>

fail.jsp

?
1
2
3
4
5
<body>
  对不起,登录失败,原因:<br>
 ${codeerr}
  <h2>${errmsg}</h2>
</body>

注: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添加 如下配置:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!-- 验证码 -->
  <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" 对应。

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

输入错误的验证码:

spring整合kaptcha验证码的实现

页面显示验证码错误:

spring整合kaptcha验证码的实现

输入正确的验证码:

spring整合kaptcha验证码的实现

登录成功:

spring整合kaptcha验证码的实现

测试通过!

 总结:

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

<url-pattern>/kaptcha.jpg</url-pattern> ,即 src="kaptcha.jpg"

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

点击更换的js:

?
1
2
3
4
5
<script type="text/javascript">
     function refresh() {
      document.getelementbyid('captcha_img').src="kaptcha.jpg?"+math.random();
     }  
</script>

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

3、更多kaptcha属性的配置

 

constant 描述 默认值
kaptcha.border 图片边框,合法值:yes , no yes
kaptcha.border.color 边框颜色,合法值: r,g,b (and optional alpha) 或者 white,black,blue. black
kaptcha.border.thickness 边框厚度,合法值:>0 1
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.key session key kaptcha_session_key
kaptcha.session.date session date kaptcha_session_date

 

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

原文链接:https://www.jianshu.com/p/e5ffa123cda4

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
返回顶部