💷부트스트랩을 이용한 웹과 Spring Security와 Validation을 적용한 💷회원가입 페이지 만들기

gdhi·2023년 12월 6일

⭐Spring Boot(Thymeleaf, JPA) 웹 쇼핑몰 만들기⭐

목록 보기

8/22

💷부트스트랩 쇼핑몰 만들기

웹페이지의 디자인 및 웹 퍼블리싱 👉 스프링 구현 할 때 힘든점을 트위터에서 만든 오픈소스 부트스트랩을 통해 수비게 할 수 있다.

부트스트랩 CDN 👉 빠르게 서비스 제공, 다운로드가 필요 없다

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>

Jquery CDN

📌추가해보기

따라치지말고 직접 찾아보고 검색하며 어떤 식으로 적용 되는지 보면서 하자

📍layout1.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <th:block layout:fragment = "script"></th:block>
    <th:block layout:fragment = "css"></th:block>

    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

    <!-- JS, Popper.js and Jquery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
    
</head>
<body>
    <div th:replace = "~{fragments/header::header}"></div>

    <div layout:fragment = "content" class = "content"></div>

    <div th:replace = "~{fragments/footer::footer}"></div>
</body>
</html>

📍header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment = "header">
    <nav class = "navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#navbarTogglerDemo03"
                    aria-controls="navbarTogglerDemo03"
                    aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <a class="navbar-brand" href="/">Shop</a>

            <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/item/new">상품 등록</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/admin/items">상품 관리</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/cart">장바구니</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/orders">구매이력</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/members/login">로그인</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/members/logout">로그아웃</a>
                    </li>
                </ul>
                <form class="d-flex" th:action="@{/}" method="get">
                    <input name="searchQuery" class="form-control me-2" type="search"
                           placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
</div>

</body>
</html>

📍footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class = "footer" th:fragment = "footer">
        <footer class="page-footer font-small cyan darken-3">
            <div class="footer-copyright text-center py-3">
                2024 Shopping Mall TheJ WebSite
            </div>
        </footer>
    </div>
</body>
</html>

📍결과

👉 기본 페이지

👉 확대 시에 토글 가능 🔥부트스트랩으로 반응 형 웹 자동으로!

📌CSS 적용하기

📍layout1.css

html{
    position: relative;
    min-height: 100%;
    margin: 0;
}
body{
    min-height: 100%;
}
.footer{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 15px 0;
    text-align: center;
}
.content{
    margin-bottom: 100px;
    margin-top: 50px;
    margin-left: 200px;
    margin-right: 200px;
}

📍layout1.html

...

    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link th:href="@{/css/layout1.css}" rel="stylesheet"> 👉 추가

    <!-- JS, Popper.js and Jquery -->
    ...

📍결과

💷Spring Security 적용하기 ( + 유효성 검사)

Spring 기반 애플리케이션의 보안(인증과 인가 등)을 담당하는 스프링 하위 프레임워크
👉 인증/인가로 최소한으로 해볼 것. 그 이상은 자세히 공부를 해야한다.

쇼핑몰 에서 인증/인가

인증이 필요 없는 경우 : 상품 상세 페이지 조회

인증이 필요한 경우 : 상품 주문

관리자 권한이 필요한 경우 : 상품 등록

최신 3 버전으로 !

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-security</artifactId>
		</dependency>

👉 의존성 추가

👉
id : user
pw : d4604623-b7de-4a15-9860-b41b7e733282, 일회용

👉 간단하게 적용.

📌config 패키지 생성

📍SecurityConfig 설정 클래스 생성

@Configuration
@EnableWebSecurity

코드를 입력하세요

📍Role 역할 Enum 클래스 생성

package com.shop.constant;

public enum Role {
    USER, ADMIN
}

📍MemberFormDto 회원가입 DTO 클래스 생성

package com.shop.dto;

import lombok.Getter;
import lombok.Setter;

// 회원가입 Dto
@Getter
@Setter
public class MemberFormDto {
    private String name;
    private String email;
    private String password;
    private String address;
}

📍Member entity 클래스 생성

package com.shop.entity;


import com.shop.constant.Role;
import com.shop.dto.MemberFormDto;
import jakarta.persistence.*;
import lombok.Getter;
import lombok.Setter;
import lombok.ToString;
import org.springframework.security.crypto.password.PasswordEncoder;

