前回は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")
inputのname要素(ユーザーID)
- inputのname属性
  - <input type="text" name="loginId"/>
- SecurityConfig
  - usernameParameter("loginId")
inputのname要素(パスワード)
- inputのname属性
  - <input type="password" name="password"/>
- SecurityConfig
  - passwordParameter("password")

権限付きのメニューの作成

名前空間宣言をする
- これで"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>