Spring框架生成图片验证码实例

前端技术 2023/09/06 Java

这篇文章会从前台页面到后台实现完整的讲解，下面跟着小编一起来看看。

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、总结

本文的内容到这就结束了，如果对里面的地方有不懂的地方，可以留言讨论。希望本文的内容对大家的学习工作能有所帮助。

本文地址：https://www.stayed.cn/item/17009

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案