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
관리 메뉴

나구리의 개발공부기록

로그인 처리1 - 쿠키/세션, 로그인 요구사항, 프로젝트 생성, 홈 화면, 회원 가입, 로그인 기능, 로그인 처리하기(쿠키), 쿠키와 보안문제 본문

인프런 - 스프링 완전정복 코스 로드맵/스프링 MVC 2편 - 백엔드 웹 개발 핵심 기술

로그인 처리1 - 쿠키/세션, 로그인 요구사항, 프로젝트 생성, 홈 화면, 회원 가입, 로그인 기능, 로그인 처리하기(쿠키), 쿠키와 보안문제

소소한나구리 2024. 9. 5. 14:56

  출처 : 인프런 - 스프링 MVC 2편 - 백엔드 웹 개발 핵심 기술 (유료) / 김영한님  
  유료 강의이므로 정리에 초점을 두고 코드는 일부만 인용  

https://inf.run/GMo43

1.  로그인 요구사항/프로젝트 생성 / 홈 화면

1) 로그인 요구사항

(1) 홈 화면 - 로그인 전

  • 회원가입
  • 로그인

(2) 홈 화면 - 로그인 후

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

(3) 보안 요구사항

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

(4) 회원 가입, 상품 관리

2) 프로젝트 생성

  • 제공된 소스코드의 login-start의 폴더를 login으로 변경하여 사용
  • 여태까지는 java 버전이 11로 프로젝트가 생성되어있어 그냥 11로 했으나 이번에는 17로 변경해서 진행함
  • gradle 자바 버전, intelliJ 세팅 - Java compile 버전, file - Project Structure 버전 모두 변경
  • gradle에서 스트링 부트 버전 3.3.3으로 변경
  • dependency - management 버전 1.1.0 으로 변경
  • 기존 작성된 임포트 문들 전부 다시 설정: javax -> jakarta
  • gradle-wrapper.properties에서 gradle 버전 8.11.1로 변경

(1) 패키지 구조

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

(2) 도메인이 가장 중요함

  • 도메인과 Web을 분리
  • 도메인 : 화면, UI, 기술 인프라 등등의 영역은 제외한 시스템이 구현해야 하는 핵심 비즈니스 업무 영역을 말함
  • 향후 web을 다른 기술로 바꾸어도 도메인은 그대로 유지할 수 있어야 함.
  • 이렇게 하려면 web은 domain을 알고 있지만 domain은 web을 모르도록 설계 해야함(web은 domain을 의존, domain은 web을 의존하지 않는다고 표현)
  • web패키지를 모두 삭제해도 domain에는 전혀 영향이 없도로 의존관계를 설계하는것이 중요함
  • 반대로 이야기하면 domain은 web을 참조(호출)하면 안됨

3) 홈 화면 개발

(1) HomeController 수정

  • redirect:/items를 home으로 수정
@Controller
public class HomeController {

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

 

(2) home.html 추가

  • resources/templates에 작성
<!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">
                <buttion class="w-100 btn btn-secondary btn-lg" type="buttion"
                         th:onclick="|location.href='@{/members/add}'|">회원 가입</buttion>
            </div>
            <div class="col">
                <buttion class="w-100 btn btn-dark btn-lg" onclick="location.href='items.html'"
                         th:onclick="|location.href='@{/login}'|" type="buttion">로그인</buttion>
            </div>
        </div>
    </div>
    <hr class="my-4">

</body>
</html>

2.  회원 가입 기능 개발

1) 회원 가입 기능 개발

(1) Member - domain

package hello.login.domain.member;

@Data
public class Member {

    private Long id;

    @NotEmpty
    private String loginId; // 로그인 Id

    @NotEmpty
    private String name;    // 사용자 이름

    @NotEmpty
    private String password;
}

 

(2) MemberRepository

  • findByLoginId는 1번째 or 2번째 방법 모두 사용가능
  • 람다, 스트림을 활용하면 짧게 쓸 수 있으며 요즘 실무는 스트림, 람다는 기본으로 쓸줄 알아야함
package hello.login.domain.member;

/**
 * 동시성 문제가 고려되어 있지 않음
 * 실무에서는 ConcurrentHashMap, AtomicLong 사용을 고려
 */
@Slf4j
@Repository
public class MemberRepository {

