如何在spring中使用kaptcha實(shí)現(xiàn)驗(yàn)證碼

本篇文章給大家分享的是有關(guān)如何在spring中使用kaptcha實(shí)現(xiàn)驗(yàn)證碼，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)長期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為寧城企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站，寧城網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

 一、搭骨架

1、添加依賴:

<!-- 驗(yàn)證碼 -->
  <dependency>
   <groupId>com.github.penggle</groupId>
   <artifactId>kaptcha</artifactId>
   <version>2.3.2</version>
  </dependency>

要使用kaptcha驗(yàn)證碼，除了spring和mybatis那些依賴，只需引入這一個即可。

2、完善配置文件

①spring-dao.xml

<!-- 配置整合mybatis過程 -->
 
 <!-- 1、配置數(shù)據(jù)庫相關(guān)參數(shù)properties的屬性：${url} -->
 <context:property-placeholder location="classpath:jdbc.properties" />
 
 <!-- 2、配置數(shù)據(jù)庫連接池 -->
 <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"/>
  <!-- 關(guān)閉連接不自動commit -->
  <property name="autoCommitOnClose" value="false"/>
  <!-- 獲取連接超時時間 -->
  <property name="checkoutTimeout" value="10000"/>
  <!-- 當(dāng)獲取連接失敗時重試次數(shù) -->
  <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"/>
 
 <!-- 事務(wù)管理 -->
 <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相關(guān)的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>

至此，骨架就搭起來了，接下來完成對數(shù)據(jù)庫的操作。

二、對數(shù)據(jù)庫的操作

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層應(yīng)該做一下Junit測試，測試比較簡單，這里就不做說明了。

三、整合kaptcha

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

1、在resources的spring文件夾下新建 spring-kaptcha.xml配置文件，內(nèi)容如下:

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就是配置了一些驗(yàn)證碼的屬性，也可以直接寫在spring-web.xml中，根據(jù)個人習(xí)慣，我喜歡把不同模塊的配置寫在不同的文件中。

2、新建一個controller用于生成驗(yàn)證碼

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");
    //生成驗(yàn)證碼
    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”，那么等下前端驗(yàn)證碼的src就為kaptcha.jpg 。

3、新建一個工具類用于比對驗(yàn)證碼

CodeUtil.java

public class CodeUtil {
  /**
   * 將獲取到的前端參數(shù)轉(zhuǎn)為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;
    }
  }
  /**
   * 驗(yàn)證碼校驗(yàn)
   * @param request
   * @return
   */
  public static boolean checkVerifyCode(HttpServletRequest request) {
    //獲取生成的驗(yàn)證碼
    String verifyCodeExpected = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
    //獲取用戶輸入的驗(yàn)證碼
    String verifyCodeActual = CodeUtil.getString(request, "verifyCodeActual");
    if(verifyCodeActual == null ||!verifyCodeActual.equals(verifyCodeExpected)) {
      return false;
    }
    return true;
  }
}

注意:這里get傳的參數(shù)名為“verifyCodeActual”，那么等下在頁面中驗(yàn)證碼的name值也得為這個。

接下來就可以使用驗(yàn)證碼了！

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", "驗(yàn)證碼有誤!");
      return "fail";
    } else {
      if (result) {
        request.setAttribute("user", userName);
        return "success";
      } else {
        request.setAttribute("errMsg", "用戶名或密碼錯誤!");
        return "fail";
      }
    }
  }
}

注:這里調(diào)用CodeUtil工具類比對輸入的驗(yàn)證碼是否正確。

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 />
    驗(yàn)證碼: <input type="text" placeholder="請輸入驗(yàn)證碼" name="verifyCodeActual">
        <div class="item-input">
          <img id="captcha_img" alt="點(diǎn)擊更換" title="點(diǎn)擊更換"
            onclick="refresh()" src="kaptcha.jpg" />
          </div>
        <input type="submit" value="登錄" />
  </form>
  
</body>
</html>

success.jsp

<body>
  <h2>歡迎登錄，${user}</h2>
</body>

fail.jsp

<body>
  對不起，登錄失敗，原因:<br>
 ${codeErr}
  <h3>${errMsg}</h3>
</body>

注:login.jsp的js代碼是完成“點(diǎn)擊更換”功能;注意驗(yàn)證碼的name要和傳入工具類中的名字一樣，src就是生成驗(yàn)證碼的controller路由加上.jpg。

6、測試:

輸入正確的驗(yàn)證碼:

登錄成功:

輸入錯誤的驗(yàn)證碼:

頁面顯示驗(yàn)證碼有誤:

點(diǎn)擊驗(yàn)證碼可以更換！

 方式二、在web.xml中配置驗(yàn)證碼

相比于方式一，一增二減。

減:

1、在上面那個項(xiàng)目的基礎(chǔ)上，把 CodeController.java刪掉。

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

增:

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

<!-- 驗(yàn)證碼 -->
  <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>
    <!-- 使用哪些字符生成驗(yàn)證碼 -->
    <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>
    <!-- 字符個數(shù) -->
    <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>

注:這段配置就是用來配置驗(yàn)證碼的，注意最后的 <url-pattern>/kaptcha.jpg</url-pattern> 要與驗(yàn)證碼中的 src = "kaptcha.jpg" 對應(yīng)。

這樣就完成了驗(yàn)證碼的配置，接下來測試。 測試:

輸入錯誤的驗(yàn)證碼:

頁面顯示驗(yàn)證碼錯誤:

輸入正確的驗(yàn)證碼:

登錄成功:

測試通過！

 總結(jié):

1、在頁面中加驗(yàn)證碼很簡單，只需要添加 <img src= "xx"> 即可。用一個img標(biāo)簽，然后通過src指向生成驗(yàn)證碼的controller的路由加上 .jpg(驗(yàn)證碼用spring方式配置)，或者通過src指向

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

2、點(diǎn)擊更換也簡單，就是給img標(biāo)簽加一個onclick事件，然后用js完成。

點(diǎn)擊更換的js:

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

然后在img標(biāo)簽中加上 onclick="refresh()" ，這樣就完成了這個點(diǎn)擊事件。

3、更多kaptcha屬性的配置

Constant	描述	默認(rèn)值
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	圖片實(shí)現(xiàn)類	com.google.code.kaptcha.impl.DefaultKaptcha
kaptcha.textproducer.impl	文本實(shí)現(xiàn)類	com.google.code.kaptcha.text.impl.DefaultTextCreator
kaptcha.textproducer.char.string	文本集合，驗(yàn)證碼值從此集合中獲取	abcde2345678gfynmnpwx
kaptcha.textproducer.char.length	驗(yàn)證碼長度	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	干擾實(shí)現(xiàn)類	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	背景實(shí)現(xiàn)類	com.google.code.kaptcha.impl.DefaultBackground
kaptcha.background.clear.from	背景顏色漸變，開始顏色	light grey
kaptcha.background.clear.to	背景顏色漸變， 結(jié)束顏色	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

以上就是如何在spring中使用kaptcha實(shí)現(xiàn)驗(yàn)證碼，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：如何在spring中使用kaptcha實(shí)現(xiàn)驗(yàn)證碼
轉(zhuǎn)載源于：http://muchs.cn/article46/ighoeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、用戶體驗(yàn)、網(wǎng)站改版、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)