스프링으로 쇼핑몰을 만들어보자10 - 로그인 기능 구현

2023년 01월 05일

스프링쇼핑몰

기능구현

회원가입(주소API연동, 이메일 인증, ajax를 사용하여 아이디 중복검사)
관리자 페이지(인터셉터 적용, 상품관리, 회원관리)
업로드(이미지 등록, 수정, 삭제)
검색
페이징
구매(장바구니, 포인트사용)
댓글(등록,수정,삭제)
중간에 막혔거나 에러 해결 못하겠으면 yoonbitnara@gmail.com 으로 문의

순서

로그인 페이지 아이디,비번 전송
로그인 처리 메서드 작성

로그인 기능 구현의 전체적인 방향

아이디, 비번 입력 후 서버제출
DB 요청하여 아이디 비번 일치 여부 확인
일치 시 메인 페이지 이동
불일치 시 로그인 페이지 이동

로그인 페이지 아이디,비번 전송

이전에 구현한 회원가입과 같다. 아이디, 비밀번호 항목란에 데이터를 입력하고 로그인 버튼을 누르면 데이터가 서버에 전송됨과 함께 로그인 기능을 수행하는 메서드를 요청하도록 작성한다.

form태그 추가 & input 태그 name 속성 추가

클래스 속성명이 wrap인 div 태그 바로 다음 줄에 <form> 태그를 작성한다. form 태그의 id 속성명은 login_form이고 method 속성명은 post이다.

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="/resources/css/member/login.css">
</head>
<body>

<div class="wrapper">
	
	<div class="wrap">
		<form id="login_form" method="post"><!-- form 추가 -->
			<div class="logo_wrap">
				<span>Book Mall</span>
			</div>
			<div class="login_wrap"> 
				<div class="id_wrap">
					<div class="id_input_box">
						<input class="id_input">
					</div>
				</div>
			<div class="pw_wrap">
				<div class="pw_input_box">
					<input class="pw_iput">
				</div>
			</div>
			<div class="login_button_wrap">
				<input type="button" class="login_button" value="로그인">
			</div>			
		  	</div>
		</form><!-- form 추가 -->
		
	</div>

</div>

</body>
</html>

아이디와 비밀번호를 입력해야 할 input태그에 name 속성명을 각각 memberId, memberPw를 입력한다. 로그인 페이지에서 요청할 로그인 메서드에 데이터를 전달하기 위해 파라미터로 MemberVO 클래스를 이용할 것이다. 따라서 MemberVO에서 정의한 변수명과 반드시 속성명 name이 반드시 동일해야 한다.

    // 변경 전
    <input class="id_input">
    <input class="pw_iput">
 
    // 변경 후
    <input class="id_input" name="memberId">
    <input class="pw_iput" name="memberPw">

로그인 버튼 작동 메서드 추가

-jquery를 사용할 것이기 때문에 먼저 jquery url 코드를 login.jsp의 head에 추가한다.

 
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

body 태그 제일 아래쪽에 script 태그를 추가해준 뒤 아래의 코드와 같이 로그인 버튼 클릭 메서드를 작성한다. 정상적으로 메서드가 작동하지는지 확인하기 위해 alert() 코드를 작성했다.

 
<script>
 
    /* 로그인 버튼 클릭 메서드 */
    $(".login_button").click(function(){
        
        alert("로그인 버튼 작동");
        
    });
 
</script>

TEST

작성 후 버튼이 작동하는지 테스트를 한다. 정상적으로 작동한다면 alert() 코드는 지우거나 주석처리한다.

로그인 버튼 클릭 메서드 내부에 로그인 메서드를 서버에 요청하는 코드를 추가해준다. 정상적으로 서버에 데이터가 넘어가고 메서드가 요청되었는지 확인하는 테스트는 MemberController에 로그인 메서드를 작성한 후 테스트를 진행 할 예정이다.

    /* 로그인 버튼 클릭 메서드 */
    $(".login_button").click(function(){
        
        //alert("로그인 버튼 작동");
        $("#login_form").attr("action", "/member/login");
        $("login_form").submit();
        
    });

로그인 처리 메서드 작성(MemberController.java)