    // static 사용
    private static Map<Long, Member> store = new HashMap<>();
    private static long sequence = 0L;

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

    // findByLoginId 1번째 방법
    // Optional -> null을 직접 반환하지 않도록 한번 감싼 클래스
    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();
    }

    // findByLoginId 2번째 방벙(람다, 스트림)
    // 리스트를 stream으로 변경하면 loop로 계속 돌게됨
    // filter로 조건에 만족하는 값을 findFirst로 가장 먼저 찾은 값으로
    // 요즘엔 lambda, stream은 기본으로 사용할 줄 알아야함
    public Optional<Member> findByLoginId(String loginId) {
        return findAll().stream()
                .filter(m -> m.getLoginId().equals(loginId))
                .findFirst();
    }

    public List<Member> findAll() {
        return new ArrayList<>(store.values()); // Map의 values값만 리스트로 변환해서 반환
    }

    // 초기화
    public void clearStore() {
        store.clear();
    }

}

 

(3) MemberController

  • 이번엔 검증에 @Valid 사용
  • 검증 코드의 동작방식을 까먹었다면 Validation 파트 다시 공부
  • @MedelAttribute에 ("member")를 빼도 타입인 Member의 맨 앞을 소문자로 바꾼 member로 변환되어 맵핑 되지만 IDE에서 타임리프에 인식 문제가 있어일부로 작성함 (동작은 함)
  • 더보기
    IntelliJ IDEA 2024.2.1 (Ultimate Edition)
    Build #IU-242.21829.142, built on August 29, 2024 버전인데도 아직도 그럼.. 해결해주세요 JetBrains!
package hello.login.web.member;

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

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

}

(4) 회원가입 뷰 템플릿

  • ~/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>

  <div class="container">

    <div class="py-5 text-center">
      <h2>회원 가입</h2>
    </div>

    <h4 class="mb-5">회원 정보 입력</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:eorrorclass="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:onclic="|location.href='@{/}'|" type="buttion">취소</button>
        </div>
      </div>

    </form>

  </div>

</head>
<body>

</body>
</html>

 

(5) 테스트용 데이터 삽입

  • 기존에 테스트용 item 데이터를 삽입했던 ~/web/TestDataInit에 Member 테스트 데이터를 삽입
package hello.login;

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

    }

}

3. 로그인 기능 개발

1) 로그인 기능 개발

(1) LoginService

  • 로그인의 핵심 비즈니스 로직은 회원을 조회한 다음 파라미터로 넘어온 password와 비교해서 같으면 회원을 반환하고 다르면 null을 반환하도록 하는 것
package hello.login.domain.login;

import java.util.Optional;

@Service
@RequiredArgsConstructor
public class LoginService {

    private final MemberRepository memberRepository;

    /**
     * @return null 이면 로그인 실패(간단하게 하기 위함)
     */
    //  기본 login 메서드 구현
//    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;
//        }
//    }

    // 옵셔널, 스트림을 활용해서 꺼내는 방식
    public Member login(String loginId, String password) {
        return memberRepository.findByLoginId(loginId)
                .filter(m -> m.getPassword().equals(password))
                .orElse(null);
    }
}

 

(2) LoginForm - dto

  • 검증 적용
package hello.login.web.login;

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

@Data
public class LoginForm {

    @NotEmpty
    private String loginId;

    @NotEmpty
    private String password;

}

 

(3) LoginController

  • 로그인 서비스를 호출 -> 로그인 성공 하면 홈화면으로 이동
  • 패하면 bindingResult.reject()를 사용해서 글로벌 오류를 생성하고 정보를 다시 입력하도록 로그인 폼을 뷰 템플릿으로 사용
package hello.login.web.login;

@Slf4j
@Controller
@RequiredArgsConstructor
public class LoginController {

    private final LoginService loginService;

    @GetMapping("/login")
    public String loginForm(@ModelAttribute("loginForm") LoginForm loginForm) {
        return "login/loginForm";
    }

    @PostMapping("/login")
    public String login(@Valid @ModelAttribute("loginForm") LoginForm loginForm, BindingResult bindingResult) {
        if (bindingResult.hasErrors()) {
            return "login/loginForm";
        }

        Member loginMember = loginService.login(loginForm.getLoginId(), loginForm.getPassword());
        if (loginMember == null) {
            bindingResult.reject("loginFail", "아이디 또는 비밀번호가 맞지 않습니다");
            return "login/loginForm";
        }

        // 로그인 성공 처리 TODO

        return "redirect:/";
    }
}

 

