快捷導(dǎo)航

SpringMvc使用GoogleKaptcha生成驗(yàn)證碼

更新時(shí)間：2017年09月27日 11:28:13 作者：FlyHeLanMan

這篇文章主要為大家詳細(xì)介紹了SpringMvc項(xiàng)目中使用GoogleKaptcha 生成驗(yàn)證碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言：google captcha 是google生成驗(yàn)證碼的一個(gè)工具類，其原理是將隨機(jī)生成字符串保存到session中，同時(shí)以圖片的形式返回給頁面，之后前臺(tái)頁面提交到后臺(tái)進(jìn)行對(duì)比。

1、jar包準(zhǔn)備

官方提供的pom應(yīng)該是

<dependency> 
  <groupId>com.google.code.kaptcha</groupId> 
  <artifactId>kaptcha</artifactId> 
  <version>2.3.2</version> 
</dependency>

但是下載不下來，我在阿里的maven倉庫找到的pom如下：

<dependency> 
  <groupId>com.github.penggle</groupId> 
  <artifactId>kaptcha</artifactId> 
  <version>2.3.2</version> 
</dependency>

測(cè)試可以正常下載，這里推薦阿里的maven倉庫，下載速度還行，挺穩(wěn)定，附地址：http://maven.aliyun.com/nexus/#welcome

2、spring bean的配置

<!-- google kaptcha的相關(guān)配置-->
  <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"> 
    <property name="config"> 
      <bean class="com.google.code.kaptcha.util.Config"> 
        <constructor-arg> 
          <props> 
            <!-- 是否有邊框 可選yes 或者 no --> 
            <prop key="kaptcha.border">yes</prop> 
            <!-- 邊框顏色 -->
            <prop key="kaptcha.border.color">105,179,90</prop> 
            <!-- 驗(yàn)證碼文本字符顏色 -->
            <prop key="kaptcha.textproducer.font.color">blue</prop> 
            <!-- 驗(yàn)證碼文本字符大小 -->
            <prop key="kaptcha.textproducer.font.size">45</prop> 
            <!-- 驗(yàn)證碼圖片的寬度 默認(rèn)200 -->
            <prop key="kaptcha.image.width">125</prop> 
            <!-- 驗(yàn)證碼圖片的高度 默認(rèn)50 -->
            <prop key="kaptcha.image.height">45</prop> 
            <!-- 驗(yàn)證碼文本字符長(zhǎng)度 默認(rèn)為5 -->
            <prop key="kaptcha.textproducer.char.length">4</prop> 
            <!-- 驗(yàn)證碼文本字體樣式 默認(rèn)為new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize) -->
            <prop key="kaptcha.textproducer.font.names">宋體,楷體,微軟雅黑</prop> 
          </props> 
        </constructor-arg> 
      </bean> 
    </property> 
  </bean>

3、Controller的兩個(gè)方法

package com.ccg.controller;

import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.PrintWriter;

import javax.annotation.Resource;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;

@Controller
@RequestMapping("captcha")
public class CaptchaController {

  @Resource
  private Producer captchaProducer;
  /**
   *       
   *        獲取驗(yàn)證碼圖片
   * @author     ccg
   * @param     request
   * @param     response
   * @return
   * @throws     IOException
   * Created    2017年1月17日 下午5:07:28
   */
  @RequestMapping("getCaptchaCode")
  public ModelAndView getCaptchaCode(HttpServletRequest request, HttpServletResponse response) throws IOException{
    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);
    System.out.println("生成驗(yàn)證碼文本===="+capText);
    //利用生成的字符串構(gòu)建圖片
    BufferedImage bi = captchaProducer.createImage(capText);
    ServletOutputStream out = response.getOutputStream(); 
    ImageIO.write(bi, "jpg", out); 
    
