登录 注册

springSecurity 图片验证码

本贴最后更新于 1600 天前，其中的信息可能已经斗转星移

简介

验证码（CAPTCHA）的全称是 Completely Automated Public Turing test to tell Computers and
Humans Apart，翻译过来就是“全自动区分计算机和人类的图灵测试”。通俗地讲，验证码就是为了防
止恶意用户暴力重试而设置的。不管是用户注册、用户登录，还是论坛发帖，如果不加以限制，一旦
某些恶意用户利用计算机发起无限重试，就很容易使系统遭受破坏。

通过过滤器实现

自定义过滤器
在 Spring Security 中，实现验证码校验的方式有很多种，最简单的方式就是自定义一个专门处理验
证码逻辑的过滤器，将其添加到 Spring Security 过滤器链的合适位置。当匹配到登录请求时，立刻对验
证码进行校验，成功则放行，失败则提前结束整个验证请求。
图形验证码过滤器

  • 1、验证码图片准备
    毋庸置疑，要想实现图形验证码校验功能，首先应当有一个用于获取图形验证码的 API。绘制图
    形验证码的方法有很多，使用开源的验证码组件即可，例如 kaptcha
  <dependency>
            <groupId>com.github.penggle</groupId>
            <artifactId>kaptcha</artifactId>
            <version>2.3.2</version>
        </dependency>

首先配置一个 kaptcha 实例

package club.xwzzy.springbootsecurity_imageverification.config;

import com.google.code.kaptcha.Producer;
import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Properties;

@Configuration
public class CaptchaConfig {

    @Bean
    public Producer captcha() {
        // 配置图形验证码的基本参数
        Properties properties = new Properties();
        // 图片宽度
        properties.setProperty("kaptcha.image.width", "150");
        // 图片长度
        properties.setProperty("kaptcha.image.height", "50");
        // 字符集
        properties.setProperty("kaptcha.textproducer.char.string", "0123456789");
        // 字符长度
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        Config config = new Config(properties);
        // 使用默认的图形验证码实现，当然也可以自定义实现
        DefaultKaptcha defaultKaptcha = new DefaultKaptcha();
        defaultKaptcha.setConfig(config);
        return defaultKaptcha;
    }

}

接着创建一个 CaptchaController，用于获取图形验证码。

package club.xwzzy.springbootsecurity_imageverification.controller;

import com.google.code.kaptcha.Producer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

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

@Controller
public class CaptchaController {

    @Autowired
    private Producer captchaProducer;

    @GetMapping("/captcha.jpg")
    public void getCaptcha(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 设置内容类型
        response.setContentType("image/jpeg");
        // 创建验证码文本
        String capText = captchaProducer.createText();
        // 将验证码文本设置到session
        request.getSession().setAttribute("captcha", capText);
        // 创建验证码图片
        BufferedImage bi = captchaProducer.createImage(capText);
        // 获取响应输出流
        ServletOutputStream out = response.getOutputStream();
        // 将图片验证码数据写到响应输出流
        ImageIO.write(bi, "jpg", out);
        // 推送并关闭响应输出流
        try {
            out.flush();
        } finally {
            out.close();
        }
    }

}

当用户访问/captcha.jpg 时，即可得到一张携带验证码的图片，验证码文本则被存放到 session 中用于后续的校验。

  • 2、自定义异常
package club.xwzzy.springbootsecurity_imageverification.exception;

import org.springframework.security.core.AuthenticationException;

public class VerificationCodeException extends AuthenticationException {

    public VerificationCodeException () {
        super("图形验证码校验失败");
    }

}
  • 3、自定义过滤器
package club.xwzzy.springbootsecurity_imageverification.filter;


import club.xwzzy.springbootsecurity_imageverification.authentication.SecurityAuthenticationFailureHandler;
import club.xwzzy.springbootsecurity_imageverification.exception.VerificationCodeException;
import org.springframework.security.web.authentication.AuthenticationFailureHandler;
import org.springframework.util.StringUtils;
import org.springframework.web.filter.OncePerRequestFilter;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

public class VerificationCodeFilter extends OncePerRequestFilter {

    private AuthenticationFailureHandler authenticationFailureHandler = new SecurityAuthenticationFailureHandler();