(4) 로그인 뷰 템플릿

  • ~/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>


</body>
</html>

 

(5) 실행

  • 실행 후 로그인 성공하면 홈으로 이동하고, 실패하면 글로벌 오류가 나타나고 로그인 폼이 나타남
  • 하지만 아직 '본인 이름(OO님 환영합니다.)' 라는 문구가 보여야하는 요구사항을 만족하지 못함

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

1) 로그인 상태 유지하기

(1) 쿠키 사용

  • 쿠키의 기본 개념을 모른다면 HTTP 강의 내용을 복습하도록!
  • 로그인을 유지했다고 쿼리 파라미터를 계속 유지하면서 보내는 것은 어렵고 번거롭기 때문에  쿠키를 활용해서 로그인을 유지
  • 서버에서 로그인에 성공하면 HTTP 응답에 쿠키를 담아서 브라우저에 전송하면 브라우저는 해당 쿠키를 지속해서 보내줌
  • 영속 쿠키: 만료 날짜를 입력하면 해당 날짜까지 유지
  • 세션 쿠키: 만료 날짜를 생략하면 브라우저 종료시 까지만 유지 - 해당 쿠키를 사용

(2) LoginController - login()

  • 로그인 성공처리 부분에 로그인 성공시 쿠키를 생성하도록 작성
  • 쿠키 저장을 하기 위한 HttpServletResponse 추가
  • new Cookie를 생성해서 HttpServletResponse에 memberId값을 key로 회원의 id값(로그인 id가 아닌 Long 타입 id값)을  value로 저장
  • 실행 후 크롬 브라우저의 HTTP 응답 헤더를 보면 쿠키가 추가된 것을 확인할 수 있음
// ...

    @PostMapping("/login")
    public String login(@Valid @ModelAttribute("loginForm") LoginForm loginForm, BindingResult bindingResult,
                        HttpServletResponse httpServletResponse) {  // 쿠키 저장을 위한 HttpServletResponse 추가

        // ...

        // 로그인 성공 처리
        // 쿠키에 시간 정보를 주지 않으면 세션 쿠키(브라우저 종료시 모두 종료)
        Cookie idCookie = new Cookie("memberId", String.valueOf(loginMember.getId()));
        httpServletResponse.addCookie(idCookie);    // 쿠키 저장

        return "redirect:/";
    }
}

 

(3) HomeContoller - homeLogin()로 변경

  • 기존의 home으로만 이동하는 home()를 주석 처리하고 login정보를 표시해주는 homeLogin 메서드를 추가
  • @RequiredArgsConstructor 설정 및 MemberRepository를 연결
  • @CookieValue를 사용하면 편리하게 쿠키를 조회할 수 있음
  • required = false를 하면 로그인하지 않은 사용자도 홈에 접근할 수 있음
  • 로그인 쿠키(memberId)가 없거나 로그인 쿠키가 있어도 회원이 없으면 home으로 보냄
  • login이 성공하면 loginHome페이지로 아니면 home으로 이동하고 정보를 출력하기 위해 model에 데이터를 담아서 전달
package hello.login.web;

@Slf4j
@Controller
@RequiredArgsConstructor
public class HomeController {

    // final로 선언하지 않으면 Lombok이 생성자를 생성하지 않음.. 주의
    private final MemberRepository memberRepository;

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

    // 로그인 정보를 표시해주는 홈화면
    // 다양한 방법이 있지만 이번에는 @CookieValue를 사용
    // 쿠키값은 String이지만 스프링이 자동으로 타입 컨버팅을 해줌
    // required = false : 로그인을 안한 사용자도 들어올 수 있도록 설정
    @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) {  // db에 멤버가 없으면 home으로 이동
            return "home";
        }

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

}

 

(4) 홈 화면 - 로그인 사용자 전용

  • ~/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" type="submit">
                    로그아웃
                </button>
            </form>
        </div>

    </div>
    <hr class="my-4">
</div> <!-- /container -->
</body>
</html>

 

