快捷導(dǎo)航

SpringSecurity集成圖片驗(yàn)證碼的詳細(xì)過(guò)程

更新時(shí)間：2023年12月11日 15:03:39 作者：-代號(hào)9527

SpringSecurity是通過(guò)過(guò)濾器鏈來(lái)完成的,接下來(lái)的驗(yàn)證碼,可以嘗試創(chuàng)建一個(gè)過(guò)濾器放到Security的過(guò)濾器鏈中,在自定義的過(guò)濾器中比較驗(yàn)證碼,本文通過(guò)實(shí)例代碼介紹SpringSecurity集成圖片驗(yàn)證碼的詳細(xì)過(guò)程,感興趣的朋友一起看看吧

1、生成圖片驗(yàn)證碼

引入hutool依賴，用于生成驗(yàn)證碼。（這個(gè)單詞怎么讀？糊涂？）

<!--引入hutool-->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.3.9</version>
</dependency>

寫個(gè)用于生成驗(yàn)證碼的接口：

//HttpServletRequest和HttpServletResponse對(duì)象使用自動(dòng)注入或者寫在controller方法的形參都行
@Controller
@Slf4j
public class CaptchaController {
    @GetMapping("/code/image")
    public void getCaptcha(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //創(chuàng)建一個(gè)驗(yàn)證碼
        CircleCaptcha circleCaptcha = CaptchaUtil.createCircleCaptcha(200, 100, 2, 20);
        //獲取生成的圖片二維碼中的值，并放到session中
        String captchaCode=circleCaptcha.getCode();
        log.info("生成的驗(yàn)證碼為：{}",captchaCode);
        request.getSession().setAttribute("LOGIN_CAPTCHA_CODE",captchaCode);
        //將圖片寫到響應(yīng)流中，參數(shù)一是圖片。參數(shù)二是圖片格式，參數(shù)三是響應(yīng)流
        ImageIO.write(circleCaptcha.getImage(),"JPEG",response.getOutputStream());
    }
}

此時(shí)，調(diào)用這個(gè)接口會(huì)在響應(yīng)里返回一個(gè)圖片。調(diào)用下接口看看效果：

在這里插入圖片描述

2、創(chuàng)建驗(yàn)證碼過(guò)濾器

很明顯，校驗(yàn)驗(yàn)證碼要先于校驗(yàn)用戶名密碼，驗(yàn)證碼都不對(duì)，就不用往下驗(yàn)證用戶名和密碼了。新建自定義過(guò)濾器類ValidateCodeFilter，繼承抽象類OncePerRequestFilter 。右鍵看下繼承關(guān)系：

在這里插入圖片描述

可以看到最終是實(shí)現(xiàn)了Filter接口。但這里別直接實(shí)現(xiàn)Filter，繼承OncePerRequestFilter，里面的好多東西直接用，能省一點(diǎn)是一點(diǎn)。過(guò)濾器的實(shí)現(xiàn)思路為：

從前端獲取驗(yàn)證碼
從session中獲取驗(yàn)證碼（生成驗(yàn)證碼的時(shí)候塞session里了）
判斷是否相等

@Component
@Slf4j
public class ValidateCodeFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
    	//因?yàn)樽詈笫荈ilter接口，所以所有請(qǐng)求都過(guò)這個(gè)過(guò)濾器
    	//這里要先判斷接口是不是登錄接口，不是就別對(duì)比session和前端傳來(lái)的驗(yàn)證碼了
        String requestURI = request.getRequestURI();   //URI即去掉IP、PORT那串
        log.info("請(qǐng)求的URI為：{}", requestURI);
        if (!requestURI.equals("/login/doLogin")) {
            doFilter(request, response, filterChain);  //不是登錄接口直接放行
        } else {
            validateCode(request, response,filterChain);  //是登錄接口則校驗(yàn)
        }
    }
    private void validateCode(HttpServletRequest request, HttpServletResponse response,FilterChain filterChain) throws IOException, ServletException {
        String enterCaptchaCode = request.getParameter("code");  //從請(qǐng)求中拿傳過(guò)來(lái)的驗(yàn)證碼的值（dto好些）
        HttpSession session = request.getSession();
        String captchaCodeInSession = (String) session.getAttribute("LOGIN_CAPTCHA_CODE");  //保存在session中的驗(yàn)證碼
        log.info("用戶輸入的驗(yàn)證碼為：{},session中的驗(yàn)證碼為：{}",enterCaptchaCode,captchaCodeInSession);
        //移除session中之前可能存在的錯(cuò)誤信息
        session.removeAttribute("captchaCodeErrorMsg");
        if (!StringUtils.hasText(captchaCodeInSession)) {
            session.removeAttribute("LOGIN_CAPTCHA_CODE");
        }
        if (!StringUtils.hasText(enterCaptchaCode) || !StringUtils.hasText(captchaCodeInSession) || !enterCaptchaCode.equalsIgnoreCase(captchaCodeInSession)) {
            //說(shuō)明驗(yàn)證碼不正確，返回登陸頁(yè)面
            session.setAttribute("captchaCodeErrorMsg", "驗(yàn)證碼不正確");
			//驗(yàn)證失敗，重定向到登錄頁(yè)面
            response.sendRedirect("/login/toLogin");
        }else{
            filterChain.doFilter(request,response);  //驗(yàn)證成功，放行
        }
    }
}