@Entity
@Table (name = "member")
@Getter
@Setter
@ToString
public class Member {
    @Id
    @Column(name = "member_id")
    @GeneratedValue(strategy = GenerationType.AUTO) // autoincrement
    private Long id;
    private  String name;

    @Column (unique = true) // 중복 X
    private String email;

    private String password;
    private String address;
    private String telNumber;

    @Enumerated(EnumType.STRING)
    private Role role;

    // Member를 DB 로 넘겨주는 방식
    public  static Member createMember(MemberFormDto memberFormDto, PasswordEncoder passwordEncoder){

        Member member = new Member();
        member.setName(memberFormDto.getName());
        member.setEmail(memberFormDto.getEmail());
        member.setAddress(memberFormDto.getAddress());
        member.setTelNumber(memberFormDto.getTelNumber());
        String password = passwordEncoder.encode(memberFormDto.getPassword());
        member.setPassword(password);
        member.setRole(Role.ADMIN);

        return member;


    }


}

📍쿼리문 날리는 MemberRepository 인터페이스 생성

package com.shop.repository;

import com.shop.entity.Member;
import org.springframework.data.jpa.repository.JpaRepository;

public interface MemberRepository extends JpaRepository<Member, Long> {

    // 이메일 중복 확인
    // findBy 는 카멜 표기, 그래서 Email
    Member findByEmail(String email); // select email, UNIQUE 이므로 NULL 아니면 1
}

📍MemberService 서비스 클래스 생성

package com.shop.service;

import com.shop.entity.Member;
import com.shop.repository.MemberRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;


// 서비스
@Service
// 트랜잭션 설정 : 성공하면 적용 실패하면 롤백
@Transactional
// final 또는 @NonNull 명령어가 붙으면 객체를 자동으로 붙여준다. @Autowired가 필요 없다는 뜻
@RequiredArgsConstructor // 롬복 어노테이션
public class MemberService {

    //@Autowired
    //MemberRepository memberRepository;
    private final MemberRepository memberRepository;

    // 중복 검사 후에 없으면 저장
    public Member saveMember(Member member) {
        validateDuplicateMember(member);
        return memberRepository.save(member); // 데이터베이스에 저장을 하라는 명령
    }

    // 이메일 중복 검사 메소드
    private void validateDuplicateMember(Member member) {
        Member findMember = memberRepository.findByEmail(member.getEmail());

        // Controller 에서 try/catch 로 나오게
        if (findMember != null) {
            throw new IllegalStateException("이미 가입된 회원입니다.");
        }
    }
}

🤦‍♀️ MemberServiceTest 테스트 해보기

package com.shop.service;

import com.shop.dto.MemberFormDto;
import com.shop.entity.Member;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.test.context.TestPropertySource;
import org.springframework.transaction.annotation.Transactional;

import static org.junit.jupiter.api.Assertions.*;

@SpringBootTest
@Transactional
@TestPropertySource(locations = "classpath:application-test.properties")
class MemberServiceTest {

    @Autowired
    MemberService memberService;

    @Autowired
    PasswordEncoder passwordEncoder;

    public Member createMember(){
        MemberFormDto memberFormDto = new MemberFormDto();
        memberFormDto.setEmail("test@email.com");
        memberFormDto.setName("홍길동");
        memberFormDto.setAddress("서울시 마포구 합정동");
        memberFormDto.setPassword("1234");

        return Member.createMember(memberFormDto, passwordEncoder);

    }

    @Test
    @DisplayName("회원가입 테스트")
    public void saveMemberTest(){

        Member member = createMember();
        Member savedMember = memberService.saveMember(member);

        // assertEquals 는 요청한 값(member)과 실제 저장 된(savedMember) 데이터를 비교
        assertEquals(member.getEmail(), savedMember.getEmail());
        assertEquals(member.getName(), savedMember.getName());
        assertEquals(member.getAddress(), savedMember.getAddress());
        assertEquals(member.getPassword(), savedMember.getPassword());
        assertEquals(member.getRole(), savedMember.getRole());
        assertEquals(member.getTelNumber(), savedMember.getTelNumber();

        System.out.println(savedMember.getEmail());
        System.out.println(savedMember.getName());
        System.out.println(savedMember.getAddress());
        System.out.println(savedMember.getPassword());
        System.out.println(savedMember.getRole());
        System.out.println(savedMember.getTelNumber());

    }



}

테스트 JUnit Assert 메소드 (1)

테스트 JUnit Assert 메소드 (2)

더 다양한 Assert 라이브러리 JUnit - AssertJ

📍결과

Hibernate: 
    select
        m1_0.member_id,
        m1_0.address,
        m1_0.email,
        m1_0.name,
        m1_0.password,
        m1_0.role 
    from
        member m1_0 
    where
        m1_0.email=?
Hibernate: 
    select
        next value for member_seq
test@email.com
홍길동
서울시 마포구 합정동
$2a$10$4bBxO.1rPw6GV4tAofOZ7efgerYQ2wyujcE53zJ07cZRGM4NsRAXW
ADMIN

👉 Equals 이므로 잘 실행 됐다. 다르면 에러

📍중복 회원 가입 테스트

