kaptcha 是一個(gè)非常實(shí)用的驗(yàn)證碼生成工具。有了它，你可以生成各種樣式的驗(yàn)證碼，因?yàn)樗强膳渲玫摹aptcha工作的原理是調(diào)用 com.google.code.kaptcha.servlet.KaptchaServlet，生成一個(gè)圖片。同時(shí)將生成的驗(yàn)證碼字符串放到 HttpSession中。

1.下載kaptcha-2.3.2.jar并添加到項(xiàng)目

2.spring 配置文件?applicationContext.xml

<!-- 圖形驗(yàn)證碼配置 --><bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"> <property name="config"> <bean class="com.google.code.kaptcha.util.Config"> <!--通過(guò)構(gòu)造函數(shù)注入屬性值 --> <constructor-arg type="java.util.Properties"> <props> <!-- 驗(yàn)證碼寬度 --> <prop key="kaptcha.image.width">90</prop> <!-- 驗(yàn)證碼高度 --> <prop key="kaptcha.image.height">36</prop> <!-- 生成驗(yàn)證碼內(nèi)容范圍 --> <prop key="kaptcha.textproducer.char.string">0123456789qwertyuioplkjhgfdsazxcvbnm</prop> <!-- 驗(yàn)證碼個(gè)數(shù) --> <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> <!-- 驗(yàn)證碼字體顏色 --> <prop key="kaptcha.textproducer.font.color">black</prop> <!-- 驗(yàn)證碼字體大小 --> <prop key="kaptcha.textproducer.font.size">33</prop> <!-- 驗(yàn)證碼所屬字體樣式 --> <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><!-- 驗(yàn)證碼文本字符間距 --> <prop key="kaptcha.textproducer.char.space">3</prop> </props></constructor-arg> </bean> </property> </bean>

3. Controller的實(shí)現(xiàn)

map保存服務(wù)端為生成的驗(yàn)證碼，可傳入service中與前端傳入的驗(yàn)證碼進(jìn)行對(duì)比從而完成驗(yàn)證。

?

　　......
??? @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.頁(yè)面上添加

img的src的屬性以自己的實(shí)際路徑進(jìn)行修改

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

5.在頁(yè)面對(duì)應(yīng)js添加

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/007sx/p/5676247.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。