前回まで
Spring Security その１〜ログイン機能の実装
Spring Security その２〜DB認証
Spring Security その2.5〜デフォルトのログアウト画面
今回はログイン画面を作成し、作成したログイン画面を使用して認証します。
ログインページの作成
今回はあえて、ユーザ名の項目を「accountId」。パスワードを「pw」としています。
※デフォルトはusernameとpasswordです。
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ログイン</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body class="bg-light">
<!--新規登録 -->
<form action="#" th:action="@{/login}" method="post">
<!--/* エラーメッセージ */-->
<p th:if="${session['SPRING_SECURITY_LAST_EXCEPTION']} != null"
th:text="${session['SPRING_SECURITY_LAST_EXCEPTION'].message}">
ログインエラーメッセージ</p>
<div class="container my-1">
<div class="row m-3">
<div class="col-md-4"></div>
<div class="col-md-4">
<input type="text" id="accountId" name="accountId" class="form-control" placeholder="ユーザID" required autofocus>
</div>
<div class="col-md-4"></div>
</div>
<div class="row m-3">
<div class="col-md-4"></div>
<div class="col-md-4">
<input type="password" id="pw" name="pw" class="form-control" placeholder="パスワード" required>
</div>
<div class="col-md-4"></div>
</div>
<div class="row m-3">
<div class="col-md-4"></div>
<div class="col-md-4">
<button class="btn btn-lg btn-primary btn-block" type="submit">ログイン</button>
</div>
<div class="col-md-4"></div>
</div>
</div>
</form>
</body>
</html>
SecurityFilterChainの設定
package com.example.conf;
import org.springframework.boot.autoconfigure.security.servlet.PathRequest;
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 SecurityConfig {
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
http
.formLogin(login -> login
.loginPage("/login").permitAll() //①
.defaultSuccessUrl("/toppage") //②
.usernameParameter("accountId") //③
.passwordParameter("pw") //④
)
.logout(logout -> logout
.logoutSuccessUrl("/login?logout") //⑤
.invalidateHttpSession(true)) //⑥
.authorizeHttpRequests(authz -> authz
.requestMatchers(PathRequest.toStaticResources().atCommonLocations())
.permitAll()
.anyRequest().authenticated()
);
return http.build();
}
@Bean
public PasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
}
①ログインページのURLを指定します（後でこれにひもづくコントローラを設定します。
②ログイン認証成功後の遷移先URLを指定します。
※実はここも少しハマったポイントなので、別途記事を書くつもりです。
③ログインページで指定したユーザ名を入力する項目を指定。今回はaccountIdを指定
④ログインページで指定したパスワードを入力する項目を指定。今回はpwを指定
⑤ログアウトが成功した際の遷移先。
⑥ログアウト時にHTTPセッションを無効にする。（デフォルトもTrueなのであえて指定しなくてもいいかも）
コントローラの設定
package com.example.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class DemoController {
@GetMapping("/toppage")
public String toppage() {
return "toppage";
}
//ここを追加
@GetMapping("/login")
public String login() {
return "login";
}
}
これで完成です。
実行してみましょう
http://localhost:8080/login にアクセス
作成したログインページが表示
ユーザID、パスワード入力→ログインでdefaultSuccessUrlに指定したtoppageに遷移できました。
