概要
オリジナルのログイン画面を実装する方法です。
以下の内容になっています。
- ログイン用の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 |
<!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 |
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 |
@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()
permitAll()に”/login”のURLを追加します。
これで誰でもアクセス可能になります。
-
- http.formLogin()
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 |
<!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で実装できる。
参考
後悔しないためのSpring Boot 入門書：Spring 解体新書（第2版）: Spring Bootが丸分かり Spring解体新書
コメント