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

로그인 기능 구현은 일반적으로 세션을 이용한다고 합니다.

그럼에도 불구하고 쿠키를 사용하여 로그인 기능을 구현해 보는 이유는, 쿠키 동작 원리에 대해 자세히 알아보기 위함입니다.

 

만들어볼 내용은 간단합니다.

 

사용자가 홈 화면에 접근 하는 경우 (HomeController.java)

사용자 정보가 일치하는 쿠키를 가지고 있는 경우 -> 홈 화면으로 이동

사용자 정보와 일치하지 않는 쿠키를 가지고 있는 경우 -> 로그인 화면으로 이동

쿠키가 존재하지 않는 경우 -> 로그인 화면으로 이동

 

사용자가 로그인 화면에 접근 하는 경우 (LoginController.java)

사용자가 db에 존재하는 id와 패스워드를 입력하는 경우 -> 홈 화면으로 이동

사용자가 db에 존재하지 않는 id와 패스워드를 입력하는 경우 -> 에러 메세지를 로그인 화면에 출력

 

사용자가 회원가입 화면에 접근 하는 경우 (MemberController.java)

회원가입 진행

 

 

도메인 생성

---

Member.java

package hello.login.domain.member;

import javax.validation.constraints.NotEmpty;
import lombok.Data;

@Data
public class Member {

    private Long id;

    @NotEmpty
    private String loginId; // 로그인 ID
    @NotEmpty
    private String name; // 사용자 이름
    @NotEmpty
    private String password;
}

 

LoginForm.java

로그인을 할 때 사용하는 Member dto 클래스이다.

로그인을 할 때는 loginId와 password에 대한 필드만 있으면 되기 때문에 아래와 같은 dto를 이용하여 사용하도록 하자.

package hello.login.web.login;

import javax.validation.constraints.NotEmpty;
import lombok.Data;

@Data
public class LoginForm {

    @NotEmpty
    private String loginId;

    @NotEmpty
    private String password;
}

 

저장소 생성

---

 

MemberRepository

db에 저장하는 save 클래스와

db로 부터 데이터를 찾아오는 findById, findAll, findByLoginId 클래스가 존재한다.

package hello.login.domain.member;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Optional;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Repository;

@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 List<Member> findAll() {
        return new ArrayList<>(store.values());
    }

    // 값이 null을 직접 반환하는 대신 optional로 반환하는게 현재 스타일
    public Optional<Member> findByLoginId(String loginId) {
        return findAll().stream()
            .filter(member -> member.getLoginId().equals(loginId))
            .findFirst();
    }

    public void clearStor() {
        store.clear();
    }
}

서비스 생성

---

 

LoginService.java

로그인 서비스 클래스이다.

사용자가 id와 password를 이용했을 때, db에 일치하는 id와 password가 존재하면 Member 객체를 반환하고, 존재하지 않는다면 Null 값을 반환한다.

 

package hello.login.domain.login;

import hello.login.domain.member.Member;
import hello.login.domain.member.MemberRepository;
import java.util.Optional;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

@Service
@RequiredArgsConstructor
public class LoginService {

    private final MemberRepository memberRepository;

    /**
     * @return null 이면 로그인 실패
     */
    public Member login(String loginId, String password) {

        return memberRepository.findByLoginId(loginId)
            .filter(member -> member.getPassword().equals(password))
            .orElse(null);
    }
}

 

컨트롤러 생성

---

LoginController

로그인 화면에서의 동작이다.

package hello.login.web.login;

import hello.login.domain.login.LoginService;
import hello.login.domain.member.Member;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;
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;

@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, 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";
        }

        // 로그인 성공 처리 TODO

        // 쿠키 사용
        // 쿠키에 시간 정보를 주지 않으면 세션 쿠키가 만들어진다. (브라우저 종료시 사라지는 쿠키)
        // 쿠키이름은 memberId고 값은 회원의 id를 담는다.
        // 웹 브라우저는 종료전까지 회원의 id를 전달해준다.
        Cookie idCookie = new Cookie("memberId", String.valueOf(loginMember.getId()));
        // http response에 쿠키를 넘어서 전달해주자
        response.addCookie(idCookie);

        return "redirect:/";
    }
}

 

아래와 같이 진행이 되고 있는 것이다.

 

LoginController 진행

다시 살펴봅시다.

쿠키는 아래와 같이 발행할 수 있습니다.

쿠키에 들어가는 value type이 String 이기 때문에 형 변환해서 넣어줍니다.

Cookie idCookie = new Cookie("memberId", String.valueOf(loginMember.getId()));

 

