通過登入和登出保護你的 WebApp

Created: November-22, 2018

這個例子是一個非常簡單的 Spring Boot 應用程式。

Maven 依賴

首先將以下依賴項新增到專案中。建立新專案時，建議使用 Spring Initializr 。

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.1.RELEASE</version>
    <relativePath/>
</parent>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
        <groupId>org.thymeleaf.extras</groupId>
        <artifactId>thymeleaf-extras-springsecurity4</artifactId>
    </dependency>
</dependencies>

建立 WebApp

使用網站和控制器建立 Web 應用程式。例如，這個非常小的 webapp 只有一個頁面（index.html）和登入頁面的條目。

@Configuration
public class MvcConfig extends WebMvcConfigurerAdapter{
    
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addRedirectViewController("/", "index");
        registry.addViewController("/index").setViewName("index");
        registry.addViewController("/login").setViewName("login");
    }
}

保護你的 WebApp

配置 Spring Security 以保護你的 webapp。例如。僅允許經過身份驗證的使用者提出任何請求允許使用 js 和 css 等靜態資源，否則不會為未經過身份驗證的使用者載入它們。從此規則中排除登入和登出頁面並建立測試使用者：

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .antMatchers("/css/*.css", "/js/*.js").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .loginPage("/login")
                .permitAll()
                .and()
                .logout()
                .permitAll();
    }

    @Autowired 
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception { 
        auth.inMemoryAuthentication() 
                .withUser("user").password("password").roles("USER"); 
    } 
}

建立登入頁面

登入頁面需要有一個表單，使釋出請求為“/ login”：

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

    <head>
        <title>Login</title>
        <link th:href="@{/css/stylesheet.css}" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" th:src="@{/js/login.js}"></script>
    </head>
    <body>
        <!-- show notification on error -->
        <div th:if="${param.error}">
            Invalid username or password.
        </div>

        <!-- show notification of logout -->
        <div th:if="${param.logout}">
            You have been logged out.
        </div>

        <!-- login form -->
        <div>
            <form th:action="@{/login}" method="post">
                <h2 >Please sign in</h2>
                <label >User Name</label>
                <input type="text" name="username" th:required="required" th:autofocus="autofocus"/>
                <br/>
                
                <label>Password</label>
                <input type="password" name="password" th:required="required" />
                <br/>
               
                <input type="submit" value="Sign In"/>
            </form>
        </div>
    </body>
</html>

當使用者輸入錯誤的使用者名稱/密碼時，將設定 error 引數。當使用者登出時，設定了登出引數。這用於顯示相應的訊息。

訪問使用者屬性

成功登入後，使用者將被定向到 index.html 。在 Spring Security 的方言允許我們訪問像他的使用者名稱的使用者屬性：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Index</title>
    </head>
    <body>
        <div>
            <h3>Welcome <span th:text="${#authentication.name}"/></h3>
            <form th:action="@{/logout}" method="post"> 
                <input type="submit" value="Logout"/> 
            </form>
        </div>
    </body>
</html>

通過郵寄請求到“/ logout”實現登出