Stringboot验证码工具类

maven引入所需jar包

<!-- 验证码 -->
		<dependency>
			<groupId>com.github.axet</groupId>
			<artifactId>kaptcha</artifactId>
			<version>0.0.9</version>
		</dependency>

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import com.google.code.kaptcha.impl.DefaultKaptcha;



public void generatorCaptcha(HttpServletResponse response) {
		OutputStream os = null;
		try {
			// 验证码
			String capText = defaultKaptcha.createText();
			// 使用验证码文本生成图片
			BufferedImage bi = defaultKaptcha.createImage(capText);
			response.setContentType("image/png");
			os = response.getOutputStream();
			ImageIO.write(bi, "png", os);
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (os != null) {
					os.flush();
					os.close();
				}
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}

效果图

当在web环境中需要校验验证码是否正确时,在访问登录页controller时可以生成随机数返回到登录页面,当登录页面首次加载或点击重新加载验证码时带上随机数将生成验证码文本存入redis中,随机数作为key,验证码文本作为value

登录controlle

/**
	 * 进入登录页面
	 */
	@RequestMapping(value = "login", method = RequestMethod.GET)
	public String loginPage(Model model, HttpServletRequest request, HttpServletResponse response) {
		try {
			// 这里发送kk到前端
			String kaptchaKey = KeyGenerator.getNext();
			model.addAttribute("kaptchaKey", kaptchaKey);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return "main/login";
	}

获取验证码controller

/**
	 * 生成验证码
	 */
	@RequestMapping("generatorCaptcha")
	public void generatorCaptcha(String kaptchaKey, HttpServletResponse response) {
		OutputStream os = null;
		try {
			// 验证码
			String capText = defaultKaptcha.createText();
			// 保存验证码到redis中
			redisManager.mupdate(RedisKeys.CAP, kaptchaKey, capText, 300);
			
			// 使用验证码文本生成图片
			BufferedImage bi = defaultKaptcha.createImage(capText);
			response.setContentType("image/png");
			os = response.getOutputStream();
			ImageIO.write(bi, "png", os);
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (os != null) {
					os.flush();
					os.close();
				}
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}

登录页(随便意思了一下,能看懂就行)

<div class="content">
		<form id="loginForm" class="login-form" action="${ctx}/login" method="post">
			<div class="alert alert-danger display-hide">
				<button class="close" data-close="alert"></button>
				<span>请输入用户名和密码. </span>
			</div>
	
			<div class="form-group">
				<label class="control-label visible-ie8 visible-ie9">用户名</label>
				<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="用户名" id="username"/>
				<input type="hidden" name="username" id="yonghuming">
			</div>
			<div class="form-group">
				<label class="control-label visible-ie8 visible-ie9">密码</label>
				<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="密码" id="password"/>
			</div>
			<div class="captchaDiv">
  					<input id="kk" style="vertical-align:middle; border:1px solid #999; width:130px; height:35px;border-bottom-left-radius: 4px;border-top-left-radius: 4px;border-bottom-right-radius: 4px;border-top-right-radius: 4px;margin-bottom:10px"  name="vcode" type="text" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" >
 					<img id="QRCode" style="vertical-align:middle;margin-bottom:10px;border-bottom-left-radius: 4px;border-top-left-radius: 4px;border-bottom-right-radius: 4px;border-top-right-radius: 4px;" onclick="resetCaptcha()">
			</div>
			<div class="form-group">
				<div class="form-group">
					<a type="button" class="btn btn-login btn-lg uppercase" style="width:99%;margin-left:3px;" onclick="doLogin()">登&nbsp;&nbsp;录</a><br><br>
				</div>
			</div>
			<input type="hidden" name="msg" id="msg">
		</form>
	</div>





<script type="text/javascript">
    //登录加密
function doLogin(){
	var username = $("#username").val();
	var password = $("#password").val();
	// 验证码
	var cap = $("#kk").val();
	if(isNull(username)){
		$("#loginMsg").html("请先输入登录名");
		return;
	}
	if(isNull(password)){
		$("#loginMsg").html("请先输入登录密码");
		return;
	}
	if(isNull(cap)){
		//$("#loginMsg").html("请先输入验证码");
		toastr.error("请先输入验证码");
		return;
	}
	// redis的验证码
	var redis_kk = "${kaptchaKey}";
	var msg = $.trim(username)+"||"+$.trim(password) +"||"+$.trim(cap)+"||"+$.trim(redis_kk);
	$("#msg").val(AESENCRYPT(msg, "${fns:getConfig('AES.key')}", "${fns:getConfig('AES.iv')}"));
	$("#loginForm").submit();
}
//绑定回车键
$(".login").bind("keypress", function(event) {
    if (event.keyCode == "13") {
        event.preventDefault();
        doLogin();
    }
});
//重换一个验证码
function resetCaptcha() {
$("#QRCode").attr("src","${ctx}/generatorCaptcha? kaptchaKey=${kaptchaKey}&id="+UUID());}
//先生成一张图片
resetCaptcha();
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值