MemberController.java에 로그인 기능을 수행하는 메서드를 작성한다. 파라미터로는 MemberVO, ‘HttpServletRequest’, ‘RedirectAttributes’를 사용한다.
MemberVO는 데이터를 전달받기 위해, HttpServletRequest는 로그인 성공 시 session에 회원정보를 저장하기 위해, ‘RedirectAttributes’는 로그인 실패 시 리다이렉트 된 로그인 페이지에 실패를 의미하는 데이터를 전송하기 위해 사용한다.

페이지에서 로그인 메서드 요청 시 해당 메서드에 정상적으로 진입하는지 확인하기 위해 System.out 구문을 넣었다.

	/* 로그인 */
	@RequestMapping(value = "login", method = RequestMethod.POST)
	public String loginPOST(HttpServletRequest request, MemberVO member, RedirectAttributes rttr) throws Exception {
		
		System.out.println("login 메서드 진입");
		System.out.println("전달된 데이터 : " + member);
		
		return null;
	}

변수 선언 및 초기화

두가지의 변수를 선언 및 초기화를 진행할 것이다. 먼저 session을 사용하기 위해 session변수를 선언하고 request.getSession()으로 초기화 한다.
session을 사용하기 위한 전형적인 방법이기 때문에 왜 이렇게 사용하는지 어떻게 사용하는지를 자세히 알고 싶으면 session 사용법등의 키워드로 검색해보면 금방 나온다.

HttpSession session = request.getSession();

	/* 로그인 */
	@RequestMapping(value = "login", method = RequestMethod.POST)
	public String loginPOST(HttpServletRequest request, MemberVO member, RedirectAttributes rttr) throws Exception {
		
		//System.out.println("login 메서드 진입");
		//System.out.println("전달된 데이터 : " + member);
		
		HttpSession session = request.getSession();
		
		
		return null;
	}

두번째로 MemberVO 타입의 변수 lvo를 선언하고 이전 포스팅에서 만든 MemberService.java의 memberLogin메서드로 초기화 한다.
인자는 서버로부터 전달받은 member 변수를 사용한다.
memberLogin 메서드를 요청하게 되면 MemberMapper.java를 거쳐서 로그인 쿼리가 실행이 되게 되고 그 결과 값이 담긴 MemberVO 객체를 반환받아서 변수 lvo에 저장되게 된다.

MemberVO lvo = memberService.memberLogin(member);

if문 작성

lvo 값은 아이디, 비밀번호가 존재할 경후 memberId, memberName, adminCk, money, point데이터가 담긴 MemberVO객체가 저장되게 된다. 아이디, 비밀번호가 존재하지 않을 경우 lvo 값은 null이 저장된다. 따라서 이러한 상황을 이용해서 if문을 통해 lvo값이 null일 경후 로그인 실패이기 때문에 로그인 페이지로 리다이렉트 되도록 null이 아닌경우 로그인 성공이기 때문에 메인페이지로 리다이렉트 되도록 return 값을 설정해준다.
return 문으로 가기 전 실패일 경우 RedirectAttributes에 실패를 의미하는 데이터를, 성공일 경우 session에 변수 lvo에 담긴 데이터를 저장하는 코드를 추가해준다. 해당 데이터들은 페이지에 전달되어 각 상황에 맞게 활용될 것이다.
RedirectAttributes에 담길 데이터는 자신이 임의로 아무 데이터나 작성해도 된다. 나는 0은 거짓 1은 참이라고 생각해서 0을 저장했다.

	/* 로그인 */
	@RequestMapping(value = "login", method = RequestMethod.POST)
	public String loginPOST(HttpServletRequest request, MemberVO member, RedirectAttributes rttr) throws Exception {
		
		//System.out.println("login 메서드 진입");
		//System.out.println("전달된 데이터 : " + member);
		
		HttpSession session = request.getSession();
		MemberVO lvo = memberService.memberLogin(member);
		
		if (lvo == null) { // 아이디, 비밀번호가 일치하지 않는 경우
			int result = 0;
			rttr.addFlashAttribute("result", result);
			return "redirect:/member/login";
		}
		
		session.setAttribute("member", lvo); // 아이디, 비밀번호가 일치할 경우 (로그인 성공)
		
		return "redirect:/main";
	}

TEST

올바른 아이디, 비밀번호 입력한 경우

올바르지 않은 아이디, 비밀번호 입력 한 경우