zoukankan      html  css  js  c++  java
  • Spring学习—生成图片验证码

    今天想学下一下验证码的生成,就之前搭建好的一个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, 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

    版权声明 作者:阿飞云 出处:博客园阿飞云的技术博客--http://www.cnblogs.com/aflyun 您的支持是对博主最大的鼓励,感谢您的认真阅读。 本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    python(六):反射
    python模块之contexlib
    python(五):元类与抽象基类
    python之hashlib模块
    python(四):面型对象--类的特殊方法
    20145226夏艺华 《Java程序设计》第1周学习总结
    20145226夏艺华 《Java程序设计》第10周学习总结
    20145226夏艺华 《Java程序设计》实验报告四
    20145226夏艺华 《Java程序设计》第9周学习总结
    20145226夏艺华 《Java程序设计》第8周学习总结
  • 原文地址:https://www.cnblogs.com/aflyun/p/6414373.html
Copyright © 2011-2022 走看看