概要
オリジナルのログイン画面を実装する方法です。
以下の内容になっています。
- ログイン用のHTMLを用意する。
- Controllerにログインの遷移先を定義する。
- SecurityConfigクラスに独自ログイン画面の設定をする。
- ログアウトボタンを設置する。
SpringSecurityの公式サイトをベースにしていますので、
そちらも参照頂けばと思います。
10.10.1. フォームログイン
実装
ログイン画面
まず最初にログイン画面を用意します。
配置先：src/main/resources/templates/login.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3"> <head> <title>Spring Security Example </title> </head> <body> <div th:if="${param.error}"> Invalid username and password. </div> <div th:if="${param.logout}"> You have been logged out. </div> <form th:action="@{/login}" method="post"> <div><label> User Name : <input type="text" name="username"/> </label></div> <div><label> Password: <input type="password" name="password"/> </label></div> <div><input type="submit" value="Sign In"/></div> </form> </body> </html> |
・${param.error}, ${param.logout}
ログインエラー時とログアウト時に表示するメッセージを定義しています。
Controller
ログイン画面に遷移できるように、LoginControllerを作成します。
配置先：src/main/java/com/example/demo/controller/LoginController.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
package com.example.demo.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class LoginController { @GetMapping("/login") public String getLogin() { return "login"; } } |
SecurityConfig
オリジナルのログイン画面を使用できるようにするための設定を追加します。
配置先：src/main/java/com/example/demo/SecurityConfig.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@Override protected void configure(HttpSecurity http) throws Exception { http.authorizeRequests() .antMatchers("/css/**", "/js/**", "/login").permitAll() .antMatchers("/admin/**").hasAuthority("ROLE_ADMIN") .anyRequest().authenticated(); http.formLogin() .loginPage("/login") .loginProcessingUrl("/login") .usernameParameter("username") .passwordParameter("password") .defaultSuccessUrl("/", true) .failureUrl("/login?error"); } |
- http.authorizeRequests()
- http.formLogin()
permitAll()に”/login”のURLを追加します。
これで誰でもアクセス可能になります。
loginPage(“/login”)
⇒GETでアクセスするログイン画面のURLを指定します。
loginProcessingUrl(“/login”)
⇒POSTでリクエストするログイン用のURLを指定します。
ログアウト
SpringBootチュートリアルに追加する形で実装しているので、
header.htmlにログアウトボタンを追加しました。
配置先：src/main/resources/templates/header.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" > <head th:fragment="head(title)"> <meta charset="UTF-8"> <title th:replace="${title}">title</title> <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script> <script defer th:src="@{/js/dialog.js}"></script> </head> <body> <header th:fragment="header"> <a th:href="@{/}">ホーム</a> <a th:href="@{/book/list}">検索</a> <a th:href="@{/book/add}">新規登録</a> <a sec:authorize="hasRole('ROLE_ADMIN')" th:href="@{/admin/index}">管理画面</a> <form th:action="@{/logout}" method="post" style="display:inline;"> <input type="submit" value="ログアウト" /> </form> <hr> </header> </body> </html> |
基本的にPOSTリクエストすることになります。
デザインを変えたい場合
Bootstrapを使った例を追加しましたので、参考にしてみて下さい。
ログイン画面をデザインしよう！
まとめ
- オリジナルのログイン用HTMLを用意すること。
- Controllerにログイン画面への遷移先を定義すること。
- SecurityConfigクラスにログイン画面の設定を追加すること。
- ログアウトはPOSTで実装できる。
参考
SpringSecurityについてもう一歩踏み込んで学んでみたい人向けの教科書
Spring解体新書 セキュリティ編 Spring Securityを徹底解説: 記憶喪失になっても忘れはいけないセキュリティ対策集
最後までお読み頂き、ありがとうございました！
ご意見・ご要望がありましたら、遠慮なくコメント下さい！
もし内容が良かったらランキング評価を頂けると励みになります（＾＾）
⇒ランキング評価する
