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()">登 录</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>