【SE入門編】Spring Tool Suite 4を使ってWEBプロジェクトのログイン画面及びセッション管理機能を実装する。

0. 前書き

今回の記事は「SE入門編」シリーズの一部です。完全版はこちらにあります：

当該バージョンのソースはGithubにアップロードしております：

1. 前提条件

• 前提条件として、DBおよびWebプロジェクトの構築が完了していることが前提です。もし構築がまだ完了していない場合は、以下の記事を参照してください。

• 今回の実装では、ログイン画面及びセッション管理のみに焦点を当てます。実装に際しては、SpringやThymeleafの基本実装が理解されていることが前提です。

• 実装にはjQueryとBootstrapを使用しますので、これらを使いこなすスキルが必要です。

【参考記事】

• DBの構築手順：

• WEBプロジェクトの構築手順：

• CRUDの基本実装：

• このシリーズの完全版記事：

２. 今回の記事で出来たこと

• セッション管理。

• ログイン画面の実装。

• ログアウトの実装。

• 画面説明：

ログイン初期画面

ユーザーIDやパスワードが未入力時、ログインボタンを押すときの画面

ユーザーIDやパスワードが正しくないときの画面

セッションタイムアウトが発生時の画面

ログイン成功時の画面（ユーザーID＝ADMINでログインする時）

ログイン成功時の画面（ユーザーID＝DEMO001でログインする時）

ログアウトの画面

３. 具体的な設定やソースの解説

• 追加＆修正したソースファイル：
  

分類（目的別）	ファイル名	修正区分	説明
設定ファイル	application.properties	修正	セッション管理の設定を追加。
設定ファイル	pom.xml	修正	セッション管理の設定を追加ル。
全体フィルター	SessionFilter.java	追加	全てのリクエストはSessionFilter.javaを通して、セッションタイムアウト時の画面遷移などを実装。
ログイン画面	LoginController.java	追加	ログイン＆ログアウト＆タイムアウトのアクションを実装。
ログイン画面	LoginForm.java	追加	Login画面の項目（ユーザーID、パスワード）を保持するフォーム。
ログイン画面	login.html	追加	ログイン画面
ログイン画面	timeout.html	追加	タイムアウト画面。役目はタイムアウトが発生時ログイン画面に遷移する。
ログアウトメニュー関係	04.MENU.sql	修正	ログアウトのメニューを追加、ユーザー管理のアクションを修正。
ログアウトメニュー関係	05.MENU_CATEGORY.sql	修正	カテゴリーに一番上の親カテゴリー（#）を追加。
ログアウトメニュー関係	06.ROLE_MENU.sql	修正	各ロールにログアウトメニューの権限を追加。
セッション関係修正（メイン画面）	MainController.java	修正	セッション管理が出来たため、パラメータからuserIdの取得が不要になりました。
セッション関係修正（メイン画面）	main.html	修正	セッション管理が出来たため、パラメータからuserIdの取得をセッションから取得に変更しました。
セッション関係修正（メニュー画面）	MenuController.java	修正	セッション管理が出来たため、パラメータからuserIdの取得をセッションから取得に変更しました。
セッション関係修正（メニュー画面）	menu.html	修正	ログアウトのアクション処理を追加。
ユーザーテーブル更新	UserRepository.java	修正	ログイン成功時、ユーザーテーブルの最終ログイン日時を更新する。
ユーザーテーブル更新	UserService.java	修正	ログイン成功時、ユーザーテーブルの最終ログイン日時を更新する。
ユーザーテーブル更新	UserRepository.xml	修正	ログイン成功時、ユーザーテーブルの最終ログイン日時を更新する。
その他	error.html	修正	今回の記事とは関係ないが、詳細メッセージがない時、詳細ボタンを表示しないように修正。

３.１ セッション管理

セッション管理はHTTPSessionだけでも充分だが、今回は独断でSpring Sessionを採用し、セッション情報をRDBMSのOracleに保持し、見えるようにします。

Spring Sessionはいろんなデータストア（Redis、RDBMS、Hazelcastなど）にセッション情報を保存できる。

