SSM框架下實現驗證碼圖片驗證功能（源碼）

SSM框架下實現驗證碼圖片驗證功能

背景圖片資源路徑 

https://download.csdn.net/download/hero_qhz/10322064

一、首先，在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和驗證碼背景圖片 圖片資源可去下面下載

https://download.csdn.net/download/hero_qhz/10322064 

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引用名稱配置文件保存一致

@Service
public 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;
		}
	}

}

這樣就可以實現驗證碼圖片及驗證了。