    @Test
    @DisplayName("중복 회원 가입 테스트")
    public void saveDuplicateMemberTest(){
        Member member1 = createMember();
        Member member2 = createMember();

        memberService.saveMember(member1);

        System.out.println("member1 : " + member1);

        // assertThrows 👉 예외처리 상황을 확인 하기 위해 사용
        // 화살표 함수로 바로실행
        Throwable e = assertThrows(IllegalStateException.class, () -> {
            memberService.saveMember(member2);
            System.out.println("member2 : " + member2);});
        assertEquals("이미 가입된 회원입니다.", e.getMessage());
    }

👉 member1 에서 validateDuplicateMember 에 의해 IllegalStateException("이미 가입된 회원입니다.") 발생

👉 위 member1의 에러 "이미 가입된 회원입니다." 와 e.getMessage()/IllegalStateException 가 동일하면 실행한다

📍결과

Hibernate: 
    select
        next value for member_seq
member1 : Member(id=1, name=홍길동, email=test@email.com, password=$2a$10$lxRf8mMn.UOlcaK81QVYUeEXD5CtdwmqVeifSbrHLiDpauhF5dnha, address=서울시 마포구 합정동, role=ADMIN)
Hibernate: 
    insert 
    into
        member
        (address, email, name, password, role, member_id) 
    values
        (?, ?, ?, ?, ?, ?)
Hibernate: 
    select
        m1_0.member_id,
        m1_0.address,
        m1_0.email,
        m1_0.name,
        m1_0.password,
        m1_0.role 
    from
        member m1_0 
    where
        m1_0.email=?

👉

📍 MemberController 컨트롤러 클래스 생성

package com.shop.controller;

import com.shop.dto.MemberFormDto;
import com.shop.entity.Member;
import com.shop.service.MemberService;
import jakarta.validation.Valid;
import lombok.RequiredArgsConstructor;
import lombok.Value;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.*;


@Controller
@RequestMapping("/members")
@RequiredArgsConstructor
public class MemberController {

    private final MemberService memberService;

    private final PasswordEncoder passwordEncoder;

    // method = "get" 일 때 실행
    @GetMapping(value = "/new")
    public String memberForm(Model model){

        model.addAttribute("memberFormDto", new MemberFormDto());

        return "member/memberForm";
    }

    // method = "post" 일 때 실행 DB에 저장
    @PostMapping(value = "/new")
    // memberForm 오버로딩
    public String memberForm(@Valid MemberFormDto memberFormDto, BindingResult bindingResult, Model model){

        // 에러나면 다시 가입
        if(bindingResult.hasErrors()){
            return "member/memberForm";
        }

        try {
            Member member = Member.createMember(memberFormDto, passwordEncoder);

            memberService.saveMember(member);
            // 맞춰놓은 IllegalStateException 에러
        }catch (IllegalStateException e){
        
            model.addAttribute("errorMessage", e.getMessage());

            return "member/memberForm";
        }

        return "redirect:/";
    }
}

📍 memberForm.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout1}">
<!-- 사용자 CSS 추가 -->
<th:block layout:fragment = "css">
    <style>
        .fieldError{
            color: #bd2130;
        }
    </style>
</th:block>
<!-- 사용자 JS 추가-->
<th:block layout:fragment = "script">
    <script th:inline = "javascript">
        $(document).ready(function(){
            var errorMessage = [[${errorMessage}]];
            if(errorMessage != null){
                alert(errorMessage);
            }
        });
    </script>
</th:block>

