스프링

[스프링 MVC 2편] 로그인 처리1 - 쿠키, 세션

코딍코딍 2022. 7. 9. 16:29

로그인 요구사항

홈 화면 - 로그인 전

  • 회원 가입 로그인

홈 화면 - 로그인 후

  • 본인 이름(누구님 환영합니다.)
  • 상품 관리
  • 로그 아웃

보안 요구사항

  • 로그인 사용자만 상품에 접근하고, 관리할 수 있음
  • 로그인 하지 않은 사용자가 상품 관리에 접근하면 로그인 화면으로 이동

회원 가입, 상품 관리

 

 

프로젝트 생성

프로젝트 설정 순서

  1. login-start의 폴더 이름을 login로 변경하자.
  2. 프로젝트 임포트 File Open 해당 프로젝트의 build.gradle을 선택하자. 그다음에 선택창이 뜨는데, Open as Project를 선택하자.
  3. ItemServiceApplication.main()을 실행해서 프로젝트가 정상 수행되는지 확인하자.
  4. 색상 추가
  5. Annoation Process 추가

 

package 구조

  • hello.login
    • domain
      • item
      • member
      • login
    • web
      • item
      • member
      • login

도메인이 가장 중요하다.

도메인이란 화면, UI, 기술 인프라 등등의 영역은 제외한 시스템이 구현해야 하는 핵심 비즈니스 업무 영역을 말한다.

 

향후 web을 다른 기술로 바꾸어도 도메인은 그대로 유지할 수 있어야 한다. 이렇게 하려면 web은 domain을 알고 있지만 domain은 web을 모르도록 설계해야 한다. 이것을 web은 domain을 의존하지만, domain은 web을 의존하지 않는다고 표현한다. 예를 들어 web 패키지를 모두 삭제해도 domain에는 전혀 영향이 없도록 의존관계를 설계하는 것이 중요하다. 반대로 이야기하면 domain은 web을 참조하면 안 된다.

 

홈 화면

HomeController - home() 수정

@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>

 

회원 가입

Member 생성

@Data
public class Member {
     private Long id;
     @NotEmpty
     private String loginId; //로그인 ID
     @NotEmpty
     private String name; //사용자 이름
     @NotEmpty
     private String password;
}

MemberRepository 생성

@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 생성

@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 result) {
         if (result.hasErrors()) {
         	return "members/addMemberForm";
         }
         memberRepository.save(member);
         return "redirect:/";
     }
}

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="formcontrol"
                 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="formcontrol"
                 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>

 

TestDataInit - 회원용 테스트 데이터 추가

@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);
     }
}
  • 편의상 테스트용 회원 데이터를 추가했다.

 

로그인 기능

LoginService

@Service
@RequiredArgsConstructor
public class LoginService {
     private final MemberRepository memberRepository;
     /**
     * return null이면 로그인 실패
     */
     public Member login(String loginId, String password) {
         return memberRepository.findByLoginId(loginId)
         .filter(m -> m.getPassword().equals(password))
         .orElse(null);
     }
}
  • 로그인의 핵심 비즈니스 로직은 회원을 조회한 다음에 파라미터로 넘어온 password와 비교해서 같으면 회원을 반환하고, 만약 password가 다르면 null을 반환한다.

LoginForm

@Data
public class LoginForm {
     @NotEmpty
     private String loginId;
     @NotEmpty
     private String password;
}

LoginController

@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()를 사용해서 글로벌 오류(객체 오류)를 생성한다. 그리고 정보를 다시 입력하도록 로그인 폼을 뷰 템플릿으로 사용한다.

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="formcontrol"
 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 가 틀리면 글로벌 오류(객체 오류)가 나타난다.

실행해보면 로그인이 성공하면 홈으로 이동하고, 로그인에 실패하면 "아이디 또는 비밀번호가 맞지 않습니다."라는 경고와 함께 로그인 폼이 나타난다.

 

