• pom.xml:

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

• web.xml:

<servlet>
    <servlet-name>myCaptcha</servlet-name>
    <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
    <!-- <init-param> ... </init-param> -->
</servlet>
<servlet-mapping>
    <servlet-name>myCaptcha</servlet-name>
    <!-- 前臺獲取驗證碼圖片的src地址 -->
    <url-pattern>/kaptcha</url-pattern>
</servlet-mapping>
 

• html:
  

<img id="captcha_img" alt="驗證碼" title="點擊更換" onclick="changeVerifyCode(this)" src="../kaptcha">

• js:

// 點擊更換驗證碼實現
function changeVerifyCode(img) {
    img.src=‘../kaptcha?‘ + Math.floor(Math.random() * 100);
}

• Jquery

// 用戶提交表單時，將驗證碼一起傳輸過去
var verifyCodeActrual =  $(‘#j_captcha‘).val();

// 其他的一些認證
// *****
if(!verifyCodeActrual) {
    $.toast(‘請輸入驗證碼‘);
    return;
}
formData.append(‘verifyCodeActrual‘, verifyCodeActrual);
 

• 怎麽驗證用戶寫的驗證碼的正確性？

1 獲取用戶傳過來的字符串：

String verifyCodeActural = request.getParameter("verifyCodeActural");
if (StringUtils.isBlank(verifyCodeActural) {
    return ***;
}

2 獲取Kaptcha生成的正確字符串：

// import：com.google.code.kaptcha.Constants
String verifyCodeExpected = (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
if (StringUtils.isBlank(verifyCodeExpected)) {
    return false;
}
 

3 比較兩者是否相等：

return verifyCodeExpected.equalsIgnoreCase(verifyCodeActural)) ;

• 配置詳解：

<init-param>
    <description>圖片邊框，合法值yes，no，默認值yes</description>
    <param-name>kaptcha.border</param-name>
    <param-value>no</param-value>
</init-param>
<init-param>
    <description>邊框顏色，合法值rgb(and optional alpha)或者 white,black,blue，默認值black</description>
    <param-name>kaptcha.border.color</param-name>
    <param-value>blue</param-value>
</init-param>
<init-param>
    <description>邊框厚度，合法值>0,默認值為1</description>
    <param-name>kaptcha.border.thickness</param-name>
    <param-value>2</param-value>
</init-param>
<init-param>
    <description>圖片寬度，默認值200</description>
    <param-name>kaptcha.image.width</param-name>
    <param-value>200</param-value>
</init-param>
<init-param>
    <description>圖片高度，默認值50</description>
    <param-name>kaptcha.image.height</param-name>
    <param-value>50</param-value>
</init-param>
<init-param>
    <description>圖片實現類，默認值com.google.code.kaptcha.impl.DefaultKaptcha</description>
    <param-name>kaptcha.producer.impl</param-name>
    <param-value>com.google.code.kaptcha.impl.DefaultKaptcha</param-value>
</init-param>
<init-param>
    <description>文本實現類,默認值com.google.code.kaptcha.text.impl.DefaultTextCreator</description>
    <param-name>kaptcha.textproducer.impl</param-name>
    <param-value>com.google.code.kaptcha.text.impl.DefaultTextCreator</param-value>
</init-param>
<init-param>
    <description>文本集合，驗證碼值從此集合中獲取,默認值abcde2345678gfynmnpwx</description>
    <param-name>kaptcha.textproducer.char.string</param-name>
    <param-value>abcde2345678gfynmnpwx</param-value>
</init-param>
<init-param>
    <description>驗證碼長度,默認值為5</description>
    <param-name>kaptcha.textproducer.char.length</param-name>
    <param-value>4</param-value>
</init-param>
<init-param>
    <description>字體,默認值Arial, Courier(如果使用中文驗證碼，則必須使用中文的字體，否則出現亂碼)</description>
    <param-name>kaptcha.textproducer.font.names</param-name>
    <param-value>微軟雅黑</param-value>
</init-param>
<init-param>
    <description>字體大小，默認值為40px</description>
    <param-name>kaptcha.textproducer.font.size</param-name>
    <param-value>40</param-value>
</init-param>
<init-param>
    <description>字體顏色，合法值： r,g,b 或者 white,black,blue，默認值black</description>
    <param-name>kaptcha.textproducer.font.color</param-name>
    <param-value>black</param-value>
</init-param>
<init-param>
    <description>文字間隔，默認值為2</description>
    <param-name>kaptcha.textproducer.char.space</param-name>
    <param-value>2</param-value>
</init-param>
<init-param>
    <description>幹擾實現類，默認值com.google.code.kaptcha.impl.DefaultNoise</description>
    <param-name>kaptcha.noise.impl</param-name>
    <param-value>com.google.code.kaptcha.impl.DefaultNoise</param-value>
</init-param>
<init-param>
    <description>幹擾 顏色，合法值： r,g,b 或者 white,black,blue，默認值black</description>
    <param-name>kaptcha.noise.color</param-name>
    <param-value>black</param-value>
</init-param>
<init-param>
    <description>圖片樣式： 
    水紋com.google.code.kaptcha.impl.WaterRipple 
    魚眼com.google.code.kaptcha.impl.FishEyeGimpy
    陰影com.google.code.kaptcha.impl.ShadowGimpy,默認值水紋</description>
    <param-name>kaptcha.obscurificator.impl</param-name>
    <param-value>com.google.code.kaptcha.impl.WaterRipple</param-value>
</init-param>
<init-param>
    <description>背景實現類，默認值com.google.code.kaptcha.impl.DefaultBackground</description>
    <param-name>kaptcha.background.impl</param-name>
    <param-value>com.google.code.kaptcha.impl.DefaultBackground</param-value>
</init-param>
<init-param>
    <description>背景顏色漸變，開始顏色，默認值lightGray</description>
    <param-name>kaptcha.background.clear.from</param-name>
    <param-value>lightGray</param-value>
</init-param>
<init-param>
    <description>背景顏色漸變， 結束顏色，默認值white</description>
    <param-name>kaptcha.background.clear.to</param-name>
    <param-value>white</param-value>
</init-param>
<init-param>
    <description>文字渲染器，默認值com.google.code.kaptcha.text.impl.DefaultWordRenderer</description>
    <param-name>kaptcha.word.impl</param-name>
    <param-value>com.google.code.kaptcha.text.impl.DefaultWordRenderer</param-value>
</init-param>
<init-param>
    <description>session key，默認值KAPTCHA_SESSION_KEY</description>
    <param-name>kaptcha.session.key</param-name>
    <param-value>KAPTCHA_SESSION_KEY</param-value>
</init-param>
<init-param>
    <description>session date，默認值KAPTCHA_SESSION_DATE</description>
    <param-name>kaptcha.session.date</param-name>
    <param-value>KAPTCHA_SESSION_DATE</param-value>
</init-param>

9.kaptcha