kaptcha 是一個非常實用的驗證碼生成工具。有了它，你可以生成各種樣式的驗證碼，因為它是可配置的。kaptcha工作的原理是調用 com.google.code.kaptcha.servlet.KaptchaServlet，生成一個圖片。同時將生成的驗證碼字符串放到 HttpSession中。

1.下載kaptcha-2.3.2.jar并添加到項目

2.spring 配置文件?applicationContext.xml

<!-- 圖形驗證碼配置 --><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">90</prop> <!-- 驗證碼高度 --> <prop key="kaptcha.image.height">36</prop> <!-- 生成驗證碼內容范圍 --> <prop key="kaptcha.textproducer.char.string">0123456789qwertyuioplkjhgfdsazxcvbnm</prop> <!-- 驗證碼個數 --> <prop key="kaptcha.textproducer.char.length">4</prop> <!-- 是否有邊框 --> <prop key="kaptcha.border">no</prop> <!-- 邊框顏色 --> <prop key="kaptcha.border.color">black</prop> <!-- 邊框厚度 --> <prop key="kaptcha.border.thickness">1</prop> <!-- 驗證碼字體顏色 --> <prop key="kaptcha.textproducer.font.color">black</prop> <!-- 驗證碼字體大小 --> <prop key="kaptcha.textproducer.font.size">33</prop> <!-- 驗證碼所屬字體樣式 --> <prop key="kaptcha.textproducer.font.names">宋體,楷體,微軟雅黑</prop> <!-- 干擾線顏色 --><prop key="kaptcha.noise.color">blue</prop> <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop><!-- 驗證碼文本字符間距 --> <prop key="kaptcha.textproducer.char.space">3</prop> </props></constructor-arg> </bean> </property> </bean>

3. Controller的實現

map保存服務端為生成的驗證碼，可傳入service中與前端傳入的驗證碼進行對比從而完成驗證。

?

　　......
??? @Autowired
?? ?private Producer producer;
?? ?
?? ?private Map<String, String> map;
　　......

　　@RequestMapping("/kaptcha")public void initCaptcha(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");String capText = producer.createText();session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);BufferedImage bi = producer.createImage(capText);ServletOutputStream out = response.getOutputStream();ImageIO.write(bi, "jpg", out);try {out.flush();} finally {String kaptchaCode = (String)session.getAttribute(Constants.KAPTCHA_SESSION_KEY);map = new HashMap<String, String>();map.put("kaptchaCode", kaptchaCode);out.close();}}

?

4.頁面上添加

img的src的屬性以自己的實際路徑進行修改

<b style="padding:0 2px 0 120px;"><input type="text" id="code" placeholder="請輸入驗證碼" style="vertical-align:middle;"/><img class="kaptcha" id="kaptcha" src="/frame/kaptcha" style="vertical-align:middle;"/></b>

5.在頁面對應js添加

//更換圖形驗證碼 $(function (){ $('#kaptcha').click( function (){ $(this).attr('src', '/frame/kaptcha?' + Math.floor(Math.random() * 100)); } ); });

?

轉載于:https://www.cnblogs.com/007sx/p/5676247.html

總結

以上是生活随笔為你收集整理的kaptcha图形验证码组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。