[Spring][쇼핑몰 프로젝트] 8. 로그인 기능 구현

목표

1. 쿼리문 작성 & MemberMapper.xml 작성

로그인에 사용할 쿼리문은 제출받은 로그인, 비밀번호 데이터와 비교하여 일치하는 데이터가 있을 시 해당 아이디의 정보를 반환하고, 없을 시 null을 반환하도록 할 것입니다.

먼저 테스트에 사용하기 위해서 회원가입된 아이디와 비밀번호를 확인해보겠습니다

SELECT * FROM BOOK_MEMBER;

위의 결과 테이블에서 아이디와 비밀번호를 선택하여 아래의 select 쿼리문을 작성하여 실행합니다. 찾고자 하는 열은 memberID, memberName, money, point입니다.

SELECT MEMBERID, MEMBERNAME, ADMINCK, MONEY, POINT FROM BOOK_MEMBER WHERE MEMBERID = 'test1' AND MEMBERPW = 'test1';

테스트를 한 쿼리문을 사용하여 MemberMapper.xml에 쿼리문을 작성합니다. 해당 쿼리 문의 아이디, 비밀번호 파라미터는 MemberVO 클래스의 memberId, memberPw 변수를 삽입합니다. 해당 쿼리문 요청하는 MemberMapper.java의 로그인 메서드가 아이디, 비밀번호를 담고 있는 MemberVO 객체를 파라미터로 사용하기 때문입니다.

  	<!-- 로그인 -->
  	<select id="memberLogin" resultType="com.test.model.MemberVO">
  		select memberId, memberName, adminck, money, point from book_member where memberId = #{memberId} and memberPw = #{memberPw}
	</select>

2. MemberMapper.java 인터페이스 작성

MemberVo를 파라미터로 하고 MemberVO로 반환받는 로그인 메서드를 추가합니다.

	/* 로그인 */
	public MemberVO memberLogin(MemberVO member);

3. mapper 로그인 메서드 테스트

Junit을 통해 쿼리를 요청하는 메서드가 정상적으로 동작하는지를 확인해보겠습니다. src/test/java 경로의 com.test.member 패키지에 작성해둔 MemberMapperTests.java를 활용하여 테스트를 진행하겠습니다.

기존에 회원가입 쿼리 mapper 메서드를 테스트하기 위해 사용했던 메서드는 주석 처리합니다. 아래의 코드를 통해 Junit테스트를 진행하여 로그인 쿼리 mapper 메서드가 정상적으로 진행되는지 확인합니다.

	@Test
	public void memberLogin() throws Exception {
		
		MemberVO member = new MemberVO(); 	// MemberVO 변수 선언 및 초기화
		
		/* 올바른 아이디 비번 입력 경우 */
		member.setMemberId("test1");
		member.setMemberPw("test1");
		
		/* 올바르지 않은 아이디 비번 입력 경우 */
		//member.setMemberId("test123");
		//member.setMemberPw("test123");
		
		membermapper.memberLogin(member);
		System.out.println("결과 값 : " + membermapper.memberLogin(member));
		
	}

- 올바른 아이디 비번 입력 경우

- 올바르지 않은 아이디 비번 입력 경우

4. MemberService.java 인터페이스, 클래스 작성

MemberService.java 인터페이스에 아래의 로그인 메서드를 추가합니다. (MemberVO를 파라미터, 반환 값으로 사용합니다.

	/* 로그인 */
	public MemberVO memberLogin(MemberVO member) throws Exception;

MemberServiceImpl.java 클래스에 아래의 메서드를 추가합니다.

	/* 로그인 */
	public MemberVO memberLogin(MemberVO member) throws Exception {
		
		
		return membermapper.memberLogin(member);
	}

5. 로그인 페이지(login.jsp) 아이디, 비밀번호 전송

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

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

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

<form id="login_form" method="post">

</form

아이디와 비밀번호를 입력해야 할 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">

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

jquery를 사용할 것이기 때문에 먼저 jquery url코드를 먼저 추가합니다.

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

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

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

		/* 로그인 메서드 서버 요청 */
		$("#login_form").attr("action", "/member/login");
		$("#login_form").submit();

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

1) 로그인 메서드 작성 & 서버 요청 테스트

