カスタムしたログインページを表示する
以下のことを実施します。
1.ログインしたままにする機能を作成
2.カスタムしたログインページを表示
依存関係
・Spring Boot DevTools
・lombok
・検証
・Spring Data JPA
・H2 Database
・Spring Security
・Thymeleaf
・Spring Web
セキュリティ作成
package com.example.demo.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
@Configuration
@EnableWebSecurity
public class securityConfig {
@Bean
public BCryptPasswordEncoder passwordEncoder() {
return new BCryptPasswordEncoder();
}
@Override
public void configure(WebSecurity web) throws Exeption{
web.ignoring().antMatchers("css/***,*/webjars/***");
}
@Override
protected void configure(HttpSecurity http) throws Exception{
http.authorizeRequests().antMatchers("/login").permitAll()
.anyRequest().authenticated().and()
.formLogin().loginPage("/login").defaultSuccessUrl("/").and()
.logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout")).and()
.rememberMe();
}
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception{
auth.inMemoryAuthentication().withUser("admin").password(passwordEncoder().encode("password")).authorities("ROLE_ADMIN").and()
.withUser("user").password(passwordEncoder().encode("password")).authorities("ROLE_USER");
}
}
コントローラ作成
package com.example.demo.controller;
import org.springframework.security.core.Authentication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class SecurityController {
@GetMapping("/login")
public String login() {
return "login";
}
@GetMapping("/")
public String showList(Authentication loginUser,Model model) {
model.addAttribute("username",loginUser.getName());
model.addAttribute("role",loginUser.getAuthorities());
return"user";
}
}
SB Admin2を追加
pom.xml内にあるdependenciesタグ内に以下の2つを追加
<dependency>
<groupId>org.webjars</groupId>
<artifactId>startbootstrap-sb-admin-2</artifactId>
<version>4.0.6</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.40</version>
</dependency>
ThymeleafテンプレートとCSSを作成
・ログイン画面作成
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<th:block th:insert="fragments/base :: header"></th:block>
</head>
<body class="bg-gradient-primary">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">ユーザ管理システム</h1>
</div>
<div class="alert alert-danger" th:if="${param.error}">
<small>ユーザ名またはパスワードが正しくありません。</small>
</div>
<div class="alert alert-success" th:if="${param.register}">
<small>ユーザを新規登録しました</small>
</div>
<div class="alert alert-success" th:if="${param.logout}">
<small>ログアウトしました</small>
</div>
<form th:action="@{/login}" class="user" method="post">
<div class="form-group">
<input type="text"class="form-control form-control-user" name="username"placeholder="ユーザ名">
</div>
<div class="form-group">
<input type="password" class="form-control form-control-user" name="password" placeholder="パスワード">
</div>
<div class="form-group">
<div class="custom-control custom-checkbox small">
<input type="checkbox" class="custom-control-input"id="remember-me"name="remember-me">
<label class="custom-control-label"for="remember-me">ログインしたままにする</label>
</div>
</div>
<button class="btn btn-primary btn-user btn-block">ログイン</button>
</form>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<th:block th:insert="fragments/base :: scripts"></th:block>
</body>
</html>
・base.htmlを作成
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<th:block th:fragment="header">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ユーザ管理システム</title>
<link rel="stylesheet" th:href="@{/webjars/font-awesome/css/all.min.css}">
<link rel="stylesheet" th:href="@{/webjars/startbootstrap-sb-admin-2/css/sb-admin-2.min.css}">
<link rel="stylesheet" th:href="@{/css/app.css}">
</th:block>
</head>
<body>
<th:block th:fragment="scripts">
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/webjars/startbootstrap-sb-admin-2/js/sb-admin-2.min.js}"></script>
<script th:src="@{/webjars/chartjs/Chart.min.js}"></script>
</th:block>
</body>
</html>
・cssファイル作成
@charset "UTF-8";
.bg-login-image{
background:url(/webjars/startbootstrap-sb-admin-2/img/undraw_posting_photo.svg);
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
・ログイン情報ページを作成
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<th:block th:insert="fragments/base :: header"></th:block>
</head>
<body id="page-top">
<div id="wrapper">
<th:block th:insert="fragments/sidebar :: sidebar"></th:block>
<div id="content-wrapper" class="d-flex flex-column">
<div id="content">
<div class="container-fluid">
<div class="card shadow my-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">ログイン情報</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table id="user-table" class="table table-bordered">
<thead>
<tr>
<th>ログインユーザ名</th>
<th>ユーザ権限</th>
</tr>
</thead>
<tbody>
<tr>
<td th:text="${username}"></td>
<td th:text="${role}"></td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<th:block th:insert="fragments/base :: scripts"></th:block>
</body>
</html>
・sidebar.htmlを作成
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
</head>
<body>
<th:block th:fragment="sidebar">
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion"id="accordionsidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center"th:href="@{/}">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-id-card"></i>
</div>
<div class="sidebar-brand-text mx-3">ユーザ管理</div>
</a>
<hr class="sidebar-divider d-none d-md-block">
<li class="nav-item active">
<a class="nav-link pt-2" th:href="@{/}">
<i class="fas fa-user"></i>
<span>ログイン情報</span>
</a>
</li>
<hr class="sidebar-divider d-none d-md-block">
<li class="nav-item active">
<a class="nav-link" th:href="@{/logout}">
<i class="fas fa-sign-out-alt"></i>
<span>ログアウト</span></a>
</li>
<hr class="sidebar-divider d-none d-md-block">
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0 id="sidebarToggle"></button>
</div>
</ul>
</th:block>
</body>
</html>
・エラーページを作成
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<th:block th:insert="fragments/base :: header"></th:block>
</head>
<body id="page-top">
<div id="wrapper">
<th:block th:insert="fragments/sidebar :: sidebar"></th:block>
<div id="content-wrapper" class="d-flex align-items-center">
<div id="content">
<div class="container-fluid">
<div class="text-center">
<div class="error mx-auto" th:attr="data-text=${status}"th:text="${status}"></div>
<p class="lead text-gray-800 mb-5" th:text="${error}"></p>
<p class="text-gray-500 mb-0">ページを表示できません</p>
<a th:href="@{/}">←ホームに戻る</a>
</div>
</div>
</div>
</div>
</div>
<th:block th:insert="fragments/base :: scripts"></th:block>
</body>
</html>
確認
ブラウザでhtt:www.localhost:8080/loginにアクセスする
※sidebar.htmlが読み込まれていないためログイン後の画面が表示されていない。
