码迷,mamicode.com
首页 > 编程语言 > 详细

SpringMVC 整合 kaptcha(验证码功能)

时间:2018-11-21 16:05:26      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:form   验证码   ack   label   mat   tor   pac   ima   username   

一、添加依赖

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

二、springmvc配置文件

<!-- kaptcha 验证码配置 -->
    <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
        <property name="config">
            <bean class="com.google.code.kaptcha.util.Config">
                <constructor-arg>
                    <props>
                        <!-- 图片边框:yes , no -->
                        <prop key="kaptcha.border">yes</prop>
                        <!-- 边框颜色: r,g,b (and optional alpha) 或者 white,black,blue -->
                        <prop key="kaptcha.border.color">105,179,90</prop>
                        <!-- 边框厚度: 1 (必须大于0) -->
                        <prop key="kaptcha.border.thickness">1</prop>
                        <!-- 字体颜色: r,g,b 或者 white,black,blue -->
                        <prop key="kaptcha.textproducer.font.color">blue</prop>
                        <!-- 图片宽: 125 -->
                        <prop key="kaptcha.image.width">125</prop>
                        <!-- 图片高: 45 -->
                        <prop key="kaptcha.image.height">45</prop>
                        <!-- 字体大小: 45px -->
                        <prop key="kaptcha.textproducer.font.size">45</prop>
                        <!-- session中存放验证码的key键,默认值: KAPTCHA_SESSION_KEY -->
                        <prop key="kaptcha.session.key">code</prop>
                        <!-- 验证码长度: 4 -->
                        <prop key="kaptcha.textproducer.char.length">4</prop>
                        <!-- 文字间隔: 2 -->
                        <prop key="kaptcha.textproducer.char.space">2</prop>
                        <!-- 字体 -->
                        <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop>
                        <!-- 文本集合,验证码值从此集合中获取 -->
                        <prop key="kaptcha.textproducer.char.string">1234567890</prop>
                        <!-- 干扰颜色: r,g,b 或者 white,black,blue -->
                        <prop key="kaptcha.noise.color">black</prop>
                        <!-- 背景颜色渐变,开始颜色: r,g,b 或者 white,black,blue -->
                        <prop key="kaptcha.background.clear.from">105,179,90</prop>
                        <!-- 背景颜色渐变,结束颜色: r,g,b 或者 white,black,blue -->
                        <prop key="kaptcha.background.clear.to">white</prop>
                    </props>
                </constructor-arg>
            </bean>
        </property>
    </bean>

三、后端

package com.beovo.dsd.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 javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
import java.io.IOException;

/**
 * 验证码控制器
 * @author Jimc.
 * @since 2018/11/21.
 */
@Controller
public class CaptchaController {


    @Autowired
    private Producer captchaProducer;

    /**
     * 获取 kaptcha 验证码
     *
     * @param request
     * @param response
     * @throws Exception
     */
    @RequestMapping(value = "captcha")
    public void getKaptchaImage(HttpServletRequest request, HttpServletResponse response) {
        HttpSession session = request.getSession();
        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 = captchaProducer.createText();
        session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
        // 向客户端写出
        ServletOutputStream out = null;
        try {
            BufferedImage bi = captchaProducer.createImage(capText);
            out = response.getOutputStream();
            ImageIO.write(bi, "jpg", out);
            out.flush();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                if (out != null){
                    out.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

四、前端

<form>
    <fieldset>
        <ul>
            <li class="frame-style form-error">
                <label class="user-icon" for="username"></label>
                <input name="username" type="text" id="username"/>
                <i>用户名</i>
            </li>
            <li class="frame-style form-error">
                <label class="password-icon" for="password"></label>
                <input name="password" type="password" id="password"/>
                <i>密码</i>
            </li>
            <li class="frame-style form-error">
                <label class="captcha-icon" for="captcha"></label>
                <input name="captcha" type="text" id="captcha" class="captcha"/>
                <i>验证码</i>
                <div class="captcha-region">
                    <img src="${ctxPath}/captcha" id="img-captcha">
                </div>
            </li>

        </ul>
        <div class="space"></div>

        <div class="clearfix">
            <label class="inline">
                <input type="checkbox" class="ace">
                <span class="lbl">记住密码</span>
            </label>

            <button type="button" class="width-35 pull-right btn btn-sm btn-primary" onclick="login()">
                <i class="icon-key"></i>
                登录
            </button>
        </div>

        <div class="space-4"></div>
    </fieldset>
</form>
<script type="text/javascript">
    $(function () {
        $("#img-captcha").on(click, function () {
            $(this).attr(src, ${ctxPath}/captcha? + Math.floor(Math.random() * 10000)).fadeIn();
        });
    })
</script>

技术分享图片

 

SpringMVC 整合 kaptcha(验证码功能)

标签:form   验证码   ack   label   mat   tor   pac   ima   username   

原文地址:https://www.cnblogs.com/Jimc/p/9994295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!