만든 쿠키는 response에 담아서 client에 전달해줍니다.

response.addCookie(idCookie);

 

브라우저에서 쿠키가 들어간 것을 확인할 수 있습니다.

여기까지가 로그인을 했을 때 쿠키를 만들어 클라이언트에게 전달하기 까지의 과정입니다.

 

 

이제 홈 화면을 왔을 때 기능을 구현해야합니다.

홈 화면을 왔을 때 쿠키가 있으면 메인화면으로 이동하고

홈 화면을 왔을 때 쿠키가 없으면 로그인 화면으로 이동하는 것입니다.

@RequiredArgsConstructor
@Controller
public class HomeController {

    private final MemberRepository memberRepository;

    @GetMapping("/")
    public String homeLogin(@CookieValue(name = "memberId", required = false) Long memberId,
        Model model) {
        Member member = memberRepository.findById(memberId);
        if (member == null) {
            return "home";
        }
        return "loginHome";
    }
}

 

CookiValue 라는 annotation으로 클라이언트에게 memberId가 key로 있는 쿠키를 들고 올 수 있습니다.

하지만 모두 사용자가 memberI를 쿠키로 들고 있지는 않기 때문에 required = false로 설정하여 쿠키가 필수가 아님을 알려줍니다.

@CookieValue(name = "memberId", required = false) Long memberId

 

logout을 구현해보자

---

 

HomeController.java

package hello.login.web;

import hello.login.domain.member.Member;
import hello.login.domain.member.MemberRepository;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;
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;
import org.springframework.web.bind.annotation.PostMapping;

@Slf4j
@Controller
@RequiredArgsConstructor
public class HomeController {

    private final MemberRepository memberRepository;

    //    @GetMapping("/")
    public String home() {
        return "home";
    }

    @GetMapping("/")
    public String loginHome(@CookieValue(value = "memberId", required = false) Long memberId,
        Model model) {
        // 로그인 쿠키가 없으면 홈으로 보내고
        // 쿠키가 있으면 db에서 찾고
        // db에 존재하지 않으면 홈으로 보내고
        // db에 존재하면 로그인한 화면으로 보낸다.
        if (memberId == null) {
            return "home";
        }

        Member loginMember = memberRepository.findById(memberId);
        if (loginMember == null) {
            return "home";
        }

        model.addAttribute("member", loginMember);
        return "loginHome";
    }

    @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);
    }
}

@CookieValue annotation을 이용하여 클라이언트로 부터 cookie 값을 받아야한다.

이때 cookie가 없는 사용자도 있을 수 있기 때문에 required=false로 지정하여 모든 사람이 접근 가능하도록 설정을 해 놓는다.

 

쿠키가 없으면 로그인 화면으로 이동

쿠키가 있으면 쿠키를 db 정보와 매칭 시켜 본 후 일치한다면 홈 화면으로 이동하게 만들어 놓았다.

 

 

MemberController.java

회원 가입을 진행하는 부분이다.

package hello.login.web.member;

import hello.login.domain.member.Member;
import hello.login.domain.member.MemberRepository;
import javax.validation.Valid;
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;

@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")
    private String save(@Valid @ModelAttribute Member member, BindingResult bindingResult) {
        if (bindingResult.hasErrors()) {
            return "members/addMemberForm";
        }

        memberRepository.save(member);
        return "redirect:/";
    }
}

 

 

쿠키의 라이프 사이클을 정리해보자.

 

쿠키 생성 (서버 -> 클라이언트)

---

서버에서 쿠키를 생성할 때 member id를 저장해주었다.

쿠키의 value type은 String 이라는 점을 알아두자.

서버에서 만든 쿠키는 response에 태워서 클라이언트로 전송해주었다.

Cookie idCookie = new Cookie("memberId", String.valueOf(loginMember.getId()));
// http response에 쿠키를 넘어서 전달해주자
response.addCookie(idCookie);

 

클라이언트로 부터 쿠키를 받을 때  (클라이언트 -> 서버)

---

@CookieValue라는 annotation을 이용하여 받을 수 있었다.

Cookie에 값을 넣을 때는 String type이었지만 아래와 같이 annotation을 사용할 때는 자동 형 변환이 가능하다.

@CookieValue(value = "memberId", required = false) Long memberId

 

쿠키 삭제 (서버 -> 쿠키 , 로그아웃)

---

쿠키 삭제하는 방법은 age를 0으로 변경 후 쿠키를 다시 response에 담아서 보내면 된다.

cookie.setMaxAge(0);
response.addCookie(cookie);