SpringSecurityのWebSecurityConfigの設定に関して解説しています

はじめに
ログイン画面を作成
おわりに

はじめに

今回の記事は、SpringSecurityでDBの値を使用してログインするための準備手順の解説となります。

「WebSecurityConfig」に関して情報をお探しの方は少し参考になるかもしれません。

今回は設定ファイルである「WebSecurityConfig」を編集し、自作したログイン画面を表示するところまでがゴールとなります。

過去記事はこちらにあるので、以下から参照頂けるとスムーズに理解ができます。

SpringSecurityでログイン機能の導入手順を解説しています

SpringSecurityでデフォルトのログインが出来る手順を解説しています

ログイン画面を作成

AuthenticationController.javaの作成

既存のパッケージ「controller」の下に「AuthenticationController.java」を作成しましょう。

AuthenticationController.java

package com.app.progTrack.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class AuthenticationController {
	
	@GetMapping("/login")
	public String login() {
		return "authentication/login";
	}
}

login.htmlを作成

新しくフォルダを作成します。作成するのは、「templates」の下に作成します。フォルダ名は「authentication」とします。

フォルダ「authentication」の下に「login.html」を作成します。

それでは、ファイルを編集していきましょう。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ログイン画面</title>
	<!-- Bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

</head>
<body>
	<header>
		<nav>
			<a th:href="@{/}">ProgTrack</a>
			<ul>
				<li>
					<a th:href="@{/login}">ログイン</a>
				</li>
				<li>
					<a th:href="@{/signup}">会員登録</a>
				</li>
			</ul>
		</nav>
	</header>
	<main>
		<h1>ログイン</h1>
		
		<form th:action="@{/login}" method="post">
			
			<div>
				<input type="text" name="username" autocomplete="email" placeholder="メールアドレス" autoffocus>
			</div>
			<div>
				<input type="password" name="password" autocomplete="new-password" placeholder="パスワード">
			</div>
			<div>
				<button type="submit">ログイン</button>
			</div>
			
		</form>
	</main>


	<!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

WebSecurityConfig.javaを編集する

最初に「security」パッケージを作成します。作成する場所「src/main/java/com/app/progTrack」の下に作成します。

右クリックして作成しましょう。作成後は以下になります。

では作成したパッケージの中に、「WebSecurityConfig.java」を作成して編集していきます。ファイルの種類は「クラス」で作成してください。

WebSecurityConfig.java

package com.app.progTrack.security;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;

@Configuration
@EnableWebSecurity
@EnableMethodSecurity
public class WebSecurityConfig {
	@Bean
	public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
		
		http.authorizeHttpRequests((requests) -> requests
			.requestMatchers("/css/**").permitAll()
			.anyRequest().authenticated()
		)
		
		.formLogin((form) -> form.loginPage("/login")
			.loginProcessingUrl("/login")
			.defaultSuccessUrl("/?loggedIn")
			.failureUrl("/login?error")
			.permitAll()
		)
		
		.logout((logout) -> logout
			.logoutSuccessUrl("/login?loggedOut")
			.permitAll()
		);
		
		return http.build();
	}
	
	@Bean
	public PasswordEncoder passwordEncoder() {
		return new BCryptPasswordEncoder();
	}
}