在《(一)spring security 之项目创建》中我们使用的是默认配置,spring security 为我们提供了个登陆界面和user用户,并在控制台打印出了登陆密码,登陆密码每次启动项目后是不同的,这显然不符合我们正式项目中的要求,下面我们通过继承WebSecurityConfigurerAdapter来实现界面的自定义,系统用户使用我们指定的表中获取

1.自定义登陆界面

1.1 引入依赖

<dependency>

    <groupId>org.springframework.boot</groupId>

    <artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

1.2配置thymeleaf

在application-dev.yaml配置文件的spring:下增加如下内容

thymeleaf:

  prefix: classpath:/templates/

  suffix: .html

  cache: false

mvc:

  throw-exception-if-no-handler-found: true

  # 静态文件请求匹配方式

  static-path-pattern: /**

web:

  resources:

    static-locations: classpath:/templates/,classpath:/META-INF/resources/,classpath:/static/

1.3新增登陆endpoint

@Controller

public class IndexController {

    @RequestMapping(value = "/login")

    public String login(Model model) {

        model.addAttribute("loginProcessUrl", "/login/authorize");

        return "indexAction/login";

    }

}

1.4在resources下新建文件夹templates/indexAction并在文件夹下新增登陆界面,并在resources下新建static文件夹放入css和js文件

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title>统一身份管理平台</title>

</head>

<style>

    .login-container {

        margin: 50px;

        width: 100%;

    }

    .form-container {

        margin: 0px auto;

        width: 50%;

        text-align: center;

        box-shadow: 1px 1px 10px #888888;

        height: 300px;

        padding: 5px;

    }

    input {

        margin-top: 10px;

        width: 350px;

        height: 30px;

        border-radius: 3px;

        border: 1px #E9686B solid;

        padding-left: 2px;

    }

    .btn {

        width: 350px;

        height: 35px;

        line-height: 35px;

        cursor: pointer;

        margin-top: 20px;

        border-radius: 3px;

        background-color: #E9686B;

        color: white;

        border: none;

        font-size: 15px;

    }

    .title {

        margin-top: 5px;

        font-size: 18px;

        color: #E9686B;

    }

</style>

<body>

<div class="login-container">

    <div class="form-container">

        <p class="title">用户登录</p>

        <form name="loginForm" method="post" th:action="${loginProcessUrl}">

            <input type="text" name="username" placeholder="用户名"/>

            <br>

            <input type="password" name="password" placeholder="密码"/>

            <br>

            <button type="submit" class="btn">登 &nbsp;&nbsp; 录</button>

            <a href="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101861287&redirect_uri=http://iotmaxcloud.com/oauth/login&state=test"

               class="btn btn-primary btn-block">QQ登录</a>

        </form>

    </div>

</div>

</body>

</html>

1.5新增Security配置

@Configuration

@EnableWebSecurity

public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override

    protected void configure(HttpSecurity http) throws Exception {

        http.authorizeRequests()

                .antMatchers("/login","/login/authorize")

                .permitAll()

                .anyRequest()

                .authenticated()

                .and()

                .formLogin()

                .loginPage("/login")

                .loginProcessingUrl("/login/authorize");

    }

}

说明:

1. antMatchers("/login").permitAll() 表示请求路径/login和/login/authorize不需要授权

   antMatchers支持通配符*,其中/*表示任意个字符/**表示目录

 2. formLogin() .loginPage("/login") 表示指定登陆界面地址为/login

3. loginProcessingUrl("/login/authorize") 表示登陆界面提交登陆请求的路径为/login/authorize