SpringBoot Spring Security5 实现验证码登录

avatar 2018年05月04日21:42:42 7 17611 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
关于 Spring Security 权限管理实现登录之前一篇文章

SpringBoot + Spring Security + Thymeleaf 实现权限管理登录 已经介绍了。


本文主要介绍在登录中加入验证码，关于验证码的使用，如下


SpringBoot中集成kaptcha验证码


先看效果图


一、Spring Security 的核心且唯一配置文件


SecurityConfig.java
  1. package com.liuyanzhao.forum.config;
  3. import com.liuyanzhao.forum.entity.LoginRecord;
  4. import com.liuyanzhao.forum.entity.User;
  5. import com.liuyanzhao.forum.filter.KaptchaAuthenticationFilter;
  6. import com.liuyanzhao.forum.repository.LoginRecordRepository;
  7. import com.liuyanzhao.forum.service.impl.IpServiceImpl;
  8. import com.liuyanzhao.forum.service.impl.UserServiceImpl;
  9. import com.liuyanzhao.forum.util.IPUtil;
  10. import com.liuyanzhao.forum.vo.UserSessionVO;
  11. import org.slf4j.Logger;
  12. import org.slf4j.LoggerFactory;
  13. import org.springframework.beans.factory.annotation.Autowired;
  14. import org.springframework.context.annotation.Bean;
  15. import org.springframework.security.authentication.AuthenticationManager;
  16. import org.springframework.security.authentication.AuthenticationProvider;
  17. import org.springframework.security.authentication.dao.DaoAuthenticationProvider;
  18. import org.springframework.security.config.BeanIds;
  19. import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
  20. import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
  21. import org.springframework.security.config.annotation.web.builders.HttpSecurity;
  22. import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
  23. import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
  24. import org.springframework.security.core.Authentication;
  25. import org.springframework.security.core.AuthenticationException;
  26. import org.springframework.security.core.context.SecurityContextHolder;
  27. import org.springframework.security.core.userdetails.UserDetails;
  28. import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
  29. import org.springframework.security.crypto.password.PasswordEncoder;
  30. import org.springframework.security.web.authentication.AuthenticationFailureHandler;
  31. import org.springframework.security.web.authentication.AuthenticationSuccessHandler;
  32. import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
  34. import javax.servlet.ServletException;
  35. import javax.servlet.http.HttpServletRequest;
  36. import javax.servlet.http.HttpServletResponse;
  37. import java.io.IOException;
  38. import java.io.PrintWriter;
  40. /**
  41.  * 安全配置类
  42.  *
  43.  * @author 言曌
  44.  * @date 2018/1/23 上午11:37
  45.  */
  46. @EnableWebSecurity
  47. @EnableGlobalMethodSecurity(prePostEnabled = true) // 启用方法安全设置
  48. public class SecurityConfig extends WebSecurityConfigurerAdapter {
  50.     private static final String KEY = "liuyanzhao.com";
  52.     @Autowired
  53.     private UserServiceImpl userService;//实现了UserDetailsService类
  55.     @Bean
  56.     public PasswordEncoder passwordEncoder() {
  57.         return new BCryptPasswordEncoder();// 使用 BCrypt 加密
  58.     }
  60.     @Bean
  61.     public AuthenticationProvider authenticationProvider() {
  62.         DaoAuthenticationProvider authenticationProvider = new DaoAuthenticationProvider();
  63.         authenticationProvider.setUserDetailsService(userService);
  64.         authenticationProvider.setPasswordEncoder(passwordEncoder()); // 设置密码加密方式
  65.         return authenticationProvider;
  66.     }
  68.     @Bean(name = BeanIds.AUTHENTICATION_MANAGER)
  69.     @Override
  70.     public AuthenticationManager authenticationManagerBean() throws Exception {
  71.         return super.authenticationManagerBean();
  72.     }
  74.     /**
  75.      * 自定义配置
  76.      */
  77.     @Override
  78.     protected void configure(HttpSecurity http) throws Exception {
  79.         http.addFilterBefore(new KaptchaAuthenticationFilter("/login", "/login?error"), UsernamePasswordAuthenticationFilter.class) //在认证用户名之前认证验证码，如果验证码错误，将不执行用户名和密码的认证
  80.                 .authorizeRequests().antMatchers("/css/**", "/js/**", "/fonts/**", "/index").permitAll() // 都可以访问
  81.                 .antMatchers("/h2-console/**").permitAll() // 都可以访问
  82.                 .antMatchers("/login").permitAll() // 都可以访问
  83.                 .antMatchers("/admin/**").hasRole("ADMIN") // 需要相应的角色才能访问
  84.                 .and()
  85.                 .formLogin()   //基于 Form 表单登录验证
  86.                 .loginPage("/login")
  87.                 .successHandler(new AuthenticationSuccessHandler() {
  88.                     //用户名和密码正确执行
  89.                     @Override
  90.                     public void onAuthenticationSuccess(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Authentication authentication) throws IOException, ServletException {
  91.                         Object principal = SecurityContextHolder.getContext().getAuthentication().getPrincipal();
  92.                         if (principal != null && principal instanceof UserDetails) {
  93.                             httpServletResponse.setContentType("application/json;charset=utf-8");
  94.                             PrintWriter out = httpServletResponse.getWriter();
  95.                             out.write("{\"status\":\"ok\",\"message\":\"登录成功\"}");
  96.                             out.flush();
  97.                             out.close();
  98.                         }
  99.                     }
  100.                 })
  101.                 .failureHandler(new AuthenticationFailureHandler() {
  102.                     //用户名密码错误执行
  103.                     @Override
  104.                     public void onAuthenticationFailure(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, AuthenticationException e) throws IOException, ServletException {
  105.                         httpServletResponse.setContentType("application/json;charset=utf-8");
  106.                         PrintWriter out = httpServletResponse.getWriter();
  107.                         out.write("{\"status\":\"error\",\"message\":\"用户名或密码错误\"}");
  108.                         out.flush();
  109.                         out.close();
  110.                     }
  111.                 })
  112.                 .and().rememberMe().key(KEY) // 启用 remember me
  113.                 .and().exceptionHandling().accessDeniedPage("/403");  // 处理异常，拒绝访问就重定向到 403 页面
  114.         http.logout().logoutUrl("/logout").logoutSuccessUrl("/login");
  115.         http.csrf().ignoringAntMatchers("/h2-console/**"); // 禁用 H2 控制台的 CSRF 防护
  116.         http.csrf().ignoringAntMatchers("/ajax/**"); // 禁用 H2 控制台的 CSRF 防护
  117.         http.csrf().ignoringAntMatchers("/upload");
  118.         http.headers().frameOptions().sameOrigin(); // 允许来自同一来源的H2 控制台的请求
  119.     }
  121.     /**
  122.      * 认证信息管理
  123.      *
  124.      * @param auth
  125.      * @throws Exception
  126.      */
  127.     @Autowired
  128.     public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
  129.         auth.userDetailsService(userService);
  130.         auth.authenticationProvider(authenticationProvider());
  131.     }
  134. }



