springsecurity 主要的功能是 验证 和 授权。springsecurity主要的工作原理是:
当我们在登录页面中输入用户名和密码之后首先会进入到UsernamePasswordAuthenticationToken验证(Authentication),然后生成的Authentication会被交由AuthenticationManager来进行管理而AuthenticationManager管理一系列的AuthenticationProvider,而每一个Provider都会通UserDetailsService和UserDetail来返回一个以UsernamePasswordAuthenticationToken实现的带用户名和密码以及权限的Authentication
springsecurity 会为我们自动生成一个登录界面,不过这个界面有点丑,当然我们也可以自己定义登录界面。
在pom.xml中引入各种jar包就不再赘述,mybatis的配置和mapring的编写也省略,主要讲述springsecurity 的配置。
WebSecurityConfigurerAdapter
首先我们需要自定义一个类来继承WebSecurityConfigurerAdapter,并且在类上加上注解,在该类中重写configure方法来实现自定义拦截方法和请求UserDetailsService。具体代码如下:
@Configuration @EnableWebSecurity @EnableGlobalMethodSecurity(prePostEnabled = true) public class WebSecurityConfig extends WebSecurityConfigurerAdapter { @Bean UserDetailsService customUserService() { // 注册UserDetailsService 的bean return new CustomUserDetailsService(); } @Bean public static NoOpPasswordEncoder passwordEncoder() { return (NoOpPasswordEncoder) NoOpPasswordEncoder.getInstance(); } @Override //重写configure(HttpSecurity http)的方法,这里面来自定义自己的拦截方法和业务逻辑 protected void configure(HttpSecurity httpSecurity) throws Exception { System.out.println("用到一!!"); httpSecurity.authorizeRequests() .antMatchers("/js/**","/css/**","/images/*","/fonts/**","/**/*.png","/**/*.jpg").permitAll() .antMatchers("/","/login","/signin").permitAll() .anyRequest().authenticated() .and() .formLogin() .loginPage("/login") .failureUrl("/login?error") .defaultSuccessUrl("/home") .permitAll() .and() .rememberMe().rememberMeParameter("remember-me") //其实默认就是remember-me,这里可以指定更换 .and() .logout() .logoutSuccessUrl("/login?logout") //退出登录 .permitAll() .and() .csrf().disable(); } @Override public void configure(AuthenticationManagerBuilder auth) throws Exception { auth.userDetailsService(customUserService()).passwordEncoder(passwordEncoder()); } }
@Bean public static NoOpPasswordEncoder passwordEncoder() { return (NoOpPasswordEncoder) NoOpPasswordEncoder.getInstance(); }
该函数的作用是实现密码的加密,在springsecurity5.0版本之后,如果不对密码进行passwordEncoder,会抛出There is no PasswordEncoder mapped for the id "null"异常。解决方法是
- 在securityConfig类下加入NoOpPasswordEncoder,不过官方已经不推荐了
@Bean
public static NoOpPasswordEncoder passwordEncoder() {
return (NoOpPasswordEncoder) NoOpPasswordEncoder.getInstance();
}
- 在securityConfig类下加入密码加密,在数据库中存的密码也是要经过这个加密的才能匹配上
@Autowired
private UserDetailsService customUserService;
@Override
public void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.userDetailsService(customUserService).passwordEncoder(new BCryptPasswordEncoder());
}
UserDetailsService
springsecurity在请求完WebSecurityConfigurerAdapter会请求UserDetailsService,所以我们要再自定义一个类实现UserDetailsService接口,该类主要用来进行用户名密码的验证和用户的授权。具体代码如下
@Service public class CustomUserDetailsService implements UserDetailsService { @Autowired UserService userService; @Autowired HttpServletRequest request; @Override public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException { User user = userService.selectUser(username); System.out.println(user.getUsername()); if (user == null){ throw new UsernameNotFoundException("用户名不存在!"); } HttpSession session = request.getSession(); session.setAttribute("user",user); session.setAttribute("sessusername",username); List<SimpleGrantedAuthority> authorities = new ArrayList<>(); // for (Role role:user.getRoles()) { // authorities.add(new SimpleGrantedAuthority(role.getName())); // } authorities.add(new SimpleGrantedAuthority("ROLE_USER")); System.out.println(user.getUsername()+authorities.toString()); return new org.springframework.security.core.userdetails.User(user.getUsername(),user.getPwd(),authorities); } }
该类中我是直接把所有的用户赋予了ROLE_USER权限,即普通用户。
login.html
下面我们自定义登录界面。具体代码如下
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout"> <head> <title>用户登录</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link th:href="@{css/bootstrap.css}" rel="stylesheet"> <link th:href="@{css/style.css}" rel="stylesheet"> <link th:href="@{css/bootstrap.min.css}" rel="stylesheet"> <link th:href="@{css/bootstrap-theme.min.css}" rel="stylesheet"> <link th:href="@{css/templatemo_style.css}" rel="stylesheet"> <link th:href="@{css/font-awesome.min.css}" rel="stylesheet"> <script th:src="@{js/login.js}" type="text/javascript"></script> <script th:src="@{js/jquery-1.11.1.min.js}" type="text/javascript"></script> </head> <body > <!-- header --> <div class="header_top"> <div class="container"> <div class="header_top_left"> <ul> <li>© 全景NBA</li> </ul> </div> <div class="header_top_right"> 欢迎您, <form th:action="@{/logout}" method="post"> <input th:if="${param.logout}" type="submit" name="logout" value="退出" class="btn btn-danger" > </form> </div> <div class="clearfix"> </div> </div> </div> <div class="logo_social_icons"> <div class="container"> <div class="logo"> <h1><a href="index.html"><img th:src="@{images/logo.jpg}" alt=" " class="img-responsive" /></a></h1> </div> <div class="social_icons"> <div class="component"> <a href="#" class="icon icon-cube facebook"></a> <a href="#" class="icon icon-cube rss"></a> <a href="#" class="icon icon-cube instagram"></a> <a href="#" class="icon icon-cube t"></a> <div class="clearfix"> </div> </div> </div> <div class="clearfix"> </div> </div> </div> <div class="header"> <div class="container"> <nav class="navbar navbar-default"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1"> <nav class="stroke"> <ul class="nav navbar-nav"> <li class="active"><a href="/signin" target="_top" class="hvr-bounce-to-bottom">注 册</a></li> <li><a href="/login" target="_top" class="hvr-bounce-to-bottom">登 录</a></li> </ul> <div class="search-box"> <div id="sb-search" class="sb-search"> <form> <input class="sb-search-input" placeholder="Enter your search term..." type="search" id="search"> <input class="sb-search-submit" type="submit" value=""> <span class="sb-icon-search"> </span> </form> </div> </div> <!-- search-scripts --> <script th:src="@{js/classie.js}" type="text/javascript"></script> <script th:src="@{js/uisearch.js}" type="text/javascript"></script> <script> new UISearch( document.getElementById( 'sb-search' ) ); </script> <!-- //search-scripts --> </nav> </div> <!-- /.navbar-collapse --> </nav> </div> </div> <script th:src="@{js/bootstrap.js}" type="text/javascript"></script> <!-- //for bootstrap working --> <div class="center-block" style="width:200px" th:if="${status}!=null"> <p th:text="${status}" class="bg-danger"></p> </div> <div class="center-block" style="width:200px" > <!-- <p th:if="${param.error}" class="bg-danger"></p> --> <p th:if="${param.logout}" class="bg-danger">您已成功退出</p> </div> <div class="templatemo-bg-gray"> <div class="container"> <div class="col-md-12"> <h1 class="margin-bottom-15">登录</h1> <form class="form-horizontal templatemo-container templatemo-login-form-1 margin-bottom-30" role="form" action="/login" method="post" name="form1" id="form1"> <div class="form-group"> <div class="col-xs-12"> <div class="control-wrapper"> <label class="control-label fa-label"><i class="fa fa-user fa-medium"></i></label> <input type="text" name="username" id="email" class="form-control" onfocus="emailFocus()" onblur="emailBlur()" placeholder="请输入用户名" > <div id="email_prompt" style="width:260px;color:red;"> </div> </div> </div> </div> <div class="form-group"> <div class="col-md-12"> <div class="control-wrapper"> <label for="password" class="control-label fa-label"><i class="fa fa-lock fa-medium"></i></label> <input type="password" name="password" class="form-control" id="password" onfocus="pwdFocus()" onblur="pwdBlur()" placeholder="请输入密码"> <div id="password_prompt" style="width:260px;color:red;"></div> </div> </div> </div> <div class="form-group"> <div class="col-md-12"> <div class="checkbox control-wrapper"> <label> <input name="remember-me" id="remember-me" type="checkbox"> 记住密码 </label> </div> </div> </div> <div class="form-group"> <div class="col-md-12"> <div class="control-wrapper"> <input type="submit" name="submit" value="登录" class="btn btn-info" > <a href="forgot-password.html" class="text-right pull-right">忘记密码?</a> </div> </div> </div> <hr> <div class="form-group"> <div class="col-md-12"> <label>第三方登录: </label> <div class="inline-block"> <a href="#"><i class="fa fa-facebook-square login-with"></i></a> <a href="#"><i class="fa fa-twitter-square login-with"></i></a> <a href="#"><i class="fa fa-google-plus-square login-with"></i></a> <a href="#"><i class="fa fa-tumblr-square login-with"></i></a> <a href="#"><i class="fa fa-github-square login-with"></i></a> </div> </div> </div> </form> <div class="text-center"> <a href="/signin" class="templatemo-create-new">注册 <i class="fa fa-arrow-circle-o-right"></i></a> </div> </div> </div> </div> </body> </html>
注意用户名输入框input的name属性一定要为username,密码输入框input的name属性一定要为password,与security一致。
按钮的type为submit,并且,form表单的action的值一定要和WebSecurityConfigurerAdapter中的loginPage中的值一致!!我给的是/login。这样,当输入用户名和密码,点击登录后便会提交给security验证。
记住密码的checkbox的name属性也要与WebSecurityConfigurerAdapter中的rememberme的值相同。
退出登录的表单的action要为/logout。
具体请求过程为
用户访问资源→security拦截→跳转到login→提交表单→securityProvider处理用户信息→借助UserDetailsService 获取用户信息→认证成功/失败