引入kaptcha实现验证码验证

1.导入jar包，

可以选择去 https://mvnrepository.com 里面搜索，也可以直接复制下面的代码

2.复制到maven配置文件pom.xml中并保存

    <dependency>

        <groupId>com.github.penggle</groupId>

        <artifactId>kaptcha</artifactId>

        <version>2.3.2</version>

    </dependency>

3.成功导入jar包以后，去web.xml文件中配置kaptcha与它的servlet映射等

<servlet>

        <servlet-name>Kaptcha</servlet-name>

        <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>

        <!-- 定义Kaptch样式 是否有边框 这里为 无 -->

        <init-param>

            <param-name>Kaptcha.border</param-name>

            <param-value>no</param-value>

        </init-param>

        <!-- 字体颜色  -->

        <init-param>

            <param-name>kaptcha.textproducer.font.color</param-name>

            <param-value>black</param-value>

        </init-param>

        <!-- 图片宽度 -->

        <init-param>

            <param-name>kaptcha.image.width</param-name>

            <param-value>105</param-value>

        </init-param>

        <!-- 验证码使用哪些字符生成 -->

        <init-param>

            <param-name>kaptcha.textproducer.char.string</param-name>

            <param-value>ACDEFHKPRSTWX345679</param-value>

        </init-param>

        <!-- 图片高度 -->

        <init-param>

            <param-name>kaptcha.image.height</param-name>

            <param-value>35</param-value>

        </init-param>

        <!-- 字体大小 -->

        <init-param>

            <param-name>kaptcha.textproducer.font.size</param-name>

            <param-value>30</param-value>

        </init-param>

        <!-- 干扰线的颜色，验证码的背景 黑色-->

        <init-param>

            <param-name>Kaptcha.noise.color</param-name>

            <param-value>black</param-value>

        </init-param>

        <!-- 字符个数 4个-->

        <init-param>

            <param-name>kaptcha.textproducer.char.length</param-name>

            <param-value>4</param-value>

        </init-param>

        <!-- 字体 宋体-->

        <init-param>

            <param-name>Kaptcha.testproducer.font.names</param-name>

            <param-value>Arial</param-value>

        </init-param>
 </servlet>

    <servlet-mapping>

        <servlet-name>Kaptcha</servlet-name>

        <url-pattern>/Kaptcha</url-pattern>

    </servlet-mapping>

这里附上kaptcha可配置项参考（根据自己喜好设置）：

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

3.接着去页面添加对应控件标签,这里给验证码图片定义了一个js点击事件

<form>

<img id="captcha_img" alt="点击更换" title="点击更换" onclick="changeVerifyCode(this)" src="../Kaptcha" >

<input type="text" id="j_captcha" >

<button type="submit" id="submit">提交</button>

</form>

function changeVerifyCode(img){

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

}

这里changeVerifyCode函数其实就是调用了验证码的servlet去生成新的验证码

接着在点击提交的时候去获取输入的验证码，并随着formData提交给后台

$('#submit').click(function(){
var formData = new FormData();

var verifyCodeActual = $('#j_captcha').val();

            //点击提交时，判断验证码是否为空，如果为空，提示输入验证码

            if(!verifyCodeActual){

                $.toast('请输入验');

                return;

            }

            //如果不为空，将验证码塞进formData里面去

            formData.append('verifyCodeActual',verifyCodeActual);

            //不管提交成功与否，验证码都会更换

　　　　　　  $('#captcha_img').click();

｝

提交到Controller层以后在里面处理前端传来的其他信息之前先进行验证码的校验

这之前需要先编写一个校验验证码的工具类：

public class CodeUtil {

    /**

     * 判断验证码输入是否正确

     * @param request

     * @return

     */

    public static boolean chekVerifyCode(HttpServletRequest request) {

        //图片里的验证码，从seesion中获取。verifyCodeExepected这个为实际的验证码

        String verifyCodeExepected = (String)request.getSession().getAttribute(

                com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);

        //verifyCodeActual这个为输入的验证码。将request中对应的key转换为string类型的

        String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");

        //如果输入验证码与实际验证码不相等或空返回false，如果输入验证码不为空切与实际验证码相等，返回true。

        if(verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExepected)) {

            return false;

        }

        return true;

    }

}

这里如果你的verifyCodeActual获取不到值，看下你前端传来的request是否含有文件流，如果有，说明你缺少处理文件流的MultipartResolver，因为前台传入了文件流，后台没法识别的到，导致request中session整个key都是空的，所以对于这种form里面有文件流的情况，就需要在配置文件中配置一个文件上传解析器。（我配在了springmvc的配置文件中）

在配置之前，你要确保有这个文件上传处理依赖的jar包：

<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>

<!-- 文件上传解析器 -->

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

        <!-- 默认编码 -->

        <property name="defaultEncoding" value="utf-8"></property>

        <!-- 文件上传最大尺寸 单位是字节 1024字节=1kb 1024kb=1mb-->

        <property name="maxUploadSize" value="20971520"></property>

        <!-- 最大内存 20MB -->

        <property name="maxInMemorySize" value="20971520"></property>

    </bean>

接着就可以在Controller层校验验证码了：

　　　　//判断验证码输入是否正确，正确就跳出if，往下执行其他操作，若验证码输入错误，结束当前方法，向前端传错误信息

        if(!CodeUtil.chekVerifyCode(request)) {

            modelMap.put("errMsg", "输入了错误的验证码");

            return modelMap;

        }

巴特西

引入kaptcha实现验证码验证

最新文章

热门文章