前回はSpringSecurityでユーザー認証機能をつくるための、
SecurityConfig.javaクラスの設定方法についてまとめました！
今回はログイン画面とそれをつくるために使ったthymeleafの便利だと思った使い方をまとめます！
ログイン画面の作成
signin.htmlのサンプル
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>ログイン画面サンプル</title>
<link href='/css/src/signin.css' rel='stylesheet' />
<script src='/js/src/signin.js'></script>
</head>
<body>
<!-- ログイン -->
<div id="login-form-area">
<form id="login-form" th:action="@{login}" method="post" autocomplete="off">
<div th:if="${param.error}" class="error-messages" th:text="#{login.failed}">
ユーザーIDまたはパスワードが違います
</div>
<div class="login-line">
<div>
<div><span class="login-label" th:text="#{login.userId}">ユーザーID:</span></div>
<input type="text" name="loginId"/>
</div>
</div>
<div class="login-line">
<div>
<div><span class="login-label" th:text="#{login.password}">パスワード:</span></div>
<input type="password" name="password"/>
</div>
</div>
<div class="login-line">
<div><input type="button" th:value="#{login.signIn}"/></div>
</div>
</form>
</div>
</body>
</html>
SecurityConfigクラスと連携しているところ
- formのactionの指定
- form
- th:action="@{login}"
- SecurityConfig
- loginProcessingUrl("/login")
- form
- inputのname要素(ユーザーID)
- inputのname属性
- <input type="text" name="loginId"/>
- SecurityConfig
- usernameParameter("loginId")
- inputのname属性
- inputのname要素(パスワード)
- inputのname属性
- <input type="password" name="password"/>
- SecurityConfig
- passwordParameter("password")
- inputのname属性
権限付きのメニューの作成
- 名前空間宣言をする
- これで"sec=xxx"が使えるようになる
namespace
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
- admin権限のあるメニューを追加する
- sec:authorize="hasRole('ROLE_ADMIN')" を追加する
- ※ DBのroleに「ROLE_ADMIN」が登録されているユーザーのみ
メニュー例
<div>
<ul>
<li><a th:href="@{/}">Top</a></li>
<li sec:authorize="hasRole('ROLE_ADMIN')"><a href="/admin">Admin</a></li>
<li><a th:href="@{/sample}">Sample</a></li>
<li><a th:href="@{/signout}">Signout</a></li>
<li><a th:href="@{/help}">Help</a></li>
</ul>
</div>
- 「Admin」のメニューは権限があるものしか見れない
- 前回の記事のポイント2部分の権限ごとにページのアクセス制限をつける
- これがないとURL直打ちしてアクセスしてきたユーザーは排除できない
ログイン失敗のときだけメッセージを出す＋CSSを変える
- 前回の記事のポイント2部分にて「.failureUrl("?error")」を指定している場合
- 「?error」のパラメーターを見てエラーメッセージを出してくれる
- class指定もできるのでエラーメッセージだけ赤文字、太文字、などの指定ができる
errorメッセージ部分
<div th:if="${param.error}" class="error-messages">
ユーザーIDまたはパスワードが違います
</div>