• Hazelcast（ヘイゼルキャスト）は、オープンソースの分散型インメモリデータグリッド（In-Memory Data Grid）および分散コンピューティングプラットフォームです。クラウド、オンプレミス、またはハイブリッド環境で使用できるように設計されています。
• Redis（リディス）は、高性能なキー-バリューストアとして知られるオープンソースのインメモリデータベースです。
• Redisはインストールが必要なので、今回は既に採用しているRDBMSのOracleに保存します。

セッション管理の設定(JDBC)

• データベースの準備：公式githubから、セッション情報保持用のテーブルを作成スクリプトをダウンロードして、テーブルを作成します。

テーブル作成成功：SPRING_SESSIONとSPRING_SESSION_ATTRIBUTESが作成される。

• application.propertiesの設定を追加
  ストアタイプ＝JDBC
  セッション情報保持テーブル名＝SPRING_SESSION
  セッションタイムアウト時間＝1分、タイムアウトのテストをできるように、１分を設定しております、実際のプロジェクトは需要に応じて設定してください。

spring.session.store-type=jdbc
spring.session.jdbc.initialize-schema=embedded
spring.session.jdbc.table-name=SPRING_SESSION
server.servlet.session.timeout=1m

• pom.xmlを編集
  セッション管理の依存関係を追加する。

		<dependency>
			<groupId>org.springframework.session</groupId>
			<artifactId>spring-session-jdbc</artifactId>
		</dependency>

• 設定結果を確認：上記の設定だけで、セッション管理ができるようになっております。以下のURLを叩いて、セッション管理テーブルにレコードが作成されることを確認できます。
  http://localhost:8000/main

このようなデータが表示されたら設定成功です（IDはランダム）。

セッションタイムアウトの実装

SessionFilter.java：

• 全てのリクエストをSessionFilter.javaを通すように、インタフェースFilterを実装する。

public class SessionFilter implements Filter

• セッションタイムアウトが発生する時、タイムアウト画面へ遷移する。
• CSSやJSなど、static配下のリソースはリクエストの判定対象外にする。現時点ではJqueryやBootstrapなどのCSSとJSしか使われていないが、今後これ以外のリソースを使う時、isTargetに追加実装が必要です。

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {
		HttpServletRequest httpRequest = (HttpServletRequest) request;
		HttpServletResponse httpResponse = (HttpServletResponse) response;

		if (isTarget(request) && isSessionTimeout(httpRequest)) { // セッションタイムアウト
			String requestUri = httpRequest.getRequestURI();
			// ログイン・ログアウト・タイムアウトページのタイムアウトは行わない。
			if (requestUri != null && !requestUri.endsWith("/login") && !requestUri.endsWith("/logout")
					&& !requestUri.endsWith("/timeout")) {
				// 通常画面の場合は、ログイン画面を表示しセッションタイムアウトメッセージを伝える。
				httpResponse.sendRedirect(httpRequest.getContextPath() + "/timeout");
			} else {
				chain.doFilter(request, response);
			}
		} else {
			chain.doFilter(request, response);
		}
	}

• セッションタイムアウト判定：セッション情報がない時や、セッション情報からuserID取得できないときはタイムアウトと判定する。

	/**
	 * セッションタイムアウト判定
	 *
	 * @param request
	 * @return
	 */
	private boolean isSessionTimeout(HttpServletRequest request) {
		HttpSession httpSession = request.getSession(false);
		if (httpSession == null) {
			return true;
		}
		if (httpSession.getAttribute("userID") == null) {
			return true;
		}
		String sessionId = request.getRequestedSessionId();
		boolean isValid = request.isRequestedSessionIdValid();
		return httpSession == null || sessionId == null || !isValid || !sessionId.equals(httpSession.getId());
	}

	/**
	 * 対象のリクエストか判定 css, js等のリソースアクセスについては出力対象外 uri.indexOf("/static") < 0 ：
	 * staticフォルダにすべてのリソースが出力対象外 !uri.endsWith(".css") ： staticフォルダ以外の.cssファイルが出力対象外
	 * !uri.endsWith(".js") ： staticフォルダ以外の.jsファイルが出力対象外
	 *
	 * @param request リクエスト
	 * @return true : ロギング対象 / false : ロギング対象ではない
	 */
	private boolean isTarget(ServletRequest request) {
		String uri = ((HttpServletRequest) request).getRequestURI().toLowerCase();
		return (uri.indexOf("/static") < 0 && !uri.endsWith(".css") && !uri.endsWith(".js"));
	}

