如何使用kaptcha驗證碼組件

kaptcha是基於SimpleCaptcha的驗證碼開源項目。

kaptcha是純配置的，使用起來比較友好。如使用了Servlet，所有配置都在web.xml中。如果你在項目中使用了開源框架（比如SpringMVC），那么配置在該框架的配置文件中。

 

一、使用Servlet實現

1. 添加依賴的JAR包

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

我這里使用了maven來統一管理jar包，在pom.xml中添加上面的內容。

沒有使用的需要自己下載jar包了。

 

2. 配置web.xml文件

kaptcha都是在web.xml中配置，我們需要在web.xml中配置kaptcha的servlet，具體如下：

<!-- kaptcha -->
<servlet>
    <servlet-name>Kaptcha</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>Kaptcha</servlet-name>
    <url-pattern>/kaptcha.jpg</url-pattern>
</servlet-mapping>

其中的servlet-name和url-pattern都是自己定義的。

kaptcha的所有參數都是有默認的配置，如果我們不顯式的配置，則會使用默認的配置。

如要顯式配置kaptcha，在配置對應的servlet時，在init-param增加響應的參數配置即可。部分配置如下：

<servlet>
    <servlet-name>Kaptcha</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
    <init-param>  
        <param-name>kaptcha.image.width</param-name>  
        <param-value>200</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.char.length</param-name>  
        <param-value>4</param-value>  
    </init-param>  
    <init-param>  
        <param-name>kaptcha.noise.impl</param-name>  
        <param-value>com.google.code.kaptcha.impl.NoNoise</param-value>  
    </init-param> 
</servlet> 

 

二、與SpringMVC開源框架集成使用kaptcha

1. 聲明CaptchaProducer Bean實例

<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">  
　　<property name="config">  
　　　　<bean class="com.google.code.kaptcha.util.Config">  
　　　　　　<constructor-arg type="java.util.Properties">  
　　　　　　　　<props>  
　　　　　　　　　　<prop key="kaptcha.image.width">100</prop>  
　　　　　　　　　　<prop key="kaptcha.image.height">50</prop>  
　　　　　　　　　　<prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop>  
　　　　　　　　　　<prop key="kaptcha.textproducer.char.string">0123456789abcdefghijklmnopqrstuvwxyz</prop>  
　　　　　　　　　　<prop key="kaptcha.textproducer.char.length">4</prop>  
　　　　　　　　</props>  
　　　　　　</constructor-arg>  
　　　　</bean>  
　　</property>  
</bean>  

多貼幾個配置

<props>  
　　<!-- 是否有邊框 -->
　　<prop key="kaptcha.border">no</prop>
　　<!-- 設置邊框顏色 -->
　　<prop key="kaptcha.border.color">105,179,90</prop>  
　　<!-- 獲取中文 -->
　　<prop key="kaptcha.textproducer.impl">org.cric.util.ChineseText</prop>
　　<!-- 設置字體顏色 -->
　　<prop key="kaptcha.textproducer.font.color">black</prop>  
　　<!-- 設置驗證碼寬度 -->
　　<prop key="kaptcha.image.width">100</prop>
　　<!-- 設置驗證碼高度 -->
　　<prop key="kaptcha.image.height">50</prop>
　　<!-- 設置字體大小 -->
　　<prop key="kaptcha.textproducer.font.size">30</prop>
　　<!-- 設置字體個數 -->
　　<prop key="kaptcha.textproducer.char.length">4</prop>  
　　<!-- 設置字體樣式 -->
　　<prop key="kaptcha.textproducer.font.names">宋體,楷體,微軟雅黑</prop>
　　<prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop>
　　<prop key="kaptcha.textproducer.char.string">0123456789abcdefghijklmnopqrstuvwxyz</prop>
</props>  

 

2. 獲取驗證碼的controller

@Autowired
private Producer captchaProducer;

@RequestMapping("/kaptcha.jpg")
public void getCheckCode(HttpServletRequest request, HttpServletResponse response) throws IOException {   
　　String codeStr = captchaProducer.createText();
　　request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, codeStr);
　　BufferedImage bi = captchaProducer.createImage(codeStr);
　　ServletOutputStream out = response.getOutputStream();
　　ImageIO.write(bi, "jpg", out);
　　out.flush();
　　out.close();
}

 

三、測試與優化

1. 頁面調用

<form action="logonServlet">
    <input type="text" name="checkCode">
    <img src="kaptcha.jpg">
    <input type="submit" value="提交">
</form>

 

2. action校驗類

String sessionCode = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
String checkCode = request.getParameter("checkCode");
String isSuccess = "";
if (checkCode != null && checkCode.equals(sessionCode)) {
    isSuccess = "恭喜您，驗證碼輸入成功！！！";
} else {
    isSuccess = "驗證碼輸入失敗啦，囧";
}
response.setContentType("text/html; charset=UTF-8");
response.setCharacterEncoding("UTF-8");  
PrintWriter pw = response.getWriter();
pw.print(isSuccess);

 

3.實現頁面驗證碼刷新

<img src="kaptcha.jpg" id="checkcode" onclick="onCheckCode()" title="看不清換一張">

function onCheckCode () {
    var date = new Date();
    $("#checkcode").attr("src", "kaptcha.jpg?d="+date);
}

 

4. 效果