MemberController.java 에 로그인 기능을 수행하는 메서드를 작성합니다. 파라미터로는 MemberVO, HttpServletRequest, RedirectAttributes를 사용합니다.

• MemberVo는 데이터를 전달받기 위해, HttpServletRequest는 로그인 성공 시 session에 회원 정보를 저장하기 위해, RedirectAttributes는 로그인 실패 시 리다이렉트 된 로그인 페이지에 실패를 의미하는 데이터를 전송하기 위해 사용합니다.
• 페이지에서 로그인 메서드 요청 시 해당 메서드에 정상적으로 진입하는지 확인합니다.
  

	/* 로그인 */
	@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;
	}

로그인 페이지에서 항목란에 테스트 데이터(아무거나)를 입력한 후 로그인 버튼을 누릅니다. console창에 정상적으로 메서드가 요청이 되었으며 데이터가 넘어왔는지 확인합니다.

2) 변수 선언 및 초기화

두 가지의 변수를 선언 및 초기화를 진행할 것입니다. 먼저 session을 사용하기 위해 session 변수를 선언하고 request.getSession()으로 초기화합니다. 두 번째 변수로 MemberVO 타입의 변수 lvo를 선언하고 MemberService.java의 memberLogin메서드로 초기화합니다.

• 인자는 서버로부터 전달받은 member 변수를 사용합니다.
• memberLogin 메서드를 요청하게 되면 MemberMapper.java를 거쳐서 로그인 쿼리가 실행이 되게 되고 그 결과 값이 담긴 MemberVO 객체를 반환받아서 변수 lvo에 저장되게 됩니다.
  

		HttpSession session = request.getSession();
		MemberVO lvo = memberservice.memberLogin(member);

3) if 문 작성

lvo 값은 아이디, 비밀번호가 존재할 경우 memberId, memberName, adminCk, money, point 데이터가 담긴 MemberVO 객체가 저장되게 됩니다. 아이디, 비밀번호가 존재하지 않을 경우 lvo값은 null 이 저장됩니다. 따라서 이러한 상황을 이용해서 if문을 통해 lvo 값이 null일 경우 로그인 실패이기 때문에 로그인 페이지로 리다이렉트 되도록, null이 아닌 경우 로그인 성공이기 때문에 메인 페이지로 리다이렉트 되도록 return 값을 설정해줍니다.

• return문으로 가기 전 실패일 경우 RedirectAttributes에 실패를 의미하는 데이터를, 성공일 경우 session에 변수 lvo에 담긴 데이터를 저장하는 코드를 추가해줍니다.
• RedirectAttributes에 담길 데이터는 자신이 임의로 아무 데이터나 작성해도 됩니다.
  

        if(lvo == null) {                                // 일치하지 않는 아이디, 비밀번호 입력 경우
            
            int result = 0;
            rttr.addFlashAttribute("result", result);
            return "redirect:/member/login";
            
        }
        
        session.setAttribute("member", lvo);             // 일치하는 아이디, 비밀번호 경우 (로그인 성공)
        
        return "redirect:/main";

4) 테스트

로그인 메서드가 정상적으로 진행되는지 테스트합니다.
- 올바른 아이디 비밀번호 로그인

- 올바르지 않은 아이디 비밀번호 로그인

7. login.jsp (로그인 실패)

로그인 페이지는 서버로부터 받은 result 변수에 담긴 데이터를 활용하여 로그인에 실패하였다는 경고 문구가 뜨도록 만들 것입니다.

먼저 경고문구를 포함한 div태그와 해당 태그의 css 코드를 추가합니다. 태그의 추가 위치는 클래스 속성명 'pw_wrap'인 div태그와 클래스 속성명 'login_button_wrap'인 div태그 사이에 div태그를 추가합니다.

<div class="login_warn">사용자ID 또는 비밀번호를 잘못 입력하셨습니다.</div>

/* 로그인 실패시 경고글 */
.login_warn{
    margin-top: 30px;
    text-align: center;
    color : red;
}

JSTL을 사용하기 위해 jsp 상단에 태그라이브러리 코드를 추가합니다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