<div layout:fragment = "content">
    <form action="/members/new" role="form" method="post" th:object = "${memberFormDto}">
        <div class = "form-group">
            <label th:for = "name">이름</label>
            <input type="text" th:field="*{name}" class="form-control" placeholder="이름을 입력해주세요">
            <!--조건문으로 name 에서 유효성 검사로 에러가 발생 하면 th:errors = "*{name}" 에 의해 ("이름이 너무 깁니다") 같은 name에 대한 에러를 실행
            Spring validate를 직접하며 에러 발생시 에러구문이 Controller에서 오지 않을 때 Incorrect data 출력 -->
            <p th:if="${#fields.hasErrors('name')}" th:errors="*{name}" class="fieldError">Incorrect date</p>
        </div>
        <div class="form-group">
            <label th:for="email">이메일주소</label>
            <input type="text" th:field="*{email}" class="form-control" placeholder="이메일을 입력해주세요">
            <p th:if="${#fields.hasErrors('email')}" th:errors="*{email}" class="fieldError">Incorrect date</p>
        </div>
        <div class="form-group">
            <label th:for="password">암호</label>
            <input type="password" th:field="*{password}" class="form-control" placeholder="비밀번호를 입력해주세요">
            <p th:if="${#fields.hasErrors('password')}" th:errors="*{password}" class="fieldError">Incorrect
                date</p>
        </div>
        <div class="form-group">
            <label th:for="address">주소</label>
            <input type="text" th:field="*{address}" class="form-control" placeholder="주소를 입력해주세요">
            <p th:if="${#fields.hasErrors('address')}" th:errors="*{address}" class="fieldError">Incorrect date</p>
        </div>
        <div class="form-group">
            <label th:for="telNumber">전화 번호</label>
            <input type="text" th:field="*{telNumber}" class="form-control" placeholder="전화번호를 입력해주세요">
            <p th:if="${#fields.hasErrors('telNumber')}" th:errors="*{telNumber}" class="fieldError">Incorrect date</p>
        </div>

        <div style="text-align: center">
            <button type="submit" class="btn btn-success" style="">Submit</button>
        </div>

        <!-- CSRF를 방어하기 위해 추가. POST 방식일 때 사용하며 CSRF 토큰이 있어야한다.
         허용한 요청이 맞는지 확인하기 위한 토큰 이다. -->
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">

    </form>
</div>

</html>

📍MainController 클래스 생성

package com.shop.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MainController {
    @GetMapping(value = "/")
    public String main (){
        return "main";
    }
}

📍main.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout1}" lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div layout:fragment = "content">
    <h1>메인 페이지 입니다.</h1>
</div>
</body>
</html>

📍SecurityConfig 클래스 이어서 작성

package com.shop.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    // 전부 허락
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception{
        http.authorizeRequests(auth -> auth.requestMatchers("/", "/members/**").permitAll())
                .formLogin(formLogin -> formLogin.permitAll())
                .logout(logout -> logout.permitAll());

        return  http.build();

    }

    // 비밀번호 암호화
    @Bean
    public PasswordEncoder passwordEncoder(){
        return new BCryptPasswordEncoder();
    }


}

📌결과

👉 http://localhost/members/new.아직 웹 페이지들이 미완성이기 때문에 403 에러가 발생하면 뒤로가기하며 실행하면 된다

👉 유효성 검사는 전부 잘 작동한다. 비밀번호, 이메일은 제외하고 EMPTY 값에만 유효성 검사를 실행하게 되어 있다.

👉 제출 후 root 로 이동

👉 아직 ROLE 은 세부 설정 하지 않았다. 위 등록된 이메일로 가입을 진행하면

❓어떤 구조로 실행?

❗ 구조 파악을 잘 하면서 넘어가야 더 복잡해 질 때 이해를 할 수 있다. 계속 이해하지 못하면 눈덩이 처럼 굴러가 이해가 불가 할 것

memberForm.html 회원가입 submit 으로 form action

MemberFormDto 를 Controller 에 전달 th:object = "${memberFormDtd}" 로 dto와 th:field = "*{name}", "*{email}", "*{password}", "*{address}", "*{telNumber}"이 연결되어 이름과 맞는 변수에 대입
Controller의 @Valid 가 붙은 memberFormDto 로 유효성 검사를 실행한다. BindingResult 객체를 통해 바인딩 결과를 확인하고, 에러가 있으면 "member/memberForm" 뷰로 다시 이동

Service 로 이동 이 때 MemberFormDto 를 Member로 받는다

saveMember 실행validateDuplicateMember MemberRepository 의 findByEmail로 중복 체크

문제없으면 createMember 후 saveMember로 저장

문제 있으면(이메일 중복) try/catch로 saveMember에서 받은 "이미 가입된 회원입니다." 를 Model로 보내 [[${errorMessage}]]; 에 담아 alert(errorMessage) 출력