그런데 로그인이 되면 홈 화면에 고객 이름이 보여야 한다는 요구사항을 만족하지 못한다. 로그인의 상태를 유지하면서, 로그인에 성공한 사용자는 홈 화면에 접근 시 고객의 이름을 보여주려면 어떻게 해야 할까?

 

로그인 처리하기 - 쿠키 사용

쿠키

서버에서 로그인에 성공하면 HTTP 응답에 쿠키를 담아서 브라우저에 전달하자. 그러면 브라우저는 앞으로 해당 쿠키를 지속해서 보내준다.

쿠키 생성

클라이언트 쿠키 전달 1

클라이언트 쿠키 전달 2

 

쿠키에는 영속 쿠키와 세션 쿠키가 있다.

  • 영속 쿠키: 만료 날짜를 입력하면 해당 날짜까지 유지
  • 세션 쿠키: 만료 날짜를 생략하면 브라우저 종료 시까지만 유지

 

브라우저 종료 시 로그아웃이 되길 기대하므로, 우리에게 필요한 것은 세션 쿠키이다.

 

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());
     log.info("login? {}", loginMember);
     if (loginMember == null) {
         bindingResult.reject("loginFail", "아이디 또는 비밀번호가 맞지 않습니다.");
         return "login/loginForm";
     }
     
     //로그인 성공 처리
     //쿠키에 시간 정보를 주지 않으면 세션 쿠키(브라우저 종료시 모두 종료)
     Cookie idCookie = new Cookie("memberId", String.valueOf(loginMember.getId()));
     response.addCookie(idCookie);
     return "redirect:/";
}
  • 로그인에 성공하면 쿠키를 생성하고 HttpServletResponse에 담는다. 쿠키 이름은 memberId이고, 값은 회원의 id를 담아둔다. 웹 브라우저는 종료 전까지 회원의 id를 서버에 계속 보내줄 것이다.

HomeControiller - homeLogin() 생성

로그인 처리

@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) {
         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를 사용한다.
    • required=false : 쿠키가 필수는 아니다. => 없어도 된다.
  • 로그인 쿠키( memberId )가 없는 사용자는 기존 home으로 보낸다. 추가로 로그인 쿠키가 있어도 회원이 없으면 home으로 보낸다.
  • 로그인 쿠키( memberId )가 있는 사용자는 로그인 사용자 전용 홈 화면인 loginHome으로 보낸다. 추가로 홈 화면에 화원 관련 정보도 출력해야 해서 member 데이터도 모델에 담아서 전달한다.

 

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" type="submit">
                     	로그아웃
                     </button>
                 </form>
             </div>
         </div>
         <hr class="my-4">
    </div> <!-- /container -->
</body>
</html>
  • th:text="|로그인: ${member.name}|" : 로그인에 성공한 사용자 이름을 출력한다. 상품 관리, 로그아웃 버튼을 노출한다.

실행

로그인에 성공하면 사용자 이름이 출력되면서 상품 관리, 로그아웃 버튼을 확인할 수 있다. 로그인에 성공 시 세션 쿠키가 지속해서 유지되고, 웹 브라우저에서 서버에 요청 시 memberId 쿠키를 계속 보내준다.

 

로그아웃 기능

로그아웃 방법

세션 쿠키이므로 웹 브라우저 종료 시 서버에서 해당 쿠키의 종료 날짜를 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);
}

 

쿠키와 보안 문제

보안 문제

  • 쿠키 값은 임의로 변경할 수 있다.
    • 클라이언트가 쿠키를 강제로 변경하면 다른 사용자가 된다.
    • 실제 웹브라우저 개발자 모드 Application Cookie 변경으로 확인
    • Cookie: memberId=1 Cookie: memberId=2 (다른 사용자의 이름이 보임)
  • 쿠키에 보관된 정보는 훔쳐갈 수 있다.
    • 만약 쿠키에 개인정보나, 신용카드 정보가 있다면?
    • 이 정보가 웹 브라우저에도 보관되고, 네트워크 요청마다 계속 클라이언트에서 서버로 전달된다.
    • 쿠키의 정보가 나의 로컬 PC가 털릴 수도 있고, 네트워크 전송 구간에서 털릴 수도 있다.
  • 해커가 쿠키를 한번 훔쳐가면 평생 사용할 수 있다.
    • 해커가 쿠키를 훔쳐가서 그 쿠키로 악의적인 요청을 계속 시도할 수 있다.

