SSM框架下实现验证码图片验证功能

背景图片资源路径

一、首先，在pom里面加上需要用的资源jar包等，并且加上验证图片的引用图片路径，否则项目启动会报找不到图片资源的错误

<dependency> <groupId>com.octo.captcha</groupId> <artifactId>jcaptcha</artifactId> <version>1.0</version> </dependency> <resources> <resource> <directory>src/main/java</directory> <includes> <include>**/*.xml</include> </includes> </resource> <resource> <directory>src/main/resources</directory> <includes> <include>**/*.*</include> </includes> </resource> <resource> <directory>src/main/java/com/first/captcha</directory> <includes> <include>**/*.*</include> </includes> </resource> </resources>

二、在spring-mybatis.xml下面配置验证码相关属性及工具类

<!-- 验证码 --><bean id="imageCaptchaService" class="com.octo.captcha.service.image.DefaultManageableImageCaptchaService"> <property name="captchaEngine"> <bean class="com.first.util.CaptchaEngine" /> </property> <property name="minGuarantedStorageDelayInSeconds" value="3600" /></bean>

三、在你的工具util包下面加入CaptchaEngine工具类

public class CaptchaEngine extends ListImageCaptchaEngine { /** 图片宽度 */ private static final int IMAGE_WIDTH = 80; /** 图片高度 */ private static final int IMAGE_HEIGHT = 28; /** 最小字体大小 */ private static final int MIN_FONT_SIZE = 12; /** 最大字体大小 */ private static final int MAX_FONT_SIZE = 16; /** 最小字符个数 */ private static final int MIN_WORD_LENGTH = 4; /** 最大字符个数 */ private static final int MAX_WORD_LENGTH = 4; /** 随机字符 */ private static final String CHAR_STRING = "ABCDEFGHIJKLMNOPQRSTUVWXYZSZHZOZPZXZXZ"; /** 随机背景图片路径 */ private static final String BACKGROUND_IMAGE_PATH = "/webapp/resources/captcha"; /** * 随机字体 */ private static final Font[] FONTS = new Font[] { new Font("nyala", Font.BOLD, MAX_FONT_SIZE), new Font("Arial", Font.BOLD, MAX_FONT_SIZE), new Font("nyala", Font.BOLD, MAX_FONT_SIZE), new Font("Bell", Font.BOLD, MAX_FONT_SIZE), new Font("Bell MT", Font.BOLD, MAX_FONT_SIZE), new Font("Credit", Font.BOLD, MAX_FONT_SIZE), new Font("valley", Font.BOLD, MAX_FONT_SIZE), new Font("Impact", Font.BOLD, MAX_FONT_SIZE) }; /** * 随机颜色 */ private static final Color[] COLORS = new Color[] { new Color(255, 255, 255), new Color(255, 220, 220), new Color(220, 255, 255), new Color(220, 220, 255), new Color(255, 255, 220), new Color(220, 255, 220) }; /** * 验证码图片生成 */ @Override protected void buildInitialFactories() { FontGenerator fontGenerator = new RandomFontGenerator(MIN_FONT_SIZE, MAX_FONT_SIZE, FONTS);// BackgroundGenerator backgroundGenerator = new FileReaderRandomBackgroundGenerator(IMAGE_WIDTH, IMAGE_HEIGHT, new ClassPathResource(BACKGROUND_IMAGE_PATH).getPath()); BackgroundGenerator backgroundGenerator = new FileReaderRandomBackgroundGenerator(IMAGE_WIDTH, IMAGE_HEIGHT, CaptchaBgImage.class.getResource("").getPath()); TextPaster textPaster = new DecoratedRandomTextPaster(MIN_WORD_LENGTH, MAX_WORD_LENGTH, new RandomListColorGenerator(COLORS), new TextDecorator[] {}); addFactory(new GimpyFactory(new RandomWordGenerator(CHAR_STRING), new ComposedWordToImage(fontGenerator, backgroundGenerator, textPaster))); } }

四、建一个空的class，该包下面就是这个class和验证码背景图片 图片资源可去下面下载

package com.first.captcha; public class CaptchaBgImage { }

五、controller跳转至验证码页面

/** * 首页登录页 * @return */ @RequestMapping("/lists") public ModelAndView lists(ModelMap model){ model.addAttribute("captchaId", UUID.randomUUID().toString()); ModelAndView mv = new ModelAndView(); mv.setViewName("/lists"); return mv; }

页面：

<input type="text" name="captcha" id="captcha" placeholder="验证码"><input type="hidden" name="captchaId" id="captchaId" value="${captchaId}" > <img class="yzm" id="captchaImage" src="${base}/user/captcha.do?captchaId=${captchaId}" onclick="changeCode()" alt="换一张" style="cursor:pointer"> //刷新验证码function changeCode(){ $("#captchaImage").attr("src", "${base}/user/captcha.do?captchaId=${captchaId}×tamp=" + (new Date()).valueOf());}

captcha.do:

/** * 验证码 */ @RequestMapping(value = "/captcha", method = RequestMethod.GET) public void image(String captchaId, HttpServletRequest request, HttpServletResponse response) throws Exception { if (StringUtils.isEmpty(captchaId)) { captchaId = request.getSession().getId(); } String pragma = new StringBuffer().append("yB").append("-").append("der").append("ewoP").reverse().toString(); String value = new StringBuffer().append("ten").append(".").append("xxp").append("ohs").reverse().toString(); response.addHeader(pragma, value); response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache"); response.setHeader("Cache-Control", "no-store"); response.setDateHeader("Expires", 0); response.setContentType("image/jpeg"); ServletOutputStream servletOutputStream = null; try { servletOutputStream = response.getOutputStream(); BufferedImage bufferedImage = captchaService.buildImage(captchaId); ImageIO.write(bufferedImage, "jpg", servletOutputStream); servletOutputStream.flush(); } catch (Exception e) { e.printStackTrace(); } finally { IOUtils.closeQuietly(servletOutputStream); } }

验证码验证是否正确时使用ajax验证：

$.ajax({ type:"post",data:{userId: $id, phone: phone,captchaId : $captchaIds,captcha:$captchas},dataType:'json',url:'${path}/member/safe/getCode.do',var message = JSON.parse(data);success:function(data){lui.closeLoding();if(message.type == "success"){}else if(message.content == "验证码错误"){time($sendPhone,60);lui.success(message.content);changeCodes();lui.info(message.content);lui.info(message.content);}else if(message.type == "error"){changeCodes();}},});error:function(message){lui.closeLoding();changeCodes();lui.fail('服务繁忙,请稍后再试');}

controller方法：

@RequestMapping(value = "/getCode", method = RequestMethod.POST) public @ResponseBody String getCode(String userId, String phone,String captchaId,String captcha) { if (!captchaService.isValid(null,captchaId, captcha)) { return message(Type.error, "验证码错误"); }}public String message(Type type ,String content){ return "{\"type\":\""+(type == Type.success ? "success" : "error")+"\",\"content\":\""+content+"\"}"; }

service：

public interface CaptchaService { /** * 生成验证码图片 * * @param captchaId * 验证ID * @return 验证码图片 */ BufferedImage buildImage(String captchaId); /** * 验证码验证 * * @param captchaType * 验证码类型 * @param captchaId * 验证ID * @param captcha * 验证码(忽略大小写) * @return 验证码验证是否通过 */ boolean isValid(String captchaId, String captcha); }

CaptchaServiceImpl：注意 @Resource(name="imageCaptchaService") 要和spring-mybatis.xml引用名称配置文件保存一致

@Servicepublic class CaptchaServiceImpl implements CaptchaService { @Resource(name="imageCaptchaService") private com.octo.captcha.service.CaptchaService imageCaptchaService; public BufferedImage buildImage(String captchaId) { return (BufferedImage) imageCaptchaService.getChallengeForID(captchaId); } @Override public boolean isValid(String captchaId, String captcha) { if (StringUtils.isNotEmpty(captchaId) && StringUtils.isNotEmpty(captcha)) { try { return imageCaptchaService.validateResponseForID(captchaId, captcha.toUpperCase()); } catch (Exception e) { return false; } } else { return false; } } }

这样就可以实现验证码图片及验证了。