Spring Security提供的图形验证码

最新推荐文章于 2024-01-14 09:40:22 发布

又再写bug

最新推荐文章于 2024-01-14 09:40:22 发布

阅读量317

点赞数

分类专栏： SpringSecurity 文章标签： java

本文链接：https://blog.youkuaiyun.com/weixin_46007404/article/details/107645653

版权

SpringSecurity 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用SpringSecurity集成Kaptcha实现图形验证码功能，包括配置验证码样式、生成及校验流程，确保系统登录安全。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Spring Security提供的图形验证码
目的：防机器暴力登陆,动态生成验证码，在登录时进行验证码校验。

示例：

在这里插入图片描述

Kaptcha：

kaptcha.border 图片边框，合法值：yes , no
kaptcha.border.color 边框颜色，合法值： r,g,b (and optional alpha) 或者 white,black,blue.
kaptcha.image.width 图片宽
kaptcha.image.height 图片高
kaptcha.producer.impl 图片实现类
kaptcha.textproducer.impl 文本实现类
kaptcha.textproducer.char.string 文本集合，验证码值从此集合中获取
kaptcha.textproducer.char.length 验证码长度
kaptcha.textproducer.font.names 字体
kaptcha.textproducer.font.size 字体大小
kaptcha.textproducer.font.color 字体颜色，合法值： r,g,b 或者 white,black,blue.
kaptcha.textproducer.char.space 文字间隔
kaptcha.noise.impl 干扰实现类
kaptcha.noise.color 干扰颜色，合法值： r,g,b 或者 white,black,blue.
kaptcha.obscurificator.impl 图片样式：水纹 com.google.code.kaptcha.impl.WaterRipple 鱼眼 com.google.code.kaptcha.impl.FishEyeGimpy 阴影 com.google.code.kaptcha.impl.ShadowGimpy
kaptcha.background.impl 背景实现类
kaptcha.background.clear.from 背景颜色渐变，开始颜色
kaptcha.background.clear.to 背景颜色渐变，结束颜色
kaptcha.word.impl 文字渲染器
kaptcha.session.key session key
kaptcha.session.date session date

代码实现：

1.Spring Security提供的kaptcha图形验证码所需依赖

<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>

2.CrowdConfig.java:
2.1：配置文件中中添加配置，在SpringSecurity过滤器前添加CodeFilter过滤器
在这里插入图片描述
2.2：图片验证码资源不能被拦截

@Configuration
@EnableWebSecurity
public class CrowdConfig extends WebSecurityConfigurerAdapter {

    //执行权限配置，如：为指定资源分配权限，开放无需权限的资源等
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        //父类中默认进行了配置，我们将其拿到子类，按照自己的需求进行修改
        http
                .addFilterBefore(new CodeFilter(), UsernamePasswordAuthenticationFilter.class)
                .authorizeRequests()//进行权限设置      
                .anyRequest()//任何请求
                .authenticated()//进行认证
                // 这是and语法，表示向后退一步，回到HttpSecurity位置的那一个级别,
                // 可以认为是使用这种方式实现HttpSecurity对象通过连续调用方法实现配置，
                // 每进行一个板块的配置完毕，则向后退一步回到HttpSecurity位置
                .and().exceptionHandling().accessDeniedPage("/decline.html")//访问拒绝后跳转的页面
                .and()
                .formLogin()//设置表单登录，后续可以在这里修改自定义登录页面
                .loginPage("/login.html") //设置自定义的登录页面

                //指定处理登录请求的路径，对应form表单的action地址
                .loginProcessingUrl("/login").permitAll()
                //设置接收表单提交的用户name，默认为username
                .usernameParameter("account")
                //设置接收表单提交的用户密码，默认为password
                .passwordParameter("password")
                //指定权限认证失败跳转的错误页面
                .failureUrl("/login.html?login=error")
                //直接访问登录页面时返回的地址,如果访问的是登录页的话返回指定的地址
                .defaultSuccessUrl("/main.html",true)
                //指定退出登录URL
                .and().logout().logoutUrl("/logout.do")
//           .logoutSuccessUrl("http://baidu.com") 设置退出后跳转的路径
                .and().rememberMe().rememberMeParameter("remember-me")//开启记住我的功能

                .and().csrf().disable() //禁用csrf功能，这里暂时用不到
        ;
    }

    //设置不需要权限认证的资源
    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers("/kaptcha","/bootstrap/**","/css/**",
                "/fonts/**","/img/**","/jquery/**","/script/**","/ztree/**","/layer/**");
    }

    //将自定义UserDetailService配置到Security中
