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

12704 ワード
課題 課題 テキストリンク

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

　以下のことを実施します。
　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にアクセスする

※sidebar.htmlが読み込まれていないためログイン後の画面が表示されていない。

以上