'스프링 MVC 2편 - 백엔드 웹 개발 활용 기술' 수업을 듣고 정리한 내용입니다.
📚 1. 로그인 요구사항
- 홈 화면 - 로그인 전
- 회원 가입
- 로그인
- 홈 화면 - 로그인 후
- 본인 이름(OO님 환영합니다.)
- 상품 관리
- 로그아웃
- 보안 요구사항
- 로그인 사용자만 상품에 접근하고, 관리할 수 있음
- 로그인 하지 않은 사용자가 상품 관리에 접근하면 로그인 화면으로 이동
- 회원 가입, 상품 관리
홈 화면 - 로그인 전
홈 화면 - 로그인 후
회원 가입
로그인
상품 관리
📚 2. 프로젝트 생성
- 실행하면
HomeController에서/items로redirect한다.
📖 A. 패키지 구조 설계
📣 package 구조
- hello.login
- domain
- item
- member
- login
- web
- item
- member
- login
🔔 package 구조에서 도메인이 가장 중요하다.
도메인 : 시스템이 구현해야 하는 핵심 비즈니스 업무 영역 (화면, UI, 기술 인프라 등등의 영역은 제외)
💡 참고
- 향후
web을 다른 기술로 바꾸어도 도메인은 그대로 유지할 수 있어야 한다.- 이렇게 하려면
web은domain을 알고있지만domain은web을 모르도록 설계해야 한다.- 이것을
web은domain을 의존하지만,domain은web을 의존하지 않는다고 표현한다!
- 예를 들어
web패키지를 모두 삭제해도domain에는 전혀 영향이 없도록 의존관계를 설계하는 것이 중요하다.- 반대로 이야기하면
domain은web을 참조하면 안된다.
📚 3. 홈 화면
HomeController - home() 수정
package hello.login.web;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Slf4j
@Controller
public class HomeController {
@GetMapping("/")
public String home() {
return "home";
}
}
templates/home.html 추가
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}" href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="max-width: 600px">
<div class="py-5 text-center">
<h2>홈 화면</h2>
</div>
<div class="row">
<div class="col">
<button class="w-100 btn btn-secondary btn-lg" type="button" th:onclick="|location.href='@{/members/add}'|">
회원 가입
</button>
</div>
<div class="col">
<button class="w-100 btn btn-dark btn-lg" onclick="location.href='items.html'" th:onclick="|location.href='@{/login}'|" type="button">
로그인
</button>
</div>
</div>
<hr class="my-4">
</div> <!-- /container -->
</body>
</html>
실행 결과
📚 4. 회원 가입
Member
package hello.login.domain.member;
import lombok.Data;
import javax.validation.constraints.NotEmpty;
@Data
public class Member {
private Long id;
@NotEmpty
private String loginId; // 로그인 ID
@NotEmpty
private String name; // 사용자 이름
@NotEmpty
private String password;
}
MemberRepository
package hello.login.domain.member;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Repository;
import java.util.*;
/**
* 동시성 문제가 고려되어 있지 않음, 실무에서는 ConcurrentHashMap, AtomicLong 사용 고려
*/
@Slf4j
@Repository
public class MemberRepository {
private static Map<Long, Member> store = new HashMap<>(); // static 사용
private static long sequence = 0L; // static 사용
public Member save(Member member) {
member.setId(++sequence);
log.info("save: member={}", member);
store.put(member.getId(), member);
return member;
}
public Member findById(Long id){
return store.get(id);
}
public Optional<Member> findByLoginId(String loginId) {
// List<Member> all = findAll();
// for (Member m : all) {
// if(m.getLoginId().equals(loginId)){
// return Optional.of(m);
// }
// }
// return Optional.empty();
return findAll().stream()
.filter(m -> m.getLoginId().equals(loginId))
.findFirst();
}
public List<Member> findAll(){
return new ArrayList<>(store.values());
}
public void clearStore(){
store.clear();
}
}
MemberController
package hello.login.web.member;
import hello.login.domain.member.Member;
import hello.login.domain.member.MemberRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.validation.Valid;
@Controller
@RequiredArgsConstructor
@RequestMapping("/members")
public class MemberController {
private final MemberRepository memberRepository;
@GetMapping("/add")
public String addForm(@ModelAttribute("member") Member member) {
return "members/addMemberForm";
}
@PostMapping("/add")
public String save(@Valid @ModelAttribute Member member, BindingResult bindingResult) {
if (bindingResult.hasErrors()) {
return "members/addMemberForm";
}
memberRepository.save(member);
return "redirect:/";
}
}
@ModelAttribute("member")를@ModelAttribute로 변경해도 결과는 같다.- 여기서는 IDE에서 인식 문제가 있어서 적용했다.
회원 가입 뷰 템플릿
templates/members/addMemberForm.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}"
href="../css/bootstrap.min.css" rel="stylesheet">
<style>
.container {
max-width: 560px;
}
.field-error {
border-color: #dc3545;
color: #dc3545;
}
</style>
</head>
<body>
<div class="container">
<div class="py-5 text-center">
<h2>회원 가입</h2>
</div>
<h4 class="mb-3">회원 정보 입력</h4>
<form action="" th:action th:object="${member}" method="post">
<div th:if="${#fields.hasGlobalErrors()}">
<p class="field-error" th:each="err : ${#fields.globalErrors()}" th:text="${err}">전체 오류 메시지</p>
</div>
<div>
<label for="loginId">로그인 ID</label>
<input type="text" id="loginId" th:field="*{loginId}" class="form-control" th:errorclass="field-error">
<div class="field-error" th:errors="*{loginId}" />
</div>
<div>
<label for="password">비밀번호</label>
<input type="password" id="password" th:field="*{password}" class="form-control" th:errorclass="field-error">
<div class="field-error" th:errors="*{password}" />
</div>
<div>
<label for="name">이름</label>
<input type="text" id="name" th:field="*{name}" class="form-control" th:errorclass="field-error">
<div class="field-error" th:errors="*{name}" />
</div>
<hr class="my-4">
<div class="row">
<div class="col">
<button class="w-100 btn btn-primary btn-lg" type="submit">회원 가입</button>
</div>
<div class="col">
<button class="w-100 btn btn-secondary btn-lg" onclick="location.href='items.html'" th:onclick="|location.href='@{/}'|" type="button">취소</button>
</div>
</div>
</form>
</div> <!-- /container -->
</body>
</html>
실행 결과
✓ 회원가입 페이지 화면
✓ 아무런 정보를 입력하지 않고 회원 가입 버튼 클릭 후 화면
➡️ 에러 메시지는 지난 시간에 배운 errors.properties에서 또는 @NotEmpty를 사용하여 바꿀 수 있다.
✓ 로그인 성공 시
h.login.domain.member.MemberRepository : save: member=Member(id=2, loginId=asd12, name=sss, password=2121)
이런 식으로 id, loginId, name, password 정보가 나타난다.
📖 A. 회원용 테스트 데이터 추가
- 실행하고 로그로 결과를 확인하자
- 편의상 테스트용 회원 데이터를 추가하자!
loginId : test
password : test!
name: 테스트➡️ 매번 테스트할 때마다 회원가입하는 것은 번거롭기에 생성하였다.
TestDataInit
package hello.login;
import hello.login.domain.item.Item;
import hello.login.domain.item.ItemRepository;
import hello.login.domain.member.Member;
import hello.login.domain.member.MemberRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Component;
import javax.annotation.PostConstruct;
@Component
@RequiredArgsConstructor
public class TestDataInit {
private final ItemRepository itemRepository;
private final MemberRepository memberRepository;
/**
* 테스트용 데이터 추가
*/
@PostConstruct
public void init() {
itemRepository.save(new Item("itemA", 10000, 10));
itemRepository.save(new Item("itemB", 20000, 20));
Member member = new Member();
member.setLoginId("test");
member.setPassword("test!");
member.setName("테스트");
memberRepository.save(member);
}
}
실행 결과
h.login.domain.member.MemberRepository : save: member=Member(id=1, loginId=test, name=테스트, password=test!)
📚 5. 로그인 기능
로그인 기능을 개발해보자. 지금은 로그인 ID, 비밀번호를 입력하는 부분에 집중하자.
✓ LoginService
package hello.login.domain.login;
import hello.login.domain.member.Member;
import hello.login.domain.member.MemberRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import java.util.Optional;
@Service
@RequiredArgsConstructor
public class LoginService {
private final MemberRepository memberRepository;
/**
*
* @return null 로그인 실패
*/
public Member login(String loginId, String password) {
// Optional<Member> findMemberOptional = memberRepository.findByLoginId(loginId);
// Member member = findMemberOptional.get();
// if (member.getPassword().equals(password)) {
// return member;
// }else{
// return null;
// }
return memberRepository.findByLoginId(loginId)
.filter(m -> m.getPassword().equals(password))
.orElse(null);
}
}
- 로그인의 핵심 비즈니스 로직은 회원을 조회한다.
- 다음에 파라미터로 넘어온
password와 비교해서password가 같으면 회원을 반환한다.password가 다르면null을 반환한다.
✓ LoginForm
package hello.login.web.login;
import lombok.Data;
import javax.validation.constraints.NotEmpty;
@Data
public class LoginForm {
@NotEmpty
private String loginId;
@NotEmpty
private String password;
}
✓ LoginController
package hello.login.web.login;
import hello.login.domain.login.LoginService;
import hello.login.domain.member.Member;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import javax.validation.Valid;
@Slf4j
@Controller
@RequiredArgsConstructor
public class LoginController {
private final LoginService loginService;
@GetMapping("/login")
public String loginForm(@ModelAttribute("loginForm") LoginForm form) {
return "login/loginForm";
}
@PostMapping("/login")
public String login(@Valid @ModelAttribute LoginForm form, BindingResult bindingResult) {
if (bindingResult.hasErrors()) {
return "login/loginForm";
}
Member loginMember = loginService.login(form.getLoginId(), form.getPassword());
log.info("login? {}", loginMember);
if (loginMember == null) {
bindingResult.reject("loginFail", "아이디 또는 비밀번호가 맞지 않습니다.");
return "login/loginForm";
}
//로그인 성공 처리 TODO
return "redirect:/";
}
}- 로그인 컨트롤러는 로그인 서비스를 호출해서
- 로그인에 성공하면 홈 화면으로 이동한다.
- 로그인에 실패하면
bindingResult.reject()를 사용해서 글로벌 오류(ObjectError)를 생성한다. - 정보를 다시 입력하도록 로그인 폼을 뷰 템플릿으로 사용한다.
✓ 로그인 폼 뷰 템플릿
templates/login/loginForm.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}"
href="../css/bootstrap.min.css" rel="stylesheet">
<style>
.container {
max-width: 560px;
}
.field-error {
border-color: #dc3545;
color: #dc3545;
}
</style>
</head>
<body>
<div class="container">
<div class="py-5 text-center">
<h2>로그인</h2>
</div>
<form action="item.html" th:action th:object="${loginForm}" method="post">
<div th:if="${#fields.hasGlobalErrors()}">
<p class="field-error" th:each="err : ${#fields.globalErrors()}" th:text="${err}">전체 오류 메시지</p>
</div>
<div>
<label for="loginId">로그인 ID</label>
<input type="text" id="loginId" th:field="*{loginId}" class="form-control" th:errorclass="field-error">
<div class="field-error" th:errors="*{loginId}" />
</div>
<div>
<label for="password">비밀번호</label>
<input type="password" id="password" th:field="*{password}" class="form-control" th:errorclass="field-error">
<div class="field-error" th:errors="*{password}" />
</div>
<hr class="my-4">
<div class="row">
<div class="col">
<button class="w-100 btn btn-primary btn-lg" type="submit">로그인</button>
</div>
<div class="col">
<button class="w-100 btn btn-secondary btn-lg" onclick="location.href='items.html'" th:onclick="|location.href='@{/}'|" type="button">취소</button>
</div>
</div>
</form>
</div> <!-- /container -->
</body>
</html>- 로그인 폼 뷰 템플릿에는 특별한 코드는 없다.
loginId,password가 틀리면 글로벌 오류가 나타난다.
실행 결과
✓ 로그인 성공 시
로그인 성공하면 홈으로 이동한다.
id,password입력
- 로그인 성공
✓ 로그인 실패시
id,password입력
- 로그인에 실패하면
"아이디 또는 비밀번호가 맞지 않습니다."라는 경고와 함께 로그인 폼이 나타난다.
✓ 반환 값 확인
- 로그인 성공 시 : 회원 반환
- 로그인 실패 시 :
null반환
📌 정리
- 현재 로그인은 된다.
- 다만, 로그인이 되면 홈 화면에 고객 이름이 보여야 한다는 요구사항을 만족하지 못한다.
- 로그인의 상태를 유지하면서, 로그인에 성공한 사용자는 홈 화면에 접근시 고객의 이름을 보여주려면 어떻게 해야할까?
📚 6. 로그인 처리하기 - 쿠키 사용
로그인 상태 유지하기
- 로그인 상태를 어떻게 유지할 수 있을까?
- 쿼리 파라미터를 계속 유지하면서 보내는 것은 매우 어렵고 번거로운 작업이다.
📖 A. 쿠키
- 서버에서 로그인에 성공하면 HTTP 응답에 쿠키를 담아서 브라우저에 전달하자.
- 그러면 브라우저는 앞으로 해당 쿠키를 지속해서 보내준다.
쿠키 생성
클라이언트 쿠키 전달 1
클라이언트 쿠키 전달 2
쿠키에는 영속 쿠키와 세션 쿠키가 있다.
- 영속 쿠키: 만료 날짜를 입력하면 해당 날짜까지 유지
- 세션 쿠키: 만료 날짜를 생략하면 브라우저 종료시 까지만 유지
➡️ 브라우저 종료시 로그아웃이 되길 기대하므로, 우리에게 필요한 것은 세션 쿠키이다.
📖 B. 로그인
(1) 로그인 성공시 세션 쿠키를 생성하자.
LoginController - login()
@PostMapping("/login")
public String login(@Valid @ModelAttribute LoginForm form, BindingResult bindingResult, HttpServletResponse response) {
if (bindingResult.hasErrors()) {
return "login/loginForm";
}
Member loginMember = loginService.login(form.getLoginId(), form.getPassword());
if (loginMember == null) {
bindingResult.reject("loginFail", "아이디 또는 비밀번호가 맞지 않습니다.");
return "login/loginForm";
}
//로그인 성공 처리
//쿠키에 시간 정보를 주지 않으면 세션 쿠기(브라우저 종료시 모두 종료)
Cookie idCookie = new Cookie("memberId", String.valueOf(loginMember.getId()));
response.addCookie(idCookie);
return "redirect:/";
}
쿠키 생성 로직
Cookie idCookie = new Cookie("memberId", String.valueOf(loginMember.getId()));
response.addCookie(idCookie);- 로그인에 성공하면 쿠키를 생성하고
HttpServletResponse에 담는다. - 쿠키 이름은
memberId이고, 값은 회원의id를 담아둔다. - 웹 브라우저는 종료 전까지 회원의
id를 서버에 계속 보내줄 것이다.
실행
- 크롬 브라우저를 통해 HTTP 응답 헤더에 쿠키가 추가된 것을 확인할 수 있다.
(2) 홈 - 로그인 처리
package hello.login.web;
import hello.login.domain.member.Member;
import hello.login.domain.member.MemberRepository;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.CookieValue;
import org.springframework.web.bind.annotation.GetMapping;
@Slf4j
@Controller
@RequiredArgsConstructor
public class HomeController {
private final MemberRepository memberRepository;
// @GetMapping("/")
public String home() {
return "home";
}
@GetMapping("/")
public String homeLogin(@CookieValue(name = "memberId", required = false) Long memberId, Model model) {
log.info("memberId={}", memberId);
if (memberId == null) {
return "home";
}
//로그인
Member loginMember = memberRepository.findById(memberId);
if (loginMember == null) {
return "home";
}
model.addAttribute("member", loginMember);
return "loginHome";
}
}- 기존
home()에 있는@GetMapping("/")은 주석 처리하자. @CookieValue를 사용하면 편리하게 쿠키를 조회할 수 있다.- 로그인 하지 않은 사용자도 홈에 접근할 수 있기 때문에
required = false를 사용한다.
로직 분석
- 로그인 쿠키(
memberId)가 없는 사용자는 기존home으로 보낸다. - 추가로 로그인 쿠키가 있어도 회원이 없으면
home으로 보낸다. - 로그인 쿠키(
memberId)가 있는 사용자는 로그인 사용자 전용 홈 화면인loginHome으로 보낸다. - 추가로 홈 화면에 화원 관련 정보도 출력해야 해서
member데이터도 모델에 담아서 전달한다.
홈 - 로그인 사용자 전용
templates/loginHome.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link th:href="@{/css/bootstrap.min.css}"
href="../css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" style="max-width: 600px">
<div class="py-5 text-center">
<h2>홈 화면</h2>
</div>
<h4 class="mb-3" th:text="|로그인: ${member.name}|">로그인 사용자 이름</h4>
<hr class="my-4">
<div class="row">
<div class="col">
<button class="w-100 btn btn-secondary btn-lg" type="button"
th:onclick="|location.href='@{/items}'|">
상품 관리
</button>
</div>
<div class="col">
<form th:action="@{/logout}" method="post">
<button class="w-100 btn btn-dark btn-lg" onclick="location.href='items.html'" type="submit">
로그아웃
</button>
</form>
</div>
</div>
<hr class="my-4">
</div> <!-- /container -->
</body>
</html>th:text="|로그인: ${member.name}|": 로그인에 성공한 사용자 이름을 출력한다.- 상품 관리, 로그아웃 버튼을 노출한다.
실행
로그인한 후, 화면
- 로그인 후, 웹 브라우저를 완전히 종료해야 다시 로그인 하기 전 첫 화면으로 돌아온다.
- 로그인 한 후, 웹 브라우저를 전체 종료하지 않을 시 세션 쿠기가 남아있어 계속 로그인이 된 상태로 남아있다.
웹 브라우저를 모두 종료 후(cmd + q)
- 현재 남아있는 쿠키가 없다.
- 로그인을 하면 쿠키가 생성된다.
📖 C. 로그아웃
로그아웃 2가지 방법
- 세션 쿠키이므로 웹 브라우저 종료시
- 서버에서 해당 쿠키의 종료 날짜를 0으로 지정
LoginController - logout 기능 추가
@PostMapping("/logout")
public String logout(HttpServletResponse response) {
expireCookie(response, "memberId");
return "redirect:/";
}
private void expireCookie(HttpServletResponse response, String cookieName) {
Cookie cookie = new Cookie(cookieName, null);
cookie.setMaxAge(0);
response.addCookie(cookie);
}
실행
- 로그아웃도 응답 쿠키를 생성하는데
Max-Age=0를 확인할 수 있다.- 해당 쿠키는 즉시 종료된다.
현재 로그인된 상태
로그아웃을 한 상태
- Max-Age=0
📚 7. 쿠키와 보안 문제
- 쿠키를 사용해서 로그인id를 전달해서 로그인을 유지할 수 있었다. 그런데 여기에는 심각한 보안 문제가 있다.
🔔 보안 문제
- 쿠키 값은 임의로 변경할 수 있다.
- 클라이언트가 쿠키를 강제로 변경하면 다른 사용자가 된다.
- 실제
웹브라우저 개발자모드→Application→Cookie변경으로 확인Cookie: memberId=1→Cookie: memberId=2(다른 사용자의 이름이 보임)- 쿠키에 보관된 정보는 훔쳐갈 수 있다.
- 만약 쿠키에 개인정보나, 신용카드 정보가 있다면?
- 이 정보가 웹 브라우저에도 보관되고, 네트워크 요청마다 계속 클라이언트에서 서버로 전달된다.
- 쿠키의 정보가 나의 로컬 PC가 털릴 수도 있고, 네트워크 전송 구간에서 털릴 수도 있다.
- 해커가 쿠키를 한번 훔쳐가면 평생 사용할 수 있다.
- 해커가 쿠키를 훔쳐가서 그 쿠키로 악의적인 요청을 계속 시도할 수 있다.
간단한 예시
현재
member=Member(id=2, loginId=ggg, name=123, password=123)member=Member(id=3, loginId=ggg2, name=g123, password=123)
가 존재
이때
g123으로 로그인한 상태에서, 쿠키 value=2(id)를 변경해주면
123으로 로그인되버린다.
🔔 대안
- 쿠키에 중요한 값을 노출하지 않고, 사용자 별로 예측 불가능한 임의의 토큰(랜덤 값)을 노출하고, 서버에서 토큰과 사용자 id를 매핑해서 인식한다. 그리고 서버에서 토큰을 관리한다.
- 토큰은 해커가 임의의 값을 넣어도 찾을 수 없도록 예상 불가능 해야 한다.
- 해커가 토큰을 털어가도 시간이 지나면 사용할 수 없도록 서버에서 해당 토큰의 만료시간을 짧게(예: 30분) 유지한다. 또는 해킹이 의심되는 경우 서버에서 해당 토큰을 강제로 제거하면 된다.
"야, (오류 만났어?) 너두 (해결) 할 수 있어"