2023.08.11 스프링

2023. 8. 13. 19:20

스프링 인프런 김영한

로그인 처리 쿠키 세션

65. 로그인 요구사항

로그인 요구사항
홈 화면 - 로그인 전
회원 가입
로그인
홈 화면 - 로그인 후
본인 이름(누구님 환영합니다.)
상품 관리
로그 아웃
보안 요구사항
로그인 사용자만 상품에 접근하고, 관리할 수 있음
로그인 하지 않은 사용자가 상품 관리에 접근하면 로그인 화면으로 이동
회원 가입, 상품 관리
이런게 있어야한다.

66. 프로젝트 생성

패키지 구조 설계
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을 참조하면 안된다

구현을 api로 바꾸든 스프링이아닌 다른거로 바꾸든 문제가 발생하지 않게 해야한다.

67. 홈화면

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

68. 회원가입

회원가입을 해야 로그인을 할수있다.

68.1 Member

Mebmer DTO를 만들어주자

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

68.2 MemberRepository

저장은 id로 저장을 한다. id는 값을알아서 늘어나게
등등

@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) {
        return findAll().stream()
                .filter(m -> m.getLoginId().equals(loginId))
                .findFirst();
    }

    public List<Member> findAll() {
        return new ArrayList<>(store.values());
    }

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

stream을 안쓰면 이렇게 된다.

List<Member> all = findAll();
for (Member m : all) {
if (m.getLoginId().equals(loginId)) {
    return Optional.of(m);
}
return Optional.empty();

Optional이라는 것은 Member가 있을수도 없을수도 있다는 것이다.
Optional이라는 통이 있다고 생각하면된다.
null을 반환하는 경우는 Optional.empty()로 반환하면된다.

null처리를 하나하나 해줫어야하는데 이런게 해결되는 것이라고 이해하면 될 것 같다.

68.3 MemberController

타임리프에서 id를 인식못하는 경우가 있어서 mebmer라고 이름 작성해주었다.

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

68.4 View 멤버 가입폼

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

68.5 테스트용 아이디 추가

껏다킬때마다 추가해야하니 귀찮으니 청므부터 해주자.
@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);

    }
}

69. 로그인기능

핵심비즈니스 로직이 필요하다.

69.1 서비스

@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 을 반환한다.

풀어서쓰면다음과 같다.
Optional로 값을 받는데 Optional에서 값을 꺼내는 것은 get으로 꺼내서 사용하면된다.
Optional Stream은 꼭 공부하는게 좋다!!!!

Optional<Member> findMemberOptional = memberRepository.findByLoginId(loginId);
Member member = findMemberOptional.get();

if (member.getPassword().equals(password)){
    return member;
} else {
    return null;
}

69.2 LoginForm

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

69.3 LoginController

로그인 멤버가 null이라면 바인딩리절트에 reject를해준다. 필드에러도 아니기 때문임.

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

아직 요구사항 을 만족하고
로그인 : ~회원이 안나온다. 이걸 해결해줘야한다.

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

참고
여기서는 여러분이 쿠키의 기본 개념을 이해하고 있다고 가정한다. 쿠키에 대해서는 모든 개발자를 위한
HTTP 기본 지식 강의를 참고하자. 혹시 잘 생각이 안나면 쿠키 관련 내용을 꼭! 복습하고 돌아오자.
쿠키를 사용해서 로그인, 로그아웃 기능을 구현해보자.

로그인 상태 유지하기
로그인의 상태를 어떻게 유지할 수 있을까?

HTTP 강의에서 일부 설명했지만, 쿼리 파라미터를 계속 유지하면서 보내는 것은 매우 어렵고 번거로운 작업이다.
쿠키를 사용해보자.

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

옮겨다닐때마다 쿠키를 가지고 있으면 그 아이디를 가지고 보게 되니 로그인이 유지가 된다.

쿠키에는 영속 쿠키와 세션 쿠키가 있다.
영속 쿠키: 만료 날짜를 입력하면 해당 날짜까지 유지
세션 쿠키: 만료 날짜를 생략하면 브라우저 종료시 까지만 유지
브라우저 종료시 로그아웃이 되길 기대하므로, 우리에게 필요한 것은 세션 쿠키이다

로그인 성공시 세션 쿠키를 생성하자.

70.1 쿠키생성

쿠키는 new Cookie로 쿠키객체를 만들어서 응답 response에 넣어서 보내면된다.
쿠키에 시간 정보를 주지 않으면 세션 쿠키이다. 브라우저 종료시 쿠키가 없어진다.

