后端开发 \ SpringBoot \ Spring学习—生成图片验证码

Spring学习—生成图片验证码

总点击104
简介:版权声明:本文为博主-阿飞(dufyun)-原创文章,未经博主允许可转载,但请标明出处,谢谢!https://blog.csdn.net/u010648555/article/details/52261050

版权声明:本文为博主-阿飞(dufyun)-原创文章,未经博主允许可转载,但请标明出处,谢谢! https://blog.csdn.net/u010648555/article/details/52261050

今天想学下一下验证码的生成,就之前搭建好的一个spring框架上写了一个demo,我会贴出细节代码,但是spring的配置就不在介绍了。需要完整代码可以联系我!


会从前台页面到后台实现完整的讲解:


1:前台的代码,image.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>获取图片验证码</title>

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-1.10.2.min.js"></script>

</head>

<body>

<form action="##" method='post'>

<input type="hidden" id="userId" name="userId" value="">

<div class="form-group">

<div class="email controls">

<input type="text" name='loginName' id="loginName" placeholder="用户名" value="" class='form-control'/>

</div>

</div>

<div class="form-group">

<div class="pw controls">

<input type="password" autocomplete="off" id="pwd" name="pwd" placeholder="密码" class='form-control'/>

</div>

</div>

<div class="form-group">

<div class="email controls">

<input id="validateCode" onblur="checkImg(this.value)" name="validateCode" type="text" class="form-control" placeholder="输入验证码"/>

</div>

<span class="y_yzimg"><img id="codeValidateImg" onClick="javascript:flushValidateCode();"/></span>

<p class="y_change"><a href="javascript:flushValidateCode();" >换一张</a></p>

</div>

<div class="form-group">

<span class="text-danger"></span>

</div>

<div class="submit">

<div class="remember">

<input type="checkbox" name="remember" value="1" class='icheck-me' data-skin="square" data-color="blue" id="remember">

<label for="remember">记住我</label>

</div>

<input type="button" value="登录" onclick="javascript:submitForm();" class='btn btn-primary'>

</div>

</form>

<script type="text/javascript">

$(document).ready(function() {

flushValidateCode();//进入页面就刷新生成验证码

});

/* 刷新生成验证码 */

function flushValidateCode(){

var validateImgObject = document.getElementById("codeValidateImg");

validateImgObject.src = "${pageContext.request.contextPath }/getSysManageLoginCode?time=" + new Date();

}

/*校验验证码输入是否正确*/

function checkImg(code){

var url = "${pageContext.request.contextPath}/checkimagecode";

$.get(url,{"validateCode":code},function(data){

if(data=="ok"){

alert("ok!")

}else{

alert("error!")

flushValidateCode();

}

})

}

</script>

</body>

</html>

2:后台代码ImageGenController.java

package com.dufyun.springmvc.web.controller;

import javax.servlet.http.Cookie;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;

import org.springframework.util.StringUtils;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import com.dufy.javaweb.test.RandomValidateCode;

@Controller

public class ImageGenController {

@RequestMapping(value="/toImg")

public String toImg(){

return "image/image";

}

//登录获取验证码

@RequestMapping("/getSysManageLoginCode")

@ResponseBody

public String getSysManageLoginCode(HttpServletResponse response,

HttpServletRequest request) {

response.setContentType("image/jpeg");// 设置相应类型,告诉浏览器输出的内容为图片

response.setHeader("Pragma","No-cache");// 设置响应头信息,告诉浏览器不要缓存此内容

response.setHeader("Cache-Control","no-cache");

response.setHeader("Set-Cookie","name=value; HttpOnly");//设置HttpOnly属性,防止Xss攻击

response.setDateHeader("Expire",0);

RandomValidateCode randomValidateCode = new RandomValidateCode();

try {

randomValidateCode.getRandcode(request,response,"imagecode");// 输出图片方法

} catch (Exception e) {

e.printStackTrace();

}

return "";

}

//验证码验证

@RequestMapping(value = "/checkimagecode")

@ResponseBody

public String checkTcode(HttpServletRequest request,HttpServletResponse response) {

String validateCode = request.getParameter("validateCode");

String code = null;

//1:获取cookie里面的验证码信息

Cookie[] cookies = request.getCookies();

for (Cookie cookie : cookies) {

if ("imagecode".equals(cookie.getName())) {

code = cookie.getValue();

break;

}

}

//1:获取session验证码的信息

//String code1 = (String) request.getSession().getAttribute("");

//2:判断验证码是否正确

if(!StringUtils.isEmpty(validateCode) && validateCode.equals(code)){

return "ok";

}

return "error";

//这里我没有进行字母大小模糊的验证处理,感兴趣的你可以去试一下!

}

}

