captcha实现验证码功能

code12313

已于 2022-12-22 12:08:09 修改

阅读量952

点赞数

分类专栏： Java学习笔记文章标签： captcha实现验证码功能

于 2022-12-22 11:43:45 首次发布

本文链接：https://blog.csdn.net/code12313/article/details/121377908

版权

Java学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先在pom.xml中添加hutool包：

        <dependency>
          <groupId>cn.hutool</groupId>
          <artifactId>hutool-all</artifactId>
          <version>5.2.3</version>
        </dependency>

创建验证码类：CreateCaptcha

public class CreateCaptcha  implements OperationStep{
	private static final Logger logger = LoggerFactory.getLogger(CreateCaptcha.class);
	
	@Override
	public int excute(Operation oper) throws PAIException {
		// TODO Auto-generated method stub
		UUID uuid = UUID.randomUUID();  //生成随机字符串uuid
		//redis中出入的key
		String cacheKey = "captcha:".concat(uuid.toString());
		//获取redis类
		RedisService redisService = oper.getBean("redisService", RedisService.class);
		//随机数
		RandomGenerator randomGenerator = new RandomGenerator("0123456789abcdecghigklmzobqrstuvwsyz", 4);  //生成4个随机数
		//创建验证码
		LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(130,45,4,100);
		lineCaptcha.setGenerator(randomGenerator);
		lineCaptcha.createCode();
		//输出到流
//		try {
//			OutputStream out=oper.getResponse().getOutputStream(); 
//			lineCaptcha.write(out); 
//			
//	        out.flush();
//	        out.close();
//		} catch (IOException e) {
//			// TODO Auto-generated catch block
//			e.printStackTrace();
//		}
		
		String code=lineCaptcha.getCode();  //获取验证码
		CaptchaObj captchaoObj=new CaptchaObj();
	    captchaoObj.setKey(uuid.toString());
	    captchaoObj.setCode("data:image/png;base64,"+lineCaptcha.getImageBase64().toString());
		redisService.put(cacheKey, code,300);  //添加到redis中，5分钟后失效
		oper.setTranStepSuccResult(captchaoObj);
		
		return 0;
	}

	@Override
	public int init(Map<String, String> param) {
		// TODO Auto-generated method stub
		return 0;
	}

}

验证码校验类：

CheckCaptchaStep

public class CheckCaptchaStep implements OperationStep{
	private static final Logger logger = LoggerFactory.getLogger(CheckCaptchaStep.class);
	
	@Override
	public int excute(Operation oper) throws PAIException {
		DataContext dc = oper.getContext();
		Map<String, Object> input = StepUtils.getInputValue(oper);
		String codekey=Objects.toString(input.get("codekey").toString(), "");  //获取校验码
		String cacheKey = "captcha:".concat(codekey);   //获取校验码key
		RedisService redisService = oper.getBean("redisService", RedisService.class);   //获取redis类
		String cacheCode = Objects.toString(redisService.get(cacheKey), "");  //获取redis中的验证码
		//判断是否有效
		if (cacheCode.isEmpty()) {
			oper.setTranStepFailureResult("验证码已失效.", cacheCode);
			return -1;
		} else {
			String kaptchaCode = Objects.toString(input.get("kaptchaCode").toString(), "");
			if (kaptchaCode.isEmpty()) {
				oper.setTranStepFailureResult("总线参数名定义错误.", cacheCode);
				return -1;
			} else if (!kaptchaCode.equals(cacheCode)) {  //验证码对比
				oper.setTranStepFailureResult("验证码输入不正确.", kaptchaCode);
				return -1;
			} else {
				redisService.remove(cacheKey);
				oper.setTranStepSuccResult("验证码校验正确.");
				return 0;
			}
		}
	}

	@Override
	public int init(Map<String, String> param) {
		// TODO Auto-generated method stub
		return 0;
	}

}

接口配置文件op_captcha.xml代码：

 <operation-cfg>
	<operation id="getcode" name="获取验证码"  type="api" token="false">
		<step id="getcode" on0Target="return" onOtherTarget="error" class="step.CreateCaptcha">

		</step>
	</operation>
	
	<operation id="kaptcha/check" name="验证码校验"  type="api" token="false">
		<context>
			<Record name="input">
			    <string name="codekey" required="true" desc="唯一值"/>
				<string name="kaptchaCode" required="true" desc="验证码"/>
			</Record>
		</context>
		<step id="insertStep" on0Target="return" onOtherTarget="error" class="step.CheckCaptchaStep">
			<context>
				<string name="mapSet">input</string>
			</context>
		</step>		
	</operation>
	
</operation-cfg>

生成样式

ajax调用

	function getCode(){
		$.ajax({
			type: "post",
			dataType:"json",
			url:"http://{}/wtdf/json/getcode",
			success:function(data){
				//console.log(data);
				if(data.errCode==0){
					var codekey=data.data.key;
					$("#vercode").attr("src",data.data.code);  //二进制直接赋给src
				}else{
					layer.msg("验证码获取错误");
				}
			}
		  });
	}

样式