カスタムしたログインページを表示

#カスタムしたログインページを表示する
　以下のことを実施します。
　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="@{/}">&larr;ホームに戻る</a>
</div>

</div>
</div>
</div>

</div>
<th:block th:insert="fragments/base :: scripts"></th:block>
</body>
</html>
```

#確認
ブラウザでhtt:www.localhost:8080/loginにアクセスする
![課題36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/8e0d3ed4-ae61-6422-0d8a-85dcad5fc739.png)

***※sidebar.htmlが読み込まれていないためログイン後の画面が表示されていない。***
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/686519/a16430ad-57af-e2ac-90ec-6c51ef13a30d.png)

#以上