    @Override
    protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
        // 非登录请求不校验验证码
        if (!"/login".equals(httpServletRequest.getRequestURI())) {
            filterChain.doFilter(httpServletRequest, httpServletResponse);
        } else {
            try {
                verificationCode(httpServletRequest);
                filterChain.doFilter(httpServletRequest, httpServletResponse);
            } catch (VerificationCodeException e) {
                authenticationFailureHandler.onAuthenticationFailure(httpServletRequest, httpServletResponse, e);
            }
        }
    }

    public void verificationCode (HttpServletRequest httpServletRequest) throws VerificationCodeException {
        String requestCode = httpServletRequest.getParameter("captcha");
        HttpSession session = httpServletRequest.getSession();
        String savedCode = (String) session.getAttribute("captcha");
        if (!StringUtils.isEmpty(savedCode)) {
            // 随手清除验证码，不管是失败还是成功，所以客户端应在登录失败时刷新验证码
            session.removeAttribute("captcha");
        }
        // 校验不通过抛出异常
        if (StringUtils.isEmpty(requestCode) || StringUtils.isEmpty(savedCode) || !requestCode.equals(savedCode)) {
            throw new VerificationCodeException();
        }
    }
}
  • 4、添加过滤器
 // 将过滤器添加在UsernamePasswordAuthenticationFilter之前
        http.addFilterBefore(new VerificationCodeFilter(), UsernamePasswordAuthenticationFilter.class);
  • 5、html