//    @Autowired
    @Resource
    private UserDetailsService userDetailsService;
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService);
    }


    //密码加密
    @Bean
    PasswordEncoder passwordEncoder(){
        //废弃的类，表示不需要对密码进行编码，暂且先使用，后续再进行密码加密
        //不加密:NoOpPasswordEncoder
//        return NoOpPasswordEncoder.getInstance();

        //Bcrypt加密:BCryptPasswordEncoder --->encode()
        //针对正确的明文密码与密文密码进行匹配:BCryptPasswordEncoder --->matches()
        return new BCryptPasswordEncoder();
    }

		//kaptcha配置
    @Bean
    public DefaultKaptcha getDefaultKaptcha(){
        DefaultKaptcha captchaProducer = new DefaultKaptcha();
        Properties properties = new Properties();
        properties.setProperty("kaptcha.border", "yes");
        properties.setProperty("kaptcha.border.color", "105,179,90");
        properties.setProperty("kaptcha.textproducer.font.color", "blue");
        properties.setProperty("kaptcha.image.width", "80");
        properties.setProperty("kaptcha.image.height", "50");
        properties.setProperty("kaptcha.textproducer.font.size", "30");
        properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.DefaultNoise");
        properties.setProperty("kaptcha.noise.color", "green");
        properties.setProperty("kaptcha.session.key", "code");//代表表单提交时，填写的验证码的name
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        properties.setProperty("kaptcha.textproducer.char.string", "1234567890");
        properties.setProperty("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.ShadowGimpy");
        properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");
        Config config = new Config(properties);
        captchaProducer.setConfig(config);
        return captchaProducer;
    }
}

4.创建 CodeFilter.java 过滤器类:

public class CodeFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    /**
     * 过滤器的方法，拦截下来任何请求后，执行该方法
     *  我们在这里验证，如果是post方式访问登录路径/login，则说明当前请求是登录请求
     *      在这个时候，我们要进行验证码校验！！！！！！！！
     *          如何校验：
     *                 1、从session中取出session中之前生成时，存入的验证码
     *                 2、拿本次请求提交的验证码参数出来，两者进行比较
     *  否则放行
     *
     * @throws IOException
     * @throws ServletException
     */
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        //ServletRequest转换成HttpServletRequest
        //ServletResponse转换成HttpServletResponse
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse resp = (HttpServletResponse) response;
        //获取uri，就是获取你访问的路径，方便后面的判断
        String uri = req.getServletPath();

        //判断：如果是登录请求
        if (uri.equals("/login") && req.getMethod().equalsIgnoreCase("post")) {
            //进行验证码校验，session中的验证码和本次提交的验证码，进行比对

            String sessionCode = req.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY).toString();
            String formCode = req.getParameter("code").trim();

            if (StringUtils.isEmpty(formCode)) {
//                throw new RuntimeException("验证码不能为空");
                resp.sendRedirect("/login.html?codeerror=error");
                return;
            }
            if (sessionCode.equalsIgnoreCase(formCode)) {
                System.out.println("验证通过");
                System.out.println(req.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY));
            }else{
//                //否则：
//                throw new AuthenticationServiceException("验证码错误");
                resp.sendRedirect("/login.html?codeerror=error");
                return;
            }

        }
        //如果上面的if条件不成立，则说明当前路径不是登录，不需要进行拦截
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {
    }
}

5.ManagerController.java控制类：

@Controller
public class ManagerController {

    /*将验证码生产者对象注入进来
          关于配置的代码一会儿再说
          验证码的内容，数字字母、图片匡高、颜色、底色、字体颜色等等
    */
    @Autowired
    private Producer captchaProducer;

    //验证码的生成
    @GetMapping("/kaptcha")
    public void getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {
        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();
        System.out.println(capText);

        //将验证码，一份存到session中
        session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
        // 一份通过字节流，写出到客户端
        BufferedImage bi = captchaProducer.createImage(capText);
        ServletOutputStream out = response.getOutputStream();
        ImageIO.write(bi, "jpg", out);
        try {
            out.flush();
        } finally {
            out.close();
        }
    }

6.login.html中：
在这里插入图片描述
CodeFilter.java过滤器中取出name=“code”:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keys" content="">
    <meta name="author" content="">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/login.css}">
    <style>

    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <div><a class="navbar-brand" th:href="@{/index.html}" style="font-size:32px;">众筹网-创意产品众筹平台</a></div>
        </div>
    </div>
</nav>

<div class="container">
    <form class="form-signin" role="form" th:action="@{/login}" method="post">
        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 管理员登录</h2>
        <div class="form-group has-success has-feedback">
            <input name="account" type="text" class="form-control" id="account" placeholder="请输入登录账号" autofocus>
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input name="password" type="password" class="form-control" id="password" placeholder="请输入登录密码"
                   style="margin-top:10px;">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <img src="/kaptcha">
            <button id="refresh" class="btn btn-success"><i class="glyphicon glyphicon-refresh"></i></button>
            <input name="code" type="text" class="form-control" id="code" placeholder="请输入验证码"
                   style="margin-top:10px;">
            <span class="form-control-feedback"></span>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="remember-me"> 记住我
            </label>
            <br>
        </div>
        <input type="submit" value="登录" class="form-control btn-success">
    </form>
    <!--显示失败信息-->
    <center>
        <h5 th:if="${error != null}" th:text="${error}"></h5>
    </center>
</div>
<script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
<script >
    $(function(){
        //为refresh绑定点击事件，刷新图片
        $("#refresh").click(function(){
            $("#codeImg").attr("src","[[@{/kaptcha}]]");
        });
    })
</script>
</body>
</html>