Spring Securityを使用したログイン機能の実装方法をわかりやすく解説 Part4

目次
はじめに
1. ログアウトボタンの追加とホーム画面のデザイン修正
2. ログアウト機能の実装
3. 動作確認と挙動の確認
終わりに

はじめに
1.ログアウトボタンの追加とホーム画面のデザイン修正
2. ログアウト機能の実装
3.動作確認
最後に

はじめに

この記事は、前回の記事「Spring Securityを使用したログイン機能の実装方法をわかりやすく解説 Part3」の続編としてお届けします。前回はデータベースに保存されているユーザ名とパスワードの比較機能の作成に取り組みました。今回はログアウトの機能の作成を行っていきます。

以下の手順に従って進めていきます。

手順
1. ログアウトボタンの追加とホーム画面のデザイン修正
2. ログアウト機能の実装
3. 動作確認と挙動の確認

1.ログアウトボタンの追加とホーム画面のデザイン修正

ログアウト機能を作成するには、まずログアウトボタンをホーム画面に追加する必要があります。また、現在のホーム画面は非常にシンプルで、一部のユーザーには物足りなく感じられるかもしれません。そのため、Bootstrapを使用してデザインを少しブラッシュアップします。

以下のが修正した index.html です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <title>ホーム画面</title>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">ホーム画面</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="http://localhost:8080/logout">ログアウト</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container mt-4">
        <h1>Hello, World</h1>
        <p>ログインに成功しました！</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

以下のような画面になります。

2. ログアウト機能の実装

ログアウトの実装について、SecurityConfig クラスの securityFilterChain メソッドに設定を追加します。

以下が追加部分になります。

@Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
        // カスタム認証プロバイダを設定
        .authenticationProvider(customAuthenticationProvider)
        // CORSの設定を適用
        .cors(customizer -> customizer.configurationSource(corsConfigurationSource()))
        // CSRFの保護を無効にする
        .csrf(csrf -> csrf.disable())
        .authorizeHttpRequests(authorizeRequests ->
            authorizeRequests
                // loginのパスへのリクエストはすべて許可
                .requestMatchers("/login").permitAll()
                 // その他のリクエストは認証が必要
                .anyRequest().authenticated()
        )
        .formLogin(formLogin -> 
            formLogin
            // ログイン処理のURLを指定(フロントがログインボタン実行時にPOSTする場所)
            .loginProcessingUrl("/login")
            // カスタムログインページのURLを指定(Spring Securityデフォルトの画面を置き換える)
            .loginPage("http://127.0.0.1:5500/front/login.html")
            // ログイン成功時のリダイレクト先URLを指定
            .defaultSuccessUrl("http://127.0.0.1:5500/front/index.html")
            // 認証失敗時のリダイレクト先URLを指定
            .failureUrl("http://127.0.0.1:5500/front/error.html")
        )
+       .logout(logout ->
+           logout
+           // ログアウト処理のURLを指定
+           .logoutUrl("/logout")
+           // ログアウト成功時のリダイレクト先URLを指定
+           .logoutSuccessUrl("http://127.0.0.1:5500/front/login.html")
        );

    return http.build();
    }

上記を追加したSecurityConfig を以下に示します。

package com.study.loginpractice.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

// クラスに@Configurationをつけることで、このクラスがSpringの設定クラスであることを示す
@Configuration
// @EnableWebSecurityをつけることで、Spring Securityのウェブセキュリティサポートを有効化する
@EnableWebSecurity
public class SecurityConfig {

    // CustomAuthenticationProvider Beanをこのクラスに注入する
    private final CustomAuthenticationProvider customAuthenticationProvider;

    public SecurityConfig(CustomAuthenticationProvider customAuthenticationProvider){
        this.customAuthenticationProvider = customAuthenticationProvider;
    }

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
        // カスタム認証プロバイダを設定
        .authenticationProvider(customAuthenticationProvider)
        // CORSの設定を適用
        .cors(customizer -> customizer.configurationSource(corsConfigurationSource()))
        // CSRFの保護を無効にする
        .csrf(csrf -> csrf.disable())
        .authorizeHttpRequests(authorizeRequests ->
            authorizeRequests
                // loginのパスへのリクエストはすべて許可
                .requestMatchers("/login").permitAll()
                 // その他のリクエストは認証が必要
                .anyRequest().authenticated()
        )
        .formLogin(formLogin -> 
            formLogin
            // ログイン処理のURLを指定(フロントがログインボタン実行時にPOSTする場所)
            .loginProcessingUrl("/login")
            // カスタムログインページのURLを指定(Spring Securityデフォルトの画面を置き換える)
            .loginPage("http://127.0.0.1:5500/front/login.html")
            // ログイン成功時のリダイレクト先URLを指定
            .defaultSuccessUrl("http://127.0.0.1:5500/front/index.html")
            // 認証失敗時のリダイレクト先URLを指定
            .failureUrl("http://127.0.0.1:5500/front/error.html")
        )
        .logout(logout ->
            logout
            // ログアウト処理のURLを指定
            .logoutUrl("/logout")
            // ログアウト成功時のリダイレクト先URLを指定
            .logoutSuccessUrl("http://127.0.0.1:5500/front/login.html")
        );

    return http.build();
    }

    // @Beanをつけることで、このメソッドがSpringのコンテナにBeanとして登録される
    @Bean
    public UrlBasedCorsConfigurationSource corsConfigurationSource() {
        // CORSの設定を行うためのオブジェクトを生成
        CorsConfiguration configuration = new CorsConfiguration();

        // クレデンシャル（資格情報（CookieやHTTP認証情報））を含むリクエストを許可する
        configuration.setAllowCredentials(true);

        // 許可するオリジン（この場合は"http://127.0.0.1:5500"のみ）を設定
        configuration.addAllowedOrigin("http://127.0.0.1:5500");

        // 任意のヘッダーを許可
        configuration.addAllowedHeader("*");

        // 任意のHTTPメソッド（GET, POSTなど）を許可
        configuration.addAllowedMethod("*");

        // CORS設定をURLベースで行うためのオブジェクトを生成
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

        // 全てのURLパスにこのCORS設定を適用
        source.registerCorsConfiguration("/**", configuration);

        return source;
    }

}

上記を追加したことで、SecurityConfig クラスはログアウト機能をサポートするようになりました。具体的には、/logout へのリクエストが来た際に、ユーザーはログアウトし、ログインページへリダイレクトされます。