로그인에 성공하면 쿠키를 생성하고 HttpServletResponse 에 담는다.
쿠키 이름은 memberId 이고, 값은 회원의 id 를 담아둔다.
웹 브라우저는 종료 전까지 회원의 id 를 서버에 계속 보내줄 것이다.

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

70.2 로그인처리

HomeController에서 처리해주면되는데
request에서 쿠키를 꺼낼수도 있지만 스프링의 @CookieValue를 사용하면
알아서 Requestparam처럼 변환도 알아서 해주고 값도 저장해준다.

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

로그인 쿠키( memberId )가 없는 사용자는 기존 home 으로 보낸다.
추가로 로그인 쿠키가 있어도 회원이 없으면 home 으로 보낸다.
로그인 쿠키( memberId )가 있는 사용자는 로그인 사용자 전용 홈 화면인 loginHome 으로 보낸다.
추가로 홈 화면에 화원 관련 정보도 출력해야 해서 member 데이터도 모델에 담아서 전달한다

70.3 로그인 홈

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

th:text="|로그인: ${member.name}|" : 로그인에 성공한 사용자 이름을 출력한다.
상품 관리, 로그아웃 버튼을 노출한다.

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

70.4 로그아웃 기능

이번에는 로그아웃 기능을 만들어보자. 로그아웃 방법은 다음과 같다.
세션 쿠키이므로 웹 브라우저 종료시 서버에서 해당 쿠키의 종료 날짜를 0으로 지정해주면된다.
setMaxAge로 쿠키 종료날짜를 처리한다.
쿠키이름으로 새 쿠키를 만들어주는 처리를 하는 것이다.

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

그런데!!! 이방식은 보안에서 심각한 문제가 있다.

71. 쿠키와 보안 문제

쿠키를 사용해서 로그인Id를 전달해서 로그인을 유지할 수 있었다.
그런데 여기에는 심각한 보안 문제가 있다.

71.1 보안 문제

쿠키 값은 임의로 변경할 수 있다.
클라이언트가 쿠키를 강제로 변경하면 다른 사용자가 된다.
실제 웹브라우저 개발자모드 Application Cookie 변경으로 확인
Cookie: memberId=1 Cookie: memberId=2 (다른 사용자의 이름이 보임)

쿠키에 보관된 정보는 훔쳐갈 수 있다.
만약 쿠키에 개인정보나, 신용카드 정보가 있다면?
이 정보가 웹 브라우저에도 보관되고, 네트워크 요청마다 계속 클라이언트에서 서버로 전달된다.
쿠키의 정보가 나의 로컬 PC에서 털릴 수도 있고, 네트워크 전송 구간에서 털릴 수도 있다.

해커가 쿠키를 한번 훔쳐가면 평생 사용할 수 있다.
해커가 쿠키를 훔쳐가서 그 쿠키로 악의적인 요청을 계속 시도할 수 있다.

대안
쿠키에 중요한 값을 노출하지 않고, 사용자 별로 예측 불가능한 임의의 토큰(랜덤 값)을 노출하고,
서버에서 토큰과 사용자 id를 매핑해서 인식한다. 그리고 서버에서 토큰을 관리한다.

토큰은 해커가 임의의 값을 넣어도 찾을 수 없도록 예상 불가능 해야 한다.

해커가 토큰을 털어가도 시간이 지나면 사용할 수 없도록 서버에서 해당 토큰의 만료시간을 짧게(예: 30분) 유지한다.
또는 해킹이 의심되는 경우 서버에서 해당 토큰을 강제로 제거하면 된다.

이 대안책들을 사용하는것이 서버 세션이다.

2023 08 11

도메인을 그저 DTO을 모아놓는 것으로 만들었다.
form들이 web에 잇는데 item을 참조하거나 그러면안된다.

ItemRepository가 itemsaveform을 받으면 안되고 생성자로 값을 넣어서 줬던 이유가 여기에 있다.

이런 설계방식을 공부하는것이 중요하다.

옵셔널이란? null일수도 있는 것을 처리하는 것이다.
https://mangkyu.tistory.com/70

쿠키를 활용해보았다
쿠키는 정의는 알지만 직접 사용해본적이 없어서 익숙하지 않은 것 같다.
실제 개발시엔 많이 사용할 것이다.

'기초단계 > SPRING' 카테고리의 다른 글

2023.08.18 스프링 (0)	2023.08.18
2023.08.13 스프링 (0)	2023.08.13
2023.06.29 Spring (0)	2023.07.15
2023.06.28 Spring (0)	2023.07.15
2023.06.27 Spring (0)	2023.07.15

발전하고 싶은 춘핑이