springSecurity 图片验证码

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

简介

验证码(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 引用 • 8217 回帖
  • Spring

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

    947 引用 • 1460 回帖 • 2 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • OpenResty

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

    17 引用 • 53 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    187 引用 • 832 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 2 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    118 引用 • 54 回帖 • 5 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 5 关注
  • DNSPod

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

    6 引用 • 26 回帖 • 533 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖
  • danl
    179 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    7 引用 • 28 回帖
  • 印象笔记
    3 引用 • 16 回帖 • 2 关注
  • 支付宝

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

    29 引用 • 347 回帖
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 232 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2040 回帖
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 3 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 679 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 82 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖 • 1 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 37 关注
  • 开源

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

    415 引用 • 3594 回帖
  • sts
    2 引用 • 2 回帖 • 243 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    29 引用 • 230 回帖 • 122 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 184 关注
  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    500 引用 • 1396 回帖 • 251 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    77 引用 • 37 回帖
  • 黑曜石

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

    A second brain, for you, forever.

    24 引用 • 246 回帖