Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

개발자되기 프로젝트

[로그인] 로그인 처리 - 쿠키 본문

인프런/[인프런] 스프링 MVC 2

[로그인] 로그인 처리 - 쿠키

Seung__ 2021. 9. 26. 00:17
 

Header - 쿠키

Set - Cookie: 서버에서 클라이언트로 쿠키 전달(응답) Cookie: 클라이언트가 서버에서 받은 쿠키를 저장하고, HTTP 요청시 서버로 전달. 0. Stateless, Connectionless HTTP의 특징은 Stateless, Connectionless..

bsh-developer.tistory.com

 

 

1. 쿠키

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

  • 쿠키 사용(client 쿠키 전달1)

  • 쿠키 사용(client 쿠키 전달2)

  • 영속 쿠키, 세션 쿠키
    • 영속 쿠키: 만료 날짜를 입력하면 해당 날짜까지 유지
    • 세션 쿠키: 만료 날짜를 생략하면 브라우저 종료시 까지만 유지->브라우저 종료 시 로그아웃 기대.

 

 

 

2. 쿠키 생성 로직.

  • 로그인에 성공하면 Cookie를 생성하고 memberId를 Cookie에 담는다.
  • Header에 담기 위해 HttpServletResponse 객체에 쿠키를 담아줘야 한다.
  • 쿠키가 생성되었기 때문에, 브라우져는 종료 전까지 회원 id를 쿠키에 담아서 매번 보냄.
    @PostMapping("/login")
    public String login(@Validated @ModelAttribute("loginForm") 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", "id 또는 pw가 맞지 않습니다.");
            return "login/loginForm";
        }

        //로그인 성공 처리
        
        //세션 쿠키
        Cookie idCookie = new Cookie("memberId", String.valueOf(loginMember.getId()));
        response.addCookie(idCookie);

        return "redirect:/";
    }
  •  참고
    • HttpServlerRequest, HttpServletResponse는 Http 요청/응답 Message 사용을 편리하게 해줌.
    • parsing, 메시지 생성 등등

 

 

 

3. 실행

  • 로그인 정보를 입력하고 로그인 시도를 해보자!
  • Response Headers를 보면 Set-Cookie 항목이 있다.

  • 이후 홈화면에 다시 접속해보면. Request Headers에서 Cookie를 확인할 수 있다.

 

 

 

 

4. HomeController

  • localhost:8080 접속 시 기존 home view 를 보내줬던  코드를 변경.
  • 로그인 안한 상태로 접속한 경우
  • 접속했는데, 쿠키로 id가 넘어온 경우
    • 넘어온 id가 repository에 없는 경우 -> home으로 
    • 넘어온 id가 repository에 있는 경우 -> login 성공 용 home으로 
    @GetMapping("/")
    public String homeLogin(@CookieValue(name = "memberId", required = false) Long memberId, Model model){

        //홈 화면 처음 접속 - 미 로그인 상태
        if (memberId == null){
            return "home";
        }

        // 쿠키로 id가 넘어왔는데, repository에 없는 경우
        Member loginMember = memberRepository.findById(memberId);
        if(loginMember == null){
            return "home";
        }

        // 쿠키로 id가 넘어왔는데, repository에 존재.
        model.addAttribute("member", loginMember);
        return "loginHome";

    }

 

 

 

 

5. loginHome.html

  • 로그인한 user의 이름을 보여줌.
 <h4 class="mb-3" th:text="|로그인: ${member.name}|">로그인 사용자 이름</h4>
<!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>

 

 

 

6. 실행

  • 로그인 후 user이름을 띄워준다.
  • cookie에서도 memberId확인이 가능.

 

 

 

 

7. 로그아웃 기능

  • 로그아웃 시도시 cookie날려버리면 됨.
  • 새로운 cookie를 만들고 MaxAge를 0으로 설정.
    @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);
    }
  • 로그아웃 클릭 시 -> /logout 으로 이동함 -> logout 메서드 실행.
 <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>
  • 로그아웃 클릭하니 cookie가 없어지고 홈화면으로 이동.

  • Response Headers를 보면 Max-Age가 0으로 설정됨.

 

 

8. GitHub : 210925 login & cookie

 

GitHub - bsh6463/login

Contribute to bsh6463/login development by creating an account on GitHub.

github.com

 

'인프런 > [인프런] 스프링 MVC 2' 카테고리의 다른 글

[로그인] 로그인 처리 - 세션 동작 방식  (0) 2021.09.26
[로그인] 쿠키와 보안 문제  (0) 2021.09.26
[로그인] 로그인 기능.  (0) 2021.09.25
[로그인] 회원가입  (0) 2021.09.25
[로그인] 프로젝트 생성, home 화면  (0) 2021.09.25
'인프런/[인프런] 스프링 MVC 2' Related Articles more
Comments