關(guān)于requset.getParameter("code")

關(guān)于在controller中接收前端數(shù)據(jù)的方式：

關(guān)于直接在請(qǐng)求中獲取參數(shù)的建議：

3、將過(guò)濾器加入SpringSecurity過(guò)濾鏈

修改WebSecurityConfig：

@EnableGlobalMethodSecurity(prePostEnabled = true)
@Slf4j
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Resource
    private ValidateCodeFilter validateCodeFilter;  //自動(dòng)注入我定義的驗(yàn)證碼過(guò)濾器
    @Override
    /**
     * Security的http請(qǐng)求配置
     *
     * @param http
     * @throws Exception
     */
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        //設(shè)置登陸方式
        http.formLogin()//使用用戶名和密碼的登陸方式
                .usernameParameter("uname") //頁(yè)面表單的用戶名的name
                .passwordParameter("pwd")//頁(yè)面表單的密碼的name
                .loginPage("/login/toLogin") //自己定義登陸頁(yè)面的地址
                .loginProcessingUrl("/login/doLogin")//配置登陸的url
                .successForwardUrl("/index/toIndex") //登陸成功跳轉(zhuǎn)的頁(yè)面
                .failureForwardUrl("/login/toLogin")//登陸失敗跳轉(zhuǎn)的頁(yè)面
                .permitAll();
        //配置退出方式
        http.logout()
                .logoutUrl("/logout")
                .logoutSuccessUrl("/login/toLogin")
                .permitAll();
        //配置路徑攔截 的url的匹配規(guī)則
        http.authorizeRequests().antMatchers("/code/image").permitAll()
                //任何路徑要求必須認(rèn)證之后才能訪問(wèn)
                .anyRequest().authenticated();
        // 禁用csrf跨站請(qǐng)求，注意不要寫錯(cuò)了
        http.csrf().disable();
  		// 配置登錄之前添加一個(gè)驗(yàn)證碼的過(guò)濾器      
  		http.addFilterBefore(validateCodeFilter,UsernamePasswordAuthenticationFilter.class);
    }
    /**
     * 資源服務(wù)匹配放行【靜態(tài)資源文件】
     *
     * @param web
     * @throws Exception
     */
   // @Override
    //public void configure(WebSecurity web) throws Exception {
      //  web.ignoring().mvcMatchers("/resources/**");
    //}
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

以上注意兩點(diǎn)，一是別忘了放行生成二維碼的接口，這個(gè)不需要登錄鑒權(quán)。

http.authorizeRequests()
	.antMatchers("/code/image")
	.permitAll()
    //任何路徑要求必須認(rèn)證之后才能訪問(wèn)
    .anyRequest().authenticated();

而是在用戶名密碼驗(yàn)證過(guò)濾器前加一個(gè)自定義的驗(yàn)證碼過(guò)濾器，addFilter方法：

http.addFilterBefore(validateCodeFilter,UsernamePasswordAuthenticationFilter.class);

4、修改登錄頁(yè)

修改login.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用戶登陸</title>
</head>
<body>
<h2>登錄頁(yè)面</h2>
<!--${param.error}這個(gè)如果有值，就顯示帳號(hào)或密碼錯(cuò)誤-->
<h4 th:if="${param.error}" style="color: #FF0000;">帳號(hào)或密碼錯(cuò)誤,請(qǐng)重新輸入</h4>
<form action="/login/doLogin" method="post">
    <table>
        <tr>
            <td>用戶名:</td>
            <td><input type="text" name="uname" value="zhangsan"></td>
        </tr>
        <tr>
            <td>密碼:</td>
            <td><input type="password" name="pwd"></td>
        </tr>
        <tr>
            <td>驗(yàn)證碼:</td>
            <td><input type="text" name="code"> <img src="/code/image" style="height:33px;cursor:pointer;" onclick="this.src=this.src">
                <span th:text="${session.captchaCodeErrorMsg}" style="color: #FF0000;" >username</span>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="submit">登錄</button>
            </td>
        </tr>
    </table>
</form>
</body>

效果：

在這里插入圖片描述