대안

  • 쿠키에 중요한 값을 노출하지 않고, 사용자 별로 예측 불가능한 임의의 토큰(랜덤 값)을 노출하고, 서버에서 토큰과 사용자 id를 매핑해서 인식한다. 그리고 서버에서 토큰을 관리한다.
  • 토큰은 해커가 임의의 값을 넣어도 찾을 수 없도록 예상 불가능해야 한다.
  • 해커가 토큰을 털어가도 시간이 지나면 사용할 수 없도록 서버에서 해당 토큰의 만료시간을 짧게(예: 30분) 유지한다. 또는 해킹이 의심되는 경우 서버에서 해당 토큰을 강제로 제거하면 된다.

 

로그인 처리하기 - 세션 동작 방식

앞서 쿠키에 중요한 정보를 보관하는 방법은 여러 가지 보안 이슈가 있었다. 이 문제를 해결하려면 결국 중요한 정보를 모두 서버에 저장해야 한다. 그리고 클라이언트와 서버는 추정 불가능한 임의의 식별자 값으로 연결해야 한다.

이렇게 서버에 중요한 정보를 보관하고 연결을 유지하는 방법을 세션이라 한다.

 

세션 동작 방식

로그인

  • 사용자가 loginId , password 정보를 전달하면 서버에서 해당 사용자가 맞는지 확인한다.

 

세션 생성

  • 세션 ID를 생성하는데, 추정 불가능해야 한다.
  • UUID는 추정이 불가능하다.
    • Cookie: mySessionId=zz0101xx-bab9-4b92-9b32-dadb280f4b61
  • 생성된 세션 ID와 세션에 보관할 값( memberA )을 서버의 세션 저장소에 보관한다.

 

세션 id를 응답 쿠키로 전달

  • 클라이언트와 서버는 결국 쿠키로 연결이 되어야 한다.
  • 서버는 클라이언트에 mySessionId라는 이름으로 세션 ID 만 쿠키에 담아서 전달한다.
  • 클라이언트는 쿠키 저장소에 mySessionId 쿠키를 보관한다.

 

중요

  • 여기서 중요한 포인트는 회원과 관련된 정보는 전혀 클라이언트에 전달하지 않는다는 것이다.
  • 오직 추정 불가능한 세션 ID만 쿠키를 통해 클라이언트에 전달한다.

 

클라이언트의 세션 id 쿠키 전달

  • 클라이언트는 요청 시 항상 mySessionId 쿠키를 전달한다.
  • 서버에서는 클라이언트가 전달한 mySessionId 쿠키 정보로 세션 저장소를 조회해서 로그인 시 보관한 세션 정보를 사용한다.

 

정리

  • 쿠키 값을 변조 가능 => 예상 불가능한 복잡한 세션 ID를 사용한다.
    • 쿠키 값을 1에서 2로 변경하여 다른 사람의 정보를 볼 수 있었지만, 세션 ID는 예상 불가능하여서 유추할 수 없기에 변조할 수 없다.
  • 쿠키에 보관하는 정보는 클라이언트 해킹 시 털릴 가능성이 있다. => 세션 ID가 털려도 여기에는 중요한 정보가 없다.
    • 세션에 중요한 정보가 저장되므로 안전하다.
  • 쿠키 탈취 후 사용 => 해커가 토큰을 털어가도 시간이 지나면 사용할 수 없도록 서버에서 세션의 만료시간을 짧게(예: 30분) 유지한다. 또는 해킹이 의심되는 경우 서버에서 해당 세션을 강제로 제거하면 된다.