登录 注册

springSecurity 图片验证码

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

简介

验证码（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 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3201 引用 • 8216 回帖
  • Spring

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

    949 引用 • 1460 回帖
502 27 61 141 14 23 1 15 207

相关帖子

回帖
springSecurity 图片验证码

欢迎来到这里！

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

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

近期热议

推荐标签 标签

  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations，简称 DJI)，成立于 2006 年，是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商，客户遍布全球 100 多个国家。通过持续的创新，大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 1 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 2 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug（漏洞）。

    76 引用 • 1742 回帖 • 7 关注
  • Spring

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

    949 引用 • 1460 回帖
  • CAP

    CAP 指的是在一个分布式系统中， Consistency（一致性）、 Availability（可用性）、Partition tolerance（分区容错性），三者不可兼得。

    12 引用 • 5 回帖 • 631 关注
  • Follow
    4 引用 • 12 回帖 • 11 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 489 关注
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 251 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 648 关注
  • 链书

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

    链书社

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

    14 引用 • 257 回帖
  • 尊园地产

    昆明尊园房地产经纪有限公司，即：Kunming Zunyuan Property Agency Company Limited（简称“尊园地产”）于 2007 年 6 月开始筹备，2007 年 8 月 18 日正式成立，注册资本 200 万元，公司性质为股份经纪有限公司，主营业务为：代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 787 关注
  • Facebook

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

    4 引用 • 15 回帖 • 448 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 390 关注
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 1 关注
  • 倾城之链
    23 引用 • 66 回帖 • 168 关注
  • 职场

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

    127 引用 • 1708 回帖
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    315 引用 • 547 回帖
  • JWT

    JWT（JSON Web Token）是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准（RFC 7519），定义了一种简洁的，自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 22 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 373 关注
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题，项目仓库：https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖 • 1 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 636 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验，及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    199 引用 • 543 回帖 • 1 关注
  • 反馈

    Communication channel for makers and users.

    121 引用 • 907 回帖 • 273 关注
  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    268 引用 • 666 回帖 • 1 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统（DBMS），它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的，并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • 叶归
    8 引用 • 36 回帖 • 17 关注

最新标签