3:生成验证码的工具类RandomValidateCode.java

package com.dufy.javaweb.test;

import java.awt.Color;

import java.awt.Font;

import java.awt.Graphics;

import java.awt.image.BufferedImage;

import java.io.ByteArrayOutputStream;

import java.util.Random;

import javax.imageio.ImageIO;

import javax.servlet.http.Cookie;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class RandomValidateCode {

private Random random = new Random();

private String randString = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";// 随机产生的字符串

private int width = 80;// 图片宽

private int height = 26;// 图片高

private int lineSize = 40;// 干扰线数量

private int stringNum = 4;// 随机产生字符数量

/*

* 获得字体

*/

private Font getFont() {

return new Font("Fixedsys",Font.CENTER_BASELINE,18);

}

/*

* 获得颜色

*/

private Color getRandColor(int fc,int bc) {

if (fc > 255)

fc = 255;

if (bc > 255)

bc = 255;

int r = fc + random.nextInt(bc - fc - 16);

int g = fc + random.nextInt(bc - fc - 14);

int b = fc + random.nextInt(bc - fc - 18);

return new Color(r,g,b);

}

/*

* 绘制字符串

*/

private String drowString(Graphics g,String randomString,int i) {

g.setFont(getFont());

g.setColor(new Color(random.nextInt(101),random.nextInt(111),random

.nextInt(121)));

String rand = String.valueOf(getRandomString(random.nextInt(randString

.length())));

randomString += rand;

g.translate(random.nextInt(3),random.nextInt(3));

g.drawString(rand,13 * i,16);

return randomString;

}

/*

* 绘制干扰线

*/

private void drowLine(Graphics g) {

int x = random.nextInt(width);

int y = random.nextInt(height);

int xl = random.nextInt(13);

int yl = random.nextInt(15);

g.drawLine(x,y,x + xl,y + yl);

}

/*

* 获取随机的字符

*/

public String getRandomString(int num) {

return String.valueOf(randString.charAt(num));

}

/**

* 生成随机图片

*/

public void getRandcode(HttpServletRequest request,HttpServletResponse response,String key) {

// BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类

BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);

Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作

g.fillRect(0,width,height);

g.setFont(new Font("Times New Roman",Font.ROMAN_BASELINE,18));

g.setColor(getRandColor(110,133));

// 绘制干扰线

for (int i = 0; i <= lineSize; i++) {

drowLine(g);

}

// 绘制随机字符

String randomString = "";

for (int i = 1; i <= stringNum; i++) {

randomString = drowString(g,randomString,i);

}

//1:将随机生成的验证码放入Cookie中

Cookie cookie = new Cookie(key,randomString);

response.addCookie(cookie);

//2:将随机生成的验证码放入session中

String sessionid = request.getSession().getId();

request.getSession().setAttribute(sessionid+key,randomString);

System.out.println("*************" + randomString);

//总结:这两种方式都不是很好,

//(1):使用cookie的方式,将验证码发送到前台浏览器,不安全!不建议使用。

//(2):使用session的方式,虽然能解决验证码不发送到浏览器,安全性较高了,但是如果用户量太大,这样的存储方式会对服务器造成压力,影响服务器的性能。不建议使用。

//这里暂时实现用这种方式,好的办法是,在项目中使用的缓存,将生成的验证码存放到缓存中,设置失效时间,这样既可以实现安全性也能减轻服务器的压力。

g.dispose();

try {

ByteArrayOutputStream tmp = new ByteArrayOutputStream();

ImageIO.write(image,"png",tmp);

tmp.close();

Integer contentLength = tmp.size();

response.setHeader("content-length",contentLength + "");

response.getOutputStream().write(tmp.toByteArray());// 将内存中的图片通过流动形式输出到客户端

} catch (Exception e) {

e.printStackTrace();

}finally{

try {

response.getOutputStream().flush();

response.getOutputStream().close();

} catch (Exception e2) {

e2.printStackTrace();

}

}

}

}

4:总结


验证码在很多地方都会遇到,实现的方法和形式也有很多,主要的目的就是为了安全,防止一些恶意的攻击等。希望你可以从中学到一些东西,如果对里面的地方有不懂的地方,可以给我留言或者直接联系我!希望我们共同进步!

5:源码地址:


点击进入springmvc生成验证码源码地址

欢迎访问我的csdn博客,我们一同成长!

不管做什么,只要坚持下去就会看到不一样!在路上,不卑不亢!

博客首页:http://blog.csdn.net/u010648555

登录后自动展开

意见反馈 常见问题 官方微信 返回顶部