<!DOCTYPE HTML>
<html>
    <head>
        <title>登录</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <div class="login">
            <h2>Acced Form</h2>
            <div class="login-top">
                <h1>LOGIN FORM</h1>
                <form action="/login" method="post">
                    <input type="text" name="username" placeholder="username" />
                    <input type="password" name="password" placeholder="password" />
                    <div style="display: flex;">
                        <!-- 新增图形验证码的输入框 -->
                        <input type="text" name="captcha" placeholder="captcha" />
                        <!-- 图片指向图形验证码API -->
                        <img src="/captcha.jpg" alt="captcha" height="50px" width="150px" style="margin-left: 20px;">
                    </div>
                    <div class="forgot">
                        <a href="#">forgot Password</a>
                        <input type="submit" value="Login" >
                    </div>
                </form>
            </div>
            <div class="login-bottom">
                <h3>New User &nbsp;<a href="#">Register</a>&nbsp Here</h3>
            </div>
        </div>

        <style>
            html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
            article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
            ol,ul{list-style:none;margin:0;padding:0;}
            blockquote,q{quotes:none;}
            blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
            table{border-collapse:collapse;border-spacing:0;}
            a{text-decoration:none;}
            nav.vertical ul li{	display:block;}
            nav.horizontal ul li{	display: inline-block;}
            img{max-width:100%;}
            body{
                background: #3f3f3f;
                padding:100px 0px 30px 0px;
                font-family: 'Roboto', sans-serif;
                font-size: 100%;
            }
            .login {
                width: 32%;
                margin: 0 auto;
            }
            .login h2 {
                font-size: 30px;
                font-weight: 700;
                color: #fff;
                text-align: center;
                margin: 0px 0px 50px 0px;
                font-family: 'Droid Serif', serif;
            }
            .login-top {
                background: #E1E1E1;
                border-radius: 25px 25px 0px 0px;
                -webkit-border-radius:  25px 25px 0px 0px;
                -moz-border-radius: 25px 25px 0px 0px;
                -o-border-radius: 25px 25px 0px 0px;
                padding: 40px 60px;
            }
            .login-top h1 {
                text-align: center;
                font-size: 27px;
                font-weight: 500;
                color: #F45B4B;
                margin: 0px 0px 20px 0px;
            }
            .login-top input[type="text"] {
                outline: none;
                font-size: 15px;
                font-weight: 500;
                color: #818181;
                padding: 15px 20px;
                background: #CACACA;
                border: 1px solid #ccc;
                border-radius:25px;
                -webkit-border-radius: 25px;
                -moz-border-radius: 25px;
                -o-border-radius: 25px;
                margin: 0px 0px 12px 0px;
                width: 88%;
                -webkit-appearance: none;
            }
            .login-top input[type="password"]{
                outline: none;
                font-size: 15px;
                font-weight: 500;
                color: #818181;
                padding: 15px 20px;
                background: #CACACA;
                border: 1px solid #ccc;
                border-radius:25px;
                -webkit-border-radius: 25px;
                -moz-border-radius: 25px;
                -o-border-radius: 25px;
                margin: 0px 0px 12px 0px;
                width: 88%;
                -webkit-appearance: none;
            }
            .forgot  a{
                font-size: 13px;
                font-weight: 500;
                color: #F45B4B;
                display: inline-block;
                border-right: 2px solid #F45B4B;
                padding: 0px 7px 0px 0px;
            }
            .forgot  a:hover{
                color: #818181;
            }
            .forgot input[type="submit"] {
                background: #F45B4B;
                color: #FFF;
                font-size: 17px;
                font-weight: 400;
                padding: 8px 7px;
                width: 20%;
                display: inline-block;
                cursor: pointer;
                border-radius: 6px;
                -webkit-border-radius: 19px;
                -moz-border-radius: 6px;
                -o-border-radius: 6px;
                margin: 0px 7px 0px 3px;
                outline: none;
                border: none;
            }
            .forgot input[type="submit"]:hover {
                background:#818181;
                transition: 0.5s all;
                -webkit-transition: 0.5s all;
                -moz-transition: 0.5s all;
                -o-transition: 0.5s all;
            }
            .forgot {
                text-align: right;
            }
            .login-bottom {
                background: #E15748;
                padding: 30px 65px;
                border-radius: 0px 0px 25px 25px;
                -webkit-border-radius:  0px 0px 25px 25px;
                -moz-border-radius: 0px 0px 25px 25px;
                -o-border-radius: 0px 0px 25px 25px;
                text-align: right;
                border-top: 2px solid #AD4337;
            }
            .login-bottom h3 {
                font-size: 14px;
                font-weight: 500;
                color: #fff;
            }
            .login-bottom h3 a {
                font-size: 25px;
                font-weight: 500;
                color: #fff;
            }
            .login-bottom h3 a:hover {
                color:#696969;
                transition: 0.5s all;
                -webkit-transition: 0.5s all;
                -moz-transition: 0.5s all;
                -o-transition: 0.5s all;
            }
            .copyright p {
                font-size: 15px;
                font-weight: 400;
                color: #fff;
            }
            .copyright p a{
                font-size: 15px;
                font-weight: 400;
                color: #E15748;
            }
            .copyright p a:hover{
                color: #fff;
                transition: 0.5s all;
                -webkit-transition: 0.5s all;
                -moz-transition: 0.5s all;
                -o-transition: 0.5s all;
            }
            @media(max-width:1440px){
                .login {
                    width: 35%;
                }
            }
            @media(max-width:1366px){
                .login {
                    width: 37%;
                }
            }
            @media(max-width:1280px){
                .login {
                    width: 40%;
                }
            }
            @media(max-width:1024px){
                .login {
                    width: 48%;
                }
            }
            @media(max-width:768px){
                .login {
                    width: 65%;
                }
                .login-top h1 {
                    font-size: 25px;
                }
                .login-bottom h3 a {
                    font-size: 22px;
                }
                body {
                    padding: 100px 0px 0px 0px;
                }
                .login h2 {
                    font-size: 28px;
                }
            }
            @media(max-width:640px){
                .login-top h1 {
                    font-size: 23px;
                }
                .forgot input[type="submit"] {
                    font-size: 15px;
                    width: 22%;
                }
                .login-top input[type="text"] {
                    padding: 12px 20px;
                }
                .login-top input[type="password"] {
                    padding: 12px 20px;
                }
                .login-bottom h3 a {
                    font-size: 19px;
                }
                .login-bottom h3 {
                    font-size: 13px;
                }
                body {
                    padding: 110px 0px 0px 0px;
                }
            }
            @media(max-width:480px){
                .login {
                    width: 80%;
                }
                .login-top h1 {
                    font-size: 21px;
                }
                .login-top input[type="text"] {
                    width: 85%;
                }
                .login-top {
                    padding: 30px 40px;
                }
                .login-top input[type="password"] {
                    width: 85%;
                }
                .login h2 {
                    font-size: 25px;
                }
            }
            @media(max-width:320px){
                .login {
                    width: 90%;
                }
                .login-top {
                    padding: 20px 25px;
                }
                .login-top input[type="text"] {
                    width: 81%;
                    padding: 10px 20px;
                    font-size: 13px;
                    margin: 0px 0px 7px 0px;
                }
                .login-top input[type="password"] {
                    width: 81%;
                    padding: 10px 20px;
                    font-size: 13px;
                    margin: 0px 0px 7px 0px;
                }
                .forgot input[type="submit"] {
                    font-size: 11px;
                    width: 25%;
                    padding: 6px 7px;
                }
                .forgot  a {
                    font-size: 11px;
                }
                .login-bottom {
                    padding: 20px 25px;
                }
                .login-bottom h3 {
                    font-size: 11px;
                }
                .login-bottom h3 a {
                    font-size: 17px;
                }
                body {
                    padding: 50px 0px 0px 0px;
                }
                .copyright p {
                    font-size: 13px;
                }
                .copyright p a{
                    font-size: 13px;
                }
                .login h2 {
                    font-size: 23px;
                    margin:0px 0px 35px 0px;
                }
            }
        </style>
    </body>