경고문구를 포함한 div 태그를 <c:if> 태그로 감싸줍니다. <c:if> 태그의 test속성명의 값을 "result == 0"을 작성합니다. 해당 식이 true일 때 <c:if> 태그 안의 데이터들이 출력되게 됩니다. 따라서 로그인에 실패하여 서버에서 result변수에 0을 저장하여 페이지에 전송하게 된다면 <c:if>의 test속성 값이 true가 되기 때문에 경고문구가 출력되게 됩니다.

			<c:if test = "${result == 0}">
				<div class="login_warn">사용자ID 또는 비밀번호를 잘못 입력하셨습니다.</div>
			</c:if>

고의적으로 잘못된 아이디와 비밀번호를 작성하여 테스트를 진행합니다.

8. main.jsp (로그인 성공)

아직 아무런 작업을 하지 않은 상태에서 로그인을 하게 되면 메인페이지로 이동하지만 로그인, 회원가입 버튼이 계속 보입니다. 서버로부터 전달받은 member 변수에 담긴 데이터와 위에서 사용한 <c:if> 태그를 사용하여 로그인한 상황에서는 버튼들이 보이지 않고 로그인한 회원의 정보가 출력되도록 만들 것입니다. 저는 회원의 이름, 돈, 포인트를 노출되도록 할 것입니다.

먼저 JSTL을 사용하기 위해 main.jsp 상단에 태그라이브러리 코드를 추가해줍니다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

1) 로그인 하지 않을 시 코드 처리

기존 로그인 버튼과 회원가입 버튼을 <c:if> 태그로 감싸 줍니다. 해당 태그의 조건은 member == null입니다. member라는 변수가 null일 때 <c:if> 안의 데이터들이 출력되게 됩니다. 이럴 경우 로그인을 하지 않은 상태에선 아직 session에 member 변수 데이터가 존재하지 않기 때문에 로그인, 회원가입 버튼이 보이게 됩니다.

                <!-- 로그인 하지 않은 상태 -->
                <c:if test = "${member == null}">
                    <div class="login_button"><a href="/member/login">로그인</a></div>
                    <span><a href="/member/join">회원가입</a></span>                
                </c:if>

2) 로그인 상태 코드 처리

작성한 <c:if> 태그 바로 아래 새로운 <c:if>태그를 작성합니다. 해당 태그의 조건은 member != null을 사용합니다. 이렇게 작성하게 되면 해당 태그는 로그인에 성공을 하여 서버가 session에 member 변수에 데이터를 저장하게 되고 member 변수가 null 아니기 때문에 해당 <c:if> 태그 안의 데이터들이 출력되게 됩니다.

                <!-- 로그인한 상태 -->
                <c:if test="${ member != null}">
                    <div class="login_success_area">
                        <span>회원 : ${member.memberName}</span>
                        <span>충전금액 : ${member.money}</span>
                        <span>포인트 : ${member.point}</span>
                    </div>
                </c:if>

/* 로그인 성공 영역 */
.login_success_area{
    height: 62%;
    width: 80%;
    border: 2px solid #7474ad;
    border-radius: 15px;
    margin: 5% auto;
    padding-top: 5%;
}
.login_success_area>span{
    display : block;
    text-align: left;
    margin-left: 10%;
}

3) 테스트

마지막으로 의도하는 대로 작동하는지 테스트를 진행합니다.

4) jstl 활용한 숫자 표시 형식 변경

회원이 소유한 돈, 포인트가 읽기에 다소 불편합니다. 따라서 JSTL에서 형식 변환 기능을 제공하는 fmt태그를 활용하여 숫자의 형식을 천 단위마다 콤마가 출력되도록 변환하겠습니다.

먼저 fmt태그를 사용하기 위해 jsp 상단에 라이브러리 코드를 추가합니다.

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

${member.money}와 ${member.point} 대신 아래의 코드로 대체해줍니다. 회원의 돈 경우 숫자 앞에 원화 기호를 넣어줍니다.

<fmt:formatNumber value="${member.money }" pattern="\#,###.##"/>
<fmt:formatNumber value="${member.point }" pattern="#,###" />

로그인을 하여 형식이 바뀌었는지 확인해봅니다.