Kapacha验证码工具的使用

分类:SpringBoot
作者:ZhouJianGuo
发布时间:2019年09月23日 17:26:51

1.在maven依赖配置文件pom.xml中添加以下依赖:

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

2.在SpringBoot 配置文件application.properties中添加以下参数:

#-----------图形验证码----------------
kaptcha.border=no
kaptcha.textproducer.font.color=red
kaptcha.image.width=135
kaptcha.textproducer.char.string=ACDEFHKPRSTWX345679
kaptcha.image.height=50
kaptcha.textproducer.font.size=43
kaptcha.noise.color=black
kaptcha.textproducer.char.length=4
kaptcha.textproducer.font.names=Arial

注:相关属性在第三步内有注释。

3.新建一个类,继承WebMvcConfigurer,@Value部分为spring boot配置文件中读取的Kaptcha的相关配置。

@Configuration
public class MyWebConfigureAdapter implements WebMvcConfigurer {
@Value("${kaptcha.border}")
    private String border;

    @Value("${kaptcha.textproducer.font.color}")
    private String fcolor;

    @Value("${kaptcha.image.width}")
    private String width;

    @Value("${kaptcha.textproducer.char.string}")
    private String cString;

    @Value("${kaptcha.image.height}")
    private String height;

    @Value("${kaptcha.textproducer.font.size}")
    private String fsize;

    @Value("${kaptcha.noise.color}")
    private String nColor;

    @Value("${kaptcha.textproducer.char.length}")
    private String clength;

    @Value("${kaptcha.textproducer.font.names}")
    private String fnames;
@Bean
    public ServletRegistrationBean<KaptchaServlet>servletServletRegistrationBean()throws ServletException{
        ServletRegistrationBean<KaptchaServlet> servlet = new ServletRegistrationBean<KaptchaServlet>(new KaptchaServlet(), "/Kaptcha");//前端获取验证码图片的访问路径
        servlet.addInitParameter("kaptcha.border", border);// 无边框
        servlet.addInitParameter("kaptcha.textproducer.font.color", fcolor); // 字体颜色
        servlet.addInitParameter("kaptcha.image.width", width);// 图片宽度
        servlet.addInitParameter("kaptcha.textproducer.char.string", cString);// 使用哪些字符生成验证码
        servlet.addInitParameter("kaptcha.image.height", height);// 图片高度
        servlet.addInitParameter("kaptcha.textproducer.font.size", fsize);// 字体大小
        servlet.addInitParameter("kaptcha.noise.color", nColor);// 干扰线的颜色
        servlet.addInitParameter("kaptcha.textproducer.char.length", clength);// 字符个数
        servlet.addInitParameter("kaptcha.textproducer.font.names", fnames);// 字体
        return servlet;
    }

 

4.html页面,在需要添加验证码的地方添加如下html标签语句:

<input type="text" placeholder="验证码" class="form-control" id="verifyAdd">
<img id="verifyImgAdd" alt="点击更换" title="点击更换" onclick="changeVerifyCode(this)" src="/Kaptcha">

 

5.JS函数:changeVerifyCode()的实现如下:

function changeVerifyCode(img) {
            img.src="/Kaptcha?"+Math.floor(Math.random()*100);
        }

6.新建一个工具类(如果是Spring工程,建议将这个类放在util包内)

public class CodeUtil {
    /**
     * 检查验证码是否和预期相符
     *
     * @param request
     * @return
     */
    public static boolean checkVerifyCode(HttpServletRequest request,String verifyCodeActual) {
        String verifyCodeExpected = (String) request.getSession()
                .getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
        if (verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)) {
            return false;
        }
        return true;
    }
}

7.为了防止暴力破解验证码,每次提交请求后,无论是否成功,我们都要重新更换验证码图片。这里为了方便,我们可以直接调用img标签的.click()方法,就可以实现请求获取新的验证码了。注意:result.code是我自定义的一个json返回对象的变量,使用时需要对应的改动!

success:function (result) {
                    if(result.code==200){
                        //提示提交成功
                    }else if(result.code==199){
                        //提示提交失败,验证码错误
                    }
                    $("#verifyImgAdd").click();//更换验证码
                }

8.我们需要在controller内调用这个工具类,来实现对验证码的校验。

if(CodeUtil.checkVerifyCode(request,dto.getVerifyCode)==true){
 //这里填写验证成功后调用的服务
}else{
    //这里填写验证失败后的返回值
  }

9.使用效果

图一:错误验证码提交提示

10.总结:Kaptcha验证码的使用逻辑其实就是配置了一个servlet,当你发起一次该servlet的请求时,它会返回一个图片数据,并且会在request中产生对应的验证码,然后我们需要做的就是在controller处对用户输入的验证码和实际验证码进行比对验证,如果相同,则验证通过,否则不通过,需要注意的是,不管验证码是否验证通过,我们都要重新生成验证码,原因是为了防止暴力破解验证码。

版权声明:本站所有文章除特别声明外,转载请注明出处!
本文最后修改于:2019-10-19 17:14:24
许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

发表评论
请先登录后再发表评论~
评论 共0条

当前日志还没有评论,赶紧成为第一个评论者吧!
{{articleCommentItem.username}}
评论于 {{articleCommentItem.createBy}}
{{articleCommentItem.content}}
{{replyItem.username}}
回复于 {{replyItem.createBy}}
@{{replyItem.targetUsername}} {{replyItem.content}}

@CopyRight 2019 ZhouJianGuo版权所有
苏ICP备19061991号