Spring Boot之Kaptcha验证码使用

2018-12-11 wjy329 Java学习 5

1.引入Kaptcha依赖

<!-- 验证码 -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

2.KaptchaBean.java 配置文件

package com.wjy329.shiro.filter;

import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.servlet.KaptchaServlet;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class KaptchaBean {
    @Bean
    public org.springframework.boot.web.servlet.ServletRegistrationBean kaptchaServlet() {

        org.springframework.boot.web.servlet.ServletRegistrationBean registrationBean = new org.springframework.boot.web.servlet.ServletRegistrationBean(new KaptchaServlet(), "/kaptcha.jpg");

        registrationBean.addInitParameter(Constants.KAPTCHA_SESSION_CONFIG_KEY,
                Constants.KAPTCHA_SESSION_KEY);
        registrationBean.addInitParameter(Constants.KAPTCHA_IMAGE_HEIGHT, "38");//高度
        registrationBean.addInitParameter(Constants.KAPTCHA_IMAGE_WIDTH, "80");//宽度
        registrationBean.addInitParameter(Constants.KAPTCHA_TEXTPRODUCER_FONT_SIZE, "26");//字体大小
        registrationBean.addInitParameter(Constants.KAPTCHA_BORDER_THICKNESS, "1"); //边框
        registrationBean.addInitParameter(Constants.KAPTCHA_TEXTPRODUCER_FONT_COLOR, "red"); //文字颜色

        //可以设置很多属性,具体看com.google.code.kaptcha.Constants
//      kaptcha.border  是否有边框  默认为true  我们可以自己设置yes,no
//      kaptcha.border.color   边框颜色   默认为Color.BLACK
//      kaptcha.border.thickness  边框粗细度  默认为1
//      kaptcha.producer.impl   验证码生成器  默认为DefaultKaptcha
//      kaptcha.textproducer.impl   验证码文本生成器  默认为DefaultTextCreator
//      kaptcha.textproducer.char.string   验证码文本字符内容范围  默认为abcde2345678gfynmnpwx
//      kaptcha.textproducer.char.length   验证码文本字符长度  默认为5
//      kaptcha.textproducer.font.names    验证码文本字体样式  默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
//      kaptcha.textproducer.font.size   验证码文本字符大小  默认为40
//      kaptcha.textproducer.font.color  验证码文本字符颜色  默认为Color.BLACK
//      kaptcha.textproducer.char.space  验证码文本字符间距  默认为2
//      kaptcha.noise.impl    验证码噪点生成对象  默认为DefaultNoise
//      kaptcha.noise.color   验证码噪点颜色   默认为Color.BLACK
//      kaptcha.obscurificator.impl   验证码样式引擎  默认为WaterRipple
//      kaptcha.word.impl   验证码文本字符渲染   默认为DefaultWordRenderer
//      kaptcha.background.impl   验证码背景生成器   默认为DefaultBackground
//      kaptcha.background.clear.from   验证码背景颜色渐进   默认为Color.LIGHT_GRAY
//      kaptcha.background.clear.to   验证码背景颜色渐进   默认为Color.WHITE
//      kaptcha.image.width   验证码图片宽度  默认为200
//      kaptcha.image.height  验证码图片高度  默认为50
        return registrationBean;

    }
}

3.前端页面

<div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline">
        <input type="text" name="captcha" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input" style="width: 110px;float: left">
        <img src="kaptcha.jpg" name="captcha"  id="captcha" style="float: right" onclick="refreshCode(this)"/>
    </div>
</div>

这里的 onclick="refreshCode(this)"  是点击刷新验证码;

配置完上面3步可以访问你的页面看看验证码是否显示,如果显示则配置成功,就可以进行后续判断验证码阶段。

image.png

4.判断验证码

我这里由于使用了shiro(其他也一样),我简化了判断的方法,直接在你登陆的控制器内判断即可,Kaptcha会把前端的验证码信息存放到session中,所有我们在登陆的控制器用session中的验证码和前端表单传过来的验证码比较即可;

public String loginUser(@RequestParam("username")String username,
                        @RequestParam("password")String password,
                        @RequestParam("captcha") String captcha,
                        HttpSession httpSession){
    String sessionCaptcha = httpSession.getAttribute("KAPTCHA_SESSION_KEY").toString();
    if(!captcha.equals(sessionCaptcha)){
        return WebUtils.getInstance().writeMsg(ResultCode.ERROR, "验证码输入错误");
    }
    ......
 }

上面是我的验证代码,可以参考一下,注意获取session中的验证码的key为   “KAPTCHA_SESSION_KEY”  

5.点击刷新验证码

前面也说了点击刷新,就是一个方法,需要加入时间更新,代码如下:

function refreshCode(){
    var captcha = document.getElementById("captcha");
    captcha.src = "/kaptcha.jpg?t=" + new Date().getTime();
}


以上就是在项目中添加验证码的方法,希望有所帮助。一些配置项可以查看第2步中的配置类或者百度(-_-)。

本文作者:wjy329
版权声明:本博客除特殊说明外均属本人原创。如需转载请署名作者及文章出处。
评论