http.addFilterBefore(new KaptchaAuthenticationFilter("/login", "/login?error"), UsernamePasswordAuthenticationFilter.class)

注意这里，addFilterBefore 表示在执行用户名和密码验证之前，先执行 KaptchaAuthenticationFilter 这个过滤器，这是一个我们自定义的过滤器，第一个参数表示登录页面路径，第二个是登录失败页面

下面给出 KaptchaAuthenticationFilter 的代码


二、验证码验证过滤器


KaptchaAuthenticationFilter.java
  1. package com.liuyanzhao.forum.filter;
  3. import com.google.code.kaptcha.Constants;
  4. import org.springframework.security.authentication.InsufficientAuthenticationException;
  5. import org.springframework.security.core.Authentication;
  6. import org.springframework.security.core.AuthenticationException;
  7. import org.springframework.security.web.authentication.AbstractAuthenticationProcessingFilter;
  8. import org.springframework.security.web.authentication.SimpleUrlAuthenticationFailureHandler;
  10. import javax.servlet.*;
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  13. import java.io.IOException;
  15. /**
  16.  * @author 言曌
  17.  * @date 2018/5/4 下午12:36
  18.  */
  20. public class KaptchaAuthenticationFilter extends AbstractAuthenticationProcessingFilter {
  21.     private String servletPath;
  23.     public KaptchaAuthenticationFilter(String servletPath, String failureUrl) {
  24.         super(servletPath);
  25.         this.servletPath = servletPath;
  26.         setAuthenticationFailureHandler(new SimpleUrlAuthenticationFailureHandler(failureUrl));
  28.     }
  30.     @Override
  32.     public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
  33.         HttpServletRequest req = (HttpServletRequest) request;
  34.         HttpServletResponse res = (HttpServletResponse) response;
  35.         if ("POST".equalsIgnoreCase(req.getMethod()) && servletPath.equals(req.getServletPath())) {
  36.             String expect = (String) req.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
  37.             if (expect != null && !expect.equalsIgnoreCase(req.getParameter("kaptcha"))) {
  38.                 unsuccessfulAuthentication(req, res, new InsufficientAuthenticationException("输入的验证码不正确"));
  39.                 return;
  40.             }
  41.         }
  42.         chain.doFilter(request, response);
  43.     }
  45.     @Override
  46.     public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) throws AuthenticationException, IOException, ServletException {
  47.         return null;
  49.     }
  51. }