(5) 로그아웃 기능, LoginController - logout() 추가

  • 세션 쿠키이므로 웹 브라우저 종료시 로그아웃
  • 로그아웃 버튼을 눌렀을 때 해당 쿠키의 종료 날짜를 0으로 지정하여 쿠키를 종료
  • setMaxAge(0) : 쿠키를 즉시 종료시킴
// ...

    @PostMapping("/logout")
    public String logout(HttpServletResponse httpServletResponse) {
        expireCookie(httpServletResponse, "memberId");
        return "redirect:/";
    }

    // 쿠키를 날리는 메서드를 메서드 추출로 따로 뺐음
    private void expireCookie(HttpServletResponse httpServletResponse, String cookieName) {
        Cookie cookie = new Cookie(cookieName, null);
        cookie.setMaxAge(0);    // 쿠키의 시간을 날리고 다시 저장 -> 쿠키정보가 날라감
        httpServletResponse.addCookie(cookie);
    }
}

 

(6) 실행

  • 로그인에 성공하면 사용자 이름이 출력되고 상품관리, 로그아웃 버튼을 확인할 수 있음
  • 로그인 성공 시 세션 쿠키가 지속해서 유지되고 웹 브라우저에서 서버 요청시 memberId 쿠키를 계속 보냄
  • 브라우저를 완전종료 하거나 로그아웃 버튼을 누르면 쿠키가 즉시 종료됨
  • 그러나 이렇게 쿠키를 이용한 로그인 방식은 엄청 큰 보안 문제가 발생하므로 이렇게 개발하면 절대 안됨

5.쿠키와 보안 문제 

1) 보안문제

(1) 쿠키 값은 임의로 변경할 수 있음

  • 클라이언트가 쿠키를 강제로 변경하면 다른 사용자가 되어버림..
  • 현재는 쿠키의 값을 훤히 볼 수 있게 개발이 되어 웹브라우저 개발자모드 -> Application ->Cookie에서 쿠키의 값을 변경할 수 있음
  • Cookie의 memberId를 2, 3 등으로 변경하면 다른 사용자정보가 보여짐

(2) 쿠키에 보관된 정보는 훔쳐갈 수 있으며 한번 훔쳐가면 평생 사용할 수 있음

  • 쿠키에 신용카드 정보같은 개인정보가 있다고 했을 때 해당 정보가 웹 브라우저에도 보관되고 네트워크 요청마다 계속 클라이언트에서 서버로 전달됨
  • 쿠키의 정보가 로컬 PC에서 탈취당할 수도 있고 HTTPS를 사용하지 않는 네트워크 전송 구간에서 털릴수도 있음
  • 만약 해커카 쿠키를 훔쳐간다면 해당 쿠키로 악의적인 요청을 계속 시도할 수 있음

(3) 대안

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

'인프런 - 스프링 완전정복 코스 로드맵 > 스프링 MVC 2편 - 백엔드 웹 개발 핵심 기술' 카테고리의 다른 글

로그인 처리2 - 필터/인터셉터, 서블릿 필터(소개/요청로그/인증체크), 스프링 인터셉터(소개/요청 로그/ 인증체크), ArgumentResolver 활용  (1) 2024.09.06
로그인 처리1 - 쿠키/세션, 세션 동작 방식, 세션 직접 만들기, 직접 만든 세션 적용, 서블릿 HTTP 세션, 세션 정보와 타임아웃 설정  (0) 2024.09.05
검증2 - Bean Validation, 소개/시작/프로젝트준비V3, 스프링 적용, 에러 코드, 오브젝트 오류, 수정에 적용, Bean Validation의 한계, groups, Form 전송 객체 분리(프로젝트준비V4/소개/개발), HTTP 메시지 컨버터  (9) 2024.09.04
검증1 - Validation, 오류 코드와 메시지 처리1 ~ 6, Validator 분리1 ~ 2  (1) 2024.09.04
검증1 - Validation, 검증 요구사항 및 프로젝트 설정 V1, 검증 직접 처리(소개 및 개발), 프로젝트 준비 V2, BindingResult1, BindingResult2, FieldError, ObjectError  (0) 2024.09.03
'인프런 - 스프링 완전정복 코스 로드맵/스프링 MVC 2편 - 백엔드 웹 개발 핵심 기술' Related Articles more