真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

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

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

創(chuàng)新互聯(lián)長(zhǎng)期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(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、添加依賴:


  
   com.github.penggle
   kaptcha
   2.3.2
  

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

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
    /*
  

至此,骨架就搭起來(lái)了,接下來(lái)完成對(duì)數(shù)據(jù)庫(kù)的操作。

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

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層應(yīng)該做一下Junit測(cè)試,測(cè)試比較簡(jiǎn)單,這里就不做說(shuō)明了。

三、整合kaptcha

方式一、通過(guò)spring-kaptcha.xml配置

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

spring-kaptcha.xml


    
      
        
          
            yes
            105,179,90
            blue
            125
            45
            45
            code
            4
            宋體,楷體,微軟雅黑
          
        
      
    
  

注:這個(gè)bean就是配置了一些驗(yàn)證碼的屬性,也可以直接寫在spring-web.xml中,根據(jù)個(gè)人習(xí)慣,我喜歡把不同模塊的配置寫在不同的文件中。

2、新建一個(gè)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();
    }
  }

}

注意:這個(gè)controller的路由為“kaptcha”,那么等下前端驗(yàn)證碼的src就為kaptcha.jpg 。

3、新建一個(gè)工具類用于比對(duì)驗(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è)面中驗(yàn)證碼的name值也得為這個(gè)。

接下來(lái)就可以使用驗(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", "用戶名或密碼錯(cuò)誤!");
        return "fail";
      }
    }
  }
}

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

5、前端頁(yè)面

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:
    驗(yàn)證碼: 
        
          
          
              

success.jsp


  

歡迎登錄,${user}

fail.jsp


  對(duì)不起,登錄失敗,原因:
 ${codeErr}   

${errMsg}

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

6、測(cè)試:

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

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

登錄成功:

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

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

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

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

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

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

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

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

減:

1、在上面那個(gè)項(xiàng)目的基礎(chǔ)上,把 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
  

注:這段配置就是用來(lái)配置驗(yàn)證碼的,注意最后的 /kaptcha.jpg 要與驗(yàn)證碼中的 src = "kaptcha.jpg" 對(duì)應(yīng)。

這樣就完成了驗(yàn)證碼的配置,接下來(lái)測(cè)試。 測(cè)試:

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

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

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

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

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

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

登錄成功:

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

測(cè)試通過(guò)!

 總結(jié):

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

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

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

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


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

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

3、更多kaptcha屬性的配置

Constant描述默認(rèn)值
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圖片實(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)證碼長(zhǎng)度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.keysession keyKAPTCHA_SESSION_KEY
kaptcha.session.datesession dateKAPTCHA_SESSION_DATE

以上就是如何在spring中使用kaptcha實(shí)現(xiàn)驗(yàn)證碼,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。


分享名稱:如何在spring中使用kaptcha實(shí)現(xiàn)驗(yàn)證碼
網(wǎng)站URL:http://weahome.cn/article/ighoeg.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部