第37行req.getParameter("kaptcha")，其中 kaptcha 是登录表单中验证码输入框的 name


三、视图层


我这里是在任何页面点击登录按钮，弹出模态框登录框。然后通过 ajax 验证

HTML
  1. <section class="box-login v5-input-txt" id="box-login">
  2.                   <form id="login_form" th:action="@{/login}" method="post" autocomplete="off">
  3.                       <ul>
  4.                           <li class="form-group">
  5.                               <input class="form-control" type="text" min="4" maxlength="20"
  6.                                      name="username" placeholder="请输入用户名或邮箱" required>
  7.                           </li>
  8.                           <li class="form-group">
  9.                               <input class="form-control" type="password" minlength="6" maxlength="100"
  10.                                      id="password" name="password" placeholder="请输入密码" required>
  11.                           </li>
  12.                           <li class="form-group">
  14.                               <input type="text" class="form-control pull-left margin-r-5" name="kaptcha"
  15.                                      style="width: 50%;" placeholder="验证码">
  16.                               <img th:src="@{/getKaptchaImage}" width="80" height="34"
  17.                                    class="captcha changeCaptcha pull-left margin-r-5" alt="验证码"/>
  18.                               <a href="javascript:void(0)" class="changeCaptcha">换一张</a>
  19.                               <div class="clear"></div>
  20.                           </li>
  21.                           <li class="form-group">
  22.                               <label>
  23.                                   <input type="checkbox" name="remember-me" checked> 下次自动登录</a>
  24.                               </label>
  25.                           </li>
  26.                       </ul>
  27.                   </form>
  28.                   <p class="good-tips marginB10">
  29.                       <a class="fr" th:href="@{/forget}" target="_blank">忘记密码？</a>还没有账号？
  30.                       <a th:href="@{/register}" target="_blank" id="btnRegister">立即注册</a>
  31.                   </p>
  32.                   <div class="marginB10">
  33.                       <button id="login_btn" type="button" class="btn btn-micv5 btn-block globalLogin">
  34.                           登录
  35.                       </button>
  36.                       <div id="login-form-tips" class="tips-error bg-danger" style="display: none;">错误提示
  37.                       </div>
  38.                   </div>
  39.                   <div class="threeLogin"><span>其他方式登录</span>
  40.                       <a class="nqq" href="javascript:;"></a>
  41.                       <a class="nwx" href="javascript:;"></a>
  42.                   </div>
  43.               </section>



JS
  1. $(document).on("click", "#login_btn", function () {
  2.        var randomAnim = Math.floor(Math.random() * 7);
  3.        var _ctx = $("meta[name='ctx']").attr("content");
  4.        var token = $("meta[name='_csrf']").attr("content");
  5.        var header = $("meta[name='_csrf_header']").attr("content");
  6.        $.ajax({
  7.            url: _ctx + "/login",
  8.            type: 'POST',
  9.            data: $("#login_form").serialize(),
  10.            beforeSend: function (request) {
  11.                request.setRequestHeader(header, token);
  12.            },
  13.            success: function (data) {
  14.                console.log(data);
  15.                if (data.status == 'ok') {
  16.                    //登录成功
  17.                    window.location.reload();
  18.                } else if (data.status == 'error') {
  19.                    layer.alert("用户名或密码错误!", {icon: 2, anim: randomAnim});
  20.                } else {
  21.                    layer.alert("验证码错误", {icon: 2, anim: randomAnim});
  22.                }
  23.            },
  24.            error: function () {
  25.                layer.msg("出现错误，请尝试刷新页面!", {icon: 2, anim: 6});
  26.            }
  27.        });
  28.        return false;
  29.    });

layer.alert()这个不用管，是引入了 layui 的插件。



验证码的创建请参考 SpringBoot中集成kaptcha验证码







历史上的今天
五月
04日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：1   待审核评论数：0
  1. avatar run
    回复 2018年06月19日 10:08:11

    登录需要自己实现吗