ログイン画面（login.html）の実装

errorLogin：エラーメッセージを受け取るJS

var errorLogin = /*[[${errorLogin}]]*/;

エラーメッセージを表示するエリア

<div th:if="${errorLogin}" th:text="*{errorLogin}" class="alert alert-danger" role="alert"></div>

フォームエリア：

• アクションは”/login”
• ユーザーID、パスワードは必須入力項目（required="required" ）
• ログインボタン：押下時入力されたユーザーIDとパスワードを送信する。
• ほか、Tyeamleafや、Bootstrapの説明は省きます。

      <form th:action="@{/login}" method="post">
          <div class="form-group">
              <label for="userID">ユーザーID:</label>
              <input type="text" id="userID" name="userID" class="form-control" required="required" />
          </div>
          <div class="form-group">
              <label for="password">パスワード:</label>
              <input type="password" id="password" name="password" class="form-control" required="required" />
          </div>
          <button type="submit" class="btn btn-primary btn-block">ログイン</button>
      </form>

ログイン画面アクション（LoginController.java）の実装

loginアクション：

	@RequestMapping(value = "/login")
	@ResponseBody
	public ModelAndView loginAction(@ModelAttribute LoginForm form, ModelAndView model, HttpSession httpSession, HttpServletRequest request) {
		String userID = form.getUserID();
		if(userID != null && !"".equals(userID)) {
			String password = form.getPassword();
			User user = userService.selectUserByPK(userID);
			if(user != null && password != null && password.equals(user.getPassword())) {
				httpSession.setAttribute("userID", userID);
				httpSession.setAttribute("userName", user.getUserName());
				model.addObject("userID", userID);
				model.setViewName("main");
			} else {
				model.setViewName("login");
				model.addObject("errorLogin", "ユーザーIDまたはパスワードが正しくありません。");
			}
		}
		
		String timeout = request.getParameter("timeout");
		if(timeout != null && "true".equals(timeout)) {
			model.addObject("errorLogin", "ログアウトされたか、セッションタイムアウトが発生しました、ログインし直してください。");
		}
		return model;
	}

• ログイン画面（login.html）の初期表示時に、form.getUserID() が null なので、何の処理も行いません。
• ログイン画面（login.html）からログインボタンを押下すると、ユーザーIDとパスワードの正当性チェックを行います。チェックがOKの場合、セッションの属性に userID と userName を保存し、main画面に遷移します。チェックが失敗した場合、メッセージを保持し、login画面に遷移します。
• タイムアウトが発生した場合、timeout画面から遷移されるため、エラーメッセージを保持し、login画面に遷移します。

logoutアクション：セッション情報を破棄する

	@RequestMapping(value = "/logout")
	@ResponseBody
	public ModelAndView logoutAction(ModelAndView model, HttpSession httpSession, SessionStatus sessionStatus) {
		httpSession.removeAttribute("userID"); //セッションに登録したuserIDを削除する
		httpSession.removeAttribute("userName");//セッションに登録したuserNameを削除する
		httpSession.invalidate(); //セッションの破棄
		sessionStatus.setComplete(); //セッション情報を破棄する
		model.setViewName("login");
		return model;
	}

おわりに

全体のソースコードはGitHubにアップロードしましたので、ぜひダウンロードして確認してください。

また、この記事では一部のソースコードしか説明していませんが、説明を希望する特定の部分があればリクエストしていただければと思います。詳細や特定の質問について連絡いただければ、それに基づいて訂正や説明を提供できます。

次回は多言語対応に、メッセージおよび画面の言語を切り替えられるように実装していきたいと考えています。お楽しみにお待ちください。

それではまた。