    try { 
      out.flush(); 
    } finally { 
      out.close(); 
    }
    return null;
  }
  
  /**
   *       
   *        前端輸入的驗(yàn)證碼與生成的對(duì)比
   * @author     ccg
   * @param     request
   * @param     response
   * @param     captchaCode
   * Created    2017年1月17日 下午5:34:23
   */
  @RequestMapping("checkCaptchaCode")
  public void checkCaptchaCode(HttpServletRequest request, HttpServletResponse response,@RequestParam("captchaCode") String captchaCode){
    System.out.println("頁面輸入驗(yàn)證碼===="+captchaCode);
    
    response.setCharacterEncoding("UTF-8");
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setDateHeader("Expires", 0);
    
    String generateCode =(String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
    String result = "";
    if(generateCode.equals(captchaCode)){
      result = "驗(yàn)證成功";
    }else{
      result = "輸入錯(cuò)誤";
    }
    PrintWriter out = null;
    try {
      out = response.getWriter();
    } catch (IOException e) {
      e.printStackTrace();
    }
    out.print(result);
    out.flush();
  }
}

4、前臺(tái)頁面代碼

<%@ page language="java" 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>
<script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
  生成的驗(yàn)證碼：<img id="changeCaptcha" src="http://127.0.0.1/captcha/getCaptchaCode.htm"> <a href="javascript:changeCaptcha()" rel="external nofollow" >看不清，換一張</a>
  <br>
  <br>
  請(qǐng)輸入驗(yàn)證碼：<input id="captchaCode" type="text"> <input type="button" value="提交驗(yàn)證" onclick="checkCaptcha()">
</body>
<script type="text/javascript">
//獲取驗(yàn)證碼圖片 
function changeCaptcha(){
  $("#changeCaptcha").attr("src","http://127.0.0.1/captcha/getCaptchaCode.htm");
}
//驗(yàn)證輸入的驗(yàn)證碼 
function checkCaptcha(){
  var captchaCode = $("#captchaCode").val();
  $.ajax({
    type:'post',
    async : false,
    url:'http://127.0.0.1/captcha/checkCaptchaCode.htm',
    data:{"captchaCode" : captchaCode},
    success:function(res){
      alert(res);
    }
  });
}
</script>
</html>

需要注意到引用了jquery.min.js

5、運(yùn)行效果

附Google Captcha 可配置項(xiàng)

kaptcha.border 是否有邊框默認(rèn)為true 我們可以自己設(shè)置yes，no
kaptcha.border.color   邊框顏色   默認(rèn)為Color.BLACK
kaptcha.border.thickness 邊框粗細(xì)度默認(rèn)為1
kaptcha.producer.impl   驗(yàn)證碼生成器默認(rèn)為DefaultKaptcha
kaptcha.textproducer.impl   驗(yàn)證碼文本生成器默認(rèn)為DefaultTextCreator
kaptcha.textproducer.char.string   驗(yàn)證碼文本字符內(nèi)容范圍默認(rèn)為abcde2345678gfynmnpwx
kaptcha.textproducer.char.length   驗(yàn)證碼文本字符長(zhǎng)度默認(rèn)為5
kaptcha.textproducer.font.names    驗(yàn)證碼文本字體樣式默認(rèn)為new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
kaptcha.textproducer.font.size   驗(yàn)證碼文本字符大小默認(rèn)為40
kaptcha.textproducer.font.color 驗(yàn)證碼文本字符顏色默認(rèn)為Color.BLACK
kaptcha.textproducer.char.space 驗(yàn)證碼文本字符間距默認(rèn)為2
kaptcha.noise.impl    驗(yàn)證碼噪點(diǎn)生成對(duì)象默認(rèn)為DefaultNoise
kaptcha.noise.color   驗(yàn)證碼噪點(diǎn)顏色   默認(rèn)為Color.BLACK
kaptcha.obscurificator.impl   驗(yàn)證碼樣式引擎默認(rèn)為WaterRipple
kaptcha.word.impl   驗(yàn)證碼文本字符渲染   默認(rèn)為DefaultWordRenderer
kaptcha.background.impl   驗(yàn)證碼背景生成器   默認(rèn)為DefaultBackground
kaptcha.background.clear.from   驗(yàn)證碼背景顏色漸進(jìn)   默認(rèn)為Color.LIGHT_GRAY
kaptcha.background.clear.to   驗(yàn)證碼背景顏色漸進(jìn)   默認(rèn)為Color.WHITE
kaptcha.image.width   驗(yàn)證碼圖片寬度默認(rèn)為200
kaptcha.image.height 驗(yàn)證碼圖片高度默認(rèn)為50