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

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

(0)

相关推荐

  • Spring MVC 中 短信验证码功能的实现方法

    在外部网站中短信的验证很有必要,比如在实现注册.验证用户信息等的情况下.在SpringMVC中的实现如下: 短信接口 短信接口,有些企业会购买的有移动的短信平台接口.如果是个人或者是小企业可以使用一些云服务的.比如百度的API Store上面的. 我使用的是:http://apistore.baidu.com/apiworks/servicedetail/1018.html 当然短信接口肯定都是要付费的,而且是基于模板的,具体的使用说明可以看这个网址里面的使用说明. 前端界面 前端的界面,可能如

  • springmvc下实现登录验证码功能示例

    总体思路,简单讲,就是后台生成图片同时将图片信息保存在session,前端显示图片,输入验证码信息后提交表单到后台,取出存放在session里的验证码信息,与表单提交的验证码信息核对. 点击验证码图片时,通过jquery重新请求后台生成验证码图片方法,更换图片. 首先在后端controller里,有这样一个方法: 路径为http://localhost:8888/RiXiang_blog/login/captcha.form,访问这个路径便可以通过response写入图片. @RequestMa

  • spring mvc 使用kaptcha配置生成验证码实例

    使用Kaptcha 生成验证码十分简单并且参数可以进行自定义,以下简单记录下使用步骤. 1.在pom.xml中添加maven依赖: <dependency> <groupId>com.google.code.kaptcha</groupId> <artifactId>kaptcha</artifactId> <version>2.3</version> <classifier>jdk15</classif

  • Spring Boot 验证码的生成和验证详解

    前言 本文介绍的imagecode方法是一个生成图形验证码的请求,checkcode方法实现了对这个图形验证码的验证.从验证码的生成到验证的过程中,验证码是通过Session来保存的,并且设定一个验证码的最长有效时间为5分钟.验证码的生成规则是从0~9的数字中,随机产生一个4位数,并增加一些干扰元素,最终组合成为一个图形输出 1.验证码生成类 import java.awt.*; import java.awt.image.BufferedImage; import java.io.Output

  • 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" &quo

  • java生成图片验证码实例代码

    关于java图片验证码的文章最近更新了不少,帮助大家掌握java验证码的生成技术,下文为大家分享了java生成图片验证码最简单的方法,供大家参考. 现在各行业在定制系统时都会考虑到机器注册,现在最有效的方式就是输入验证.现在的验证方式有很多种: 一.问题验证,其实也是图片验证,在图片上生成问题,然后输入框输入答案. 二.图片验证,输入图片上展示的文字信息. 三.短信验证,比较繁杂,用户也不怎么喜欢. 四.还有就是百度最新的验证方式.图片上生成文字,然后出现一个文字点击框,选择你在验证图片上看到的

  • Spring Security 图片验证码功能的实例代码

    验证码逻辑 以前在项目中也做过验证码,生成验证码的代码网上有很多,也有一些第三方的jar包也可以生成漂亮的验证码.验证码逻辑很简单,就是在登录页放一个image标签,src指向一个controller,这个Controller返回把生成的图片以输出流返回给页面,生成图片的同时把图片上的文本放在session,登录的时候带过来输入的验证码,从session中取出,两者对比.这位老师讲的用Spring Security集成验证码,大体思路和我说的一样,但更加规范和通用些. spring securi

  • .NET Core 2.0如何生成图片验证码完整实例

    前言 图片验证码在我们日常开发中是必不可少会遇见的一个功能,最近工作中就遇到了这个需求,所以下面将实现的方法分享给大家,话不多说了,来一起看看详细的介绍吧. .NET Core 2.0生成图片验证码 NuGet包引入:ZKWeb.System.Drawing,如下所示: 代码实例如下:VerifyCodeHelper using System; using System.DrawingCore; using System.DrawingCore.Drawing2D; using System.D

  • Spring框架构造注入type属性实例详解

    这篇文章主要介绍了Spring框架构造注入type属性实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 进行测试,验证一个问题,废话不多说了,上代码进行比较 package service.impl; import service.UserService; import dao.UserDao; import entity.User; /** * 用户业务类,实现对User功能的业务管理 */ public class UserServi

  • 在JSP页面中动态生成图片验证码的方法实例

    在JSP页面中动态生成图片验证码 <%@ page language="java" pageEncoding="UTF-8"%> <%@ page import="java.awt.*,java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*" %> <%@ taglib http://struts.apache.org/tags-bean">ht

  • SpringMVC下获取验证码实例详解

    SpringMVC下获取验证码实例详解 前言: 1.用户一开始登录的时候, 不建议出现验证码, 这一点在很多网站上已经体现的很好了, 只有当用户连续输错三次或者以上才会要求用户输入验证码. 2.记录用户输错次数最好不要使用 session 来记录, 因为 session 是跟客户端浏览器会话有关的, 如果用重启浏览器或者换新的浏览器再来登录或者试错, 就是新的回话了, 原来记录的错误次数就失效了. 建议此处采用缓存机制来实现, 简单处理就是采用 Map<用户登录id, 错误次数> 来实现, 如

  • spring boot实现验证码功能

    Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置.通过这种方式,Spring Boot致力于在蓬勃发展的快速应用开发领域(rapid application development)成为领导者. 下面通过实例代码给大家介绍spring boot实现验证码功能,具体详情如下所示: 1.建立工具类,配置验证码相关参数 import java.awt.Col

  • Spring Security添加验证码的两种方式小结

    目录 一.自定义认证逻辑 二.自定义过滤器 总结 一.自定义认证逻辑 生成验证码工具 <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency> 添加Kaptcha配置 @Configuration public class K

  • 深入解析Java的Spring框架中bean的依赖注入

    每一个基于java的应用程序都有一个共同工作来展示给用户看到的内容作为工作的应用几个对象.当编写一个复杂的Java应用程序,应用程序类应该尽可能独立其他Java类来增加重复使用这些类,并独立于其他类别的测试它们,而这样做单元测试的可能性.依赖注入(或有时称为布线)有助于粘合这些类在一起,同时保持他们的独立. 考虑有其中有一个文本编辑器组件的应用程序,要提供拼写检查.标准的代码将看起来像这样: public class TextEditor { private SpellChecker spell

随机推荐