springmvc 集成 kaptcha验证码

1.首先引入jar包,

<dependency>
      <groupId>com.github.penggle</groupId>
      <artifactId>kaptcha</artifactId>
      <version>2.3.2</version>

<!--排除兼容,防止下载不下来,下载后可以删除-->
      <exclusions>
        <exclusion>
          <artifactId>javax.servlet-api</artifactId>
          <groupId>javax.servlet</groupId>
        </exclusion>
      </exclusions>
    </dependency>

2.在springmvc.xml中配置bean

<bean id="defaultKaptcha" class="com.google.code.kaptcha.impl.DefaultKaptcha">
		<property name="config">
			<bean class="com.google.code.kaptcha.util.Config">
				<constructor-arg>
					<props>
						<!-- 验证码宽度 -->
						<prop key="kaptcha.image.width">110</prop>
						<!-- 验证码高度 -->
						<prop key="kaptcha.image.height">40</prop>
						<!-- 生成验证码内容范围 -->
						<prop key="kaptcha.textproducer.char.string">0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ</prop>
						<!-- 验证码个数 -->
						<prop key="kaptcha.textproducer.char.length">4</prop>
						<!-- 是否有边框 -->
						<prop key="kaptcha.border">no</prop>
						<!-- 边框颜色 -->
						<prop key="kaptcha.border.color">105,179,90</prop>
						<!-- 边框厚度 -->
						<prop key="kaptcha.border.thickness">1</prop>
						<!-- 验证码字体颜色 -->
						<prop key="kaptcha.textproducer.font.color">black</prop>
						<!-- 验证码字体大小 -->
						<prop key="kaptcha.textproducer.font.size">30</prop>
						<!-- 验证码所属字体样式 -->
						<prop key="kaptcha.textproducer.font.names">楷体</prop>
						<!-- 干扰线颜色 -->
						<prop key="kaptcha.noise.color">black</prop>
						<!-- 验证码文本字符间距 -->
						<prop key="kaptcha.textproducer.char.space">3</prop>
						<!-- 图片样式 :阴影-->
						<prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.ShadowGimpy</prop>
					</props>
				</constructor-arg>
			</bean>
		</property>
	</bean>

3,新建一个生成验证码的controller

import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;

@Controller
public class CaptchaController {
    private Producer kaptchaProducer=null;

    @Autowired
    public void setCaptchaProducer(Producer kaptchaProducer) {
        this.kaptchaProducer = kaptchaProducer;
    }

    @RequestMapping("/kaptcha")
    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception{
        response.setDateHeader("Expires",0);
        response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
        response.addHeader("Cache-Control", "post-check=0, pre-check=0");
        response.setHeader("Pragma", "no-cache");
        response.setContentType("image/jpeg");
        String capText = kaptchaProducer.createText();
        //seesion的key
        request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
        BufferedImage bi = kaptchaProducer.createImage(capText);
        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(bi, "jpg", out);
        try {
            out.flush();
        } finally {
            out.close();
        }
        return null;
    }

}

在页面上,图片的加载会访问服务器,所以将图片的src设置成kaptcha就会找到这个controller,然后向页面输出验证码
3.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="Pragma" content="no-cache" />   
	<meta http-equiv="Cache-Control" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- 引入 Bootstrap -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<title>在线图书商城</title>
	<%@ include file="/WEB-INF/inc/taglibs.jsp"  %>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
			#img {
				position: absolute;
				z-index: -5;
				width: 100%;
				max-width: 1320px;
				height: 100%;
				max-height: 600px;
			}
		</style>
</head>

<body>
	<img id="img" src="statics/images/bg.jpg" />
		<div>
			<div>
			<h1 class="text-center">在线图书商城</h1>
				<br><br>
				<form class="form-horizontal" role="form">
					<div class="form-group">
						<label for="firstname" class="col-sm-4 control-label">账号</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="telphone" placeholder="请输入名字">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-4 control-label">密码</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" id="pass" placeholder="请输入密码">
						</div>
					</div>
					<div class="form-group">
						<label for="lastname" class="col-sm-4 control-label">验证码</label>
						<div class="col-sm-4">
							<input type="text" name="verifyCode" placeholder="请输入验证码"/>
							<img src="kaptcha" id="kaptchaImage" title="看不清，点击换一张" onclick="changeVerifyCode()"><br><br>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-5 col-sm-8">
							<button type="button" class="btn btn-default loginsubmit" >登录</button>
							&emsp;&emsp;&emsp;&emsp;
							<button type="button" class="btn btn-default">注册</button>
						</div>
					</div>
				</form>
			</div>
		</div>
</body>
<script>
	$(function () {

		$(".loginsubmit").click(function(){
            console.log("jquery起作用");
		    var telphone=$("#telphone").val();
		    var pass= $("#pass").val();
		    if(pass == "" || telphone == ""){
		        alert("账号或密码不能为空");
		        return;
			}
			$.ajax({
				url:"login",
				type:"post",
				dataType:"json",
				data:{"telphone":telphone,"pass":pass},
				success:function(data){
				    if(data.code == '200'){
				        window.location="sysIndex";
					}
				},
				error:function (data) {
					console.log(data);
                }
			});
		});
    });
        function changeVerifyCode() {
            var time=new Date().getTime();
            document.getElementById("kaptchaImage").src="kaptcha?d="+time;//为了不让验证码缓存，为了安全起见，需要次次都刷新
        }
</script>
</html>

由于每次点击图片的时候,d的值不一样,所以就相当与要加载一个新的验证码图片,所以会再次访问CaptchaController ,找到kaptcha.
4,提前登录的时候时候,用存在session的验证码和用户输入的验证码进行比对

 @ResponseBody
    @RequestMapping(value = "login",method = RequestMethod.POST)
    public ReturnData loginInfo(@RequestParam(value = "telphone",required = true)String telphone,
                                @RequestParam(value = "pass",required = true)String pass, HttpServletRequest request){
        ReturnData r = new ReturnData();
        logger.info("进入login--post");
         //这里获取seession里的验证码
        String kaptchaExpected = (String)request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
        logger.info("产生的验证码:"+kaptchaExpected);
        Map<String,Object> map = new HashMap<>();
        map.put("telphone",telphone);
        map.put("pass",pass);
        User user = userService.loginByphoneAndpass(map);
        logger.info(user.toString());
        if(user != null){
            r.put("code","200");
            r.put("msg","success");
            r.put("user",user);
            return r;
        }
        r.put("code","500");
        r.put("msg","未找到用户信息");
        return r;
    }

5.验证成功后进行登录.效果图如下
在这里插入图片描述

springmvc 集成 kaptcha验证码

猜你喜欢