</html>

至此，使用过滤器的方式实现验证码结束，属于 Servlet 层面，简单、易理解。
代码地址

  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3168 引用 • 8207 回帖
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    941 引用 • 1458 回帖 • 153 关注
412 26 61 66 11 22 1 15 197

相关帖子

回帖
springSecurity 图片验证码

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
2457081614
回帖
2
 帖子
16
 积分
501

近期热议

推荐标签 标签

  • DNSPod

    DNSPod 建立于 2006 年 3 月份，是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析，让电信用户访问电信的服务器，网通的用户访问网通的服务器，教育网的用户访问教育网的服务器，达到互联互通的效果。

    6 引用 • 26 回帖 • 522 关注
  • GAE

    Google App Engine（GAE）是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 687 关注
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 3 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具，支持本地 Markdown 文件编辑，支持双向链接和关系图。

    A second brain, for you, forever.

    10 引用 • 85 回帖 • 2 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司（简称：阿里巴巴集团）是以曾担任英语教师的马云为首的 18 人，于 1999 年在中国杭州创立，他们相信互联网能够创造公平的竞争环境，让小企业通过创新与科技扩展业务，并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 238 关注
  • 负能量

    上帝为你关上了一扇门，然后就去睡觉了....努力不一定能成功，但不努力一定很轻松 (° ー °〃)

    85 引用 • 1201 回帖 • 449 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流，分享无限上传的图片，发布链接和视频，更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 454 关注
  • 大数据

    大数据（big data）是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 3 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 5 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 42 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架，使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用，例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 22 关注
  • WebComponents

    Web Components 是 W3C 定义的标准，它给了前端开发者扩展浏览器标签的能力，可以方便地定制可复用组件，更好的进行模块化开发，解放了前端开发者的生产力。

    1 引用 • 23 关注
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 590 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    396 引用 • 3416 回帖
  • gRpc
    10 引用 • 8 回帖 • 56 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 610 关注
  • 笔记

    好记性不如烂笔头。

    304 引用 • 777 回帖
  • JSON

    JSON （JavaScript Object Notation）是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    51 引用 • 190 回帖
  • LaTeX

    LaTeX（音译“拉泰赫”）是一种基于 ΤΕΧ 的排版系统，由美国计算机学家莱斯利·兰伯特（Leslie Lamport）在 20 世纪 80 年代初期开发，利用这种格式，即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能，能在几天，甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式，这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    9 引用 • 32 回帖 • 165 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖 • 31 关注
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖
  • 职场

    找到自己的位置，萌新烦恼少。

    126 引用 • 1699 回帖 • 2 关注
  • SSL

    SSL（Secure Sockets Layer 安全套接层），及其继任者传输层安全（Transport Layer Security，TLS）是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    69 引用 • 190 回帖 • 497 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 39 关注
  • Sillot

    Sillot （汐洛）孵化自思源笔记，致力于服务智慧新彖乄，具有彖乄驱动、极致优雅、开发者友好的特点
    Github 地址：https://github.com/Hi-Windom/Sillot

    16 引用 • 6 回帖 • 28 关注

最新标签