登录验证码

Posted 2020-09-22 牛奶糖13号

jsp：

<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<div>
<h1 class="logo-name" style="font-size: 50px; font-weight: 300; color: #BBBBBB;" >教 材 申 报 系 统</h1>
</div>
<h3>欢迎使用系统</h3>
<form class="m-t" role="form" id="loginForm" >
<div class="form-group">
<input type="text" id="userCode" class="form-control" name="sysUser.usercode" placeholder="用户名" required="">
</div>
<div class="form-group">
<input type="password" id="password" class="form-control" name="sysUser.password" placeholder="密码" required="">
</div>
<div class="form-group">
<span style=" float: left; ">
<input type="text " id="yzm" class="form-control" name="yzm" placeholder="验证码" required="" style=" width: 210px;">
</span> <img name="checkimg" id="checkimg" title="看不清楚，换一张" style="cursor: pointer;vertical-align:middle" border="0" onclick="refreshImg();"/>
</div>
</form>
<button class="btn btn-primary block full-width m-b" id="ykLogBut">登 录</button>
<button class="btn btn-primary block full-width m-b" id="reset" >重 输</button>
<p class="text-muted text-center"> <a href="boot/login.html#"><small>忘记密码了？</small></a> | <a href="boot/register.html">注册一个新账号</a>
</p>
</div>
</div>

js：

$(function() {


$("#userCode").keydown(function(a){
if(a.keyCode==13){
userSub();
}
});

$("#password").keydown(function(a){
if(a.keyCode==13){
userSub();
}
});

$("#yzm").keydown(function(a){
if(a.keyCode==13){
userSub();
}
});

refreshImg();

$("#ykLogBut").click(function(){
userSub();
});
$("#reset").click(function(){
$("#userCode").val(‘‘);
$("#password").val(‘‘);
$("#yzm").val(‘‘);
});
});

 

$("#checkimg").attr("src",‘verifyCodeAction!getImage.action?t=‘+Math.random());

 

java代码：

public void getImage() {
HttpServletResponse resp = ServletActionContext.getResponse();
// 禁止图像缓存。
resp.setHeader("Pragma", "no-cache");
resp.setHeader("Cache-Control", "no-store");
resp.setDateHeader("Expires", 0);
resp.setContentType("image/jpeg");
// 将图像输出到Servlet输出流中。
ServletOutputStream out = null;
try {
out = resp.getOutputStream();
BufferedImage buffImg = this.creatImage("");
ImageIO.write(buffImg, "jpeg", out);
out.flush();
// resp.flushBuffer();
// resp.reset();
} catch (IOException e) {
e.printStackTrace();
}finally{
if(out!=null){
try {
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}

 

private BufferedImage creatImage(String sessionName) {

char[] codeSequence = { ‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘, ‘H‘, ‘I‘, ‘J‘, ‘K‘, ‘L‘, ‘M‘, ‘N‘, ‘O‘, ‘P‘, ‘Q‘, ‘R‘, ‘S‘, ‘T‘, ‘U‘, ‘V‘, ‘W‘, ‘X‘, ‘Y‘, ‘Z‘ };

// 在内存中创建图象
int width = 80, height = 30;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

// 获取图形上下文
Graphics g = image.getGraphics();
// 生成随机类
Random random = new Random();
// 设定背景色
g.setColor(getRandColor(100, 250));
g.fillRect(0, 0, width, height);
// 设定字体
g.setFont(new Font("Comic Sans MS", Font.PLAIN, 20));
// 画边框
// g.setColor(new Color());
// g.drawRect(0,0,width-1,height-1);
// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(160, 200));
for (int i = 0; i < 160; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}

// 取随机产生的认证码(4位数字)
// String rand = request.getParameter("rand");
// rand = rand.substring(0,rand.indexOf("."));
String sRand = "";
for (int i = 0; i < 4; i++) {
// String rand = String.valueOf(random.nextInt(10));
String rand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
sRand += rand;
// 将认证码显示到图象中
g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110))); // 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
g.drawString(rand, 18 * i + 6, 22);
}
if(StringUtils.isNotEmpty(sessionName)){
ActionContext.getContext().getSession().put(sessionName, sRand);
} else {
ActionContext.getContext().getSession().put("validateCode", sRand);登录账户和密码和验证码判定的方法中通过ActionContext.getContext().getSession().get("validateCode").toString().toLowerCase()获得验证码的值
}
// 图象生效
g.dispose();
return image;
}