[JSP] [MVC] [JAVA] 이메일 전송으로 회원 비밀번호 변경 구현하기 #4. 서버 딴 구현(2) & 비밀번호 변경 페이지 구현

회원 관련 로직 중 회원이 비밀번호를 찾고 싶을 때 가입한 이메일로 인증코드를 발송하고, 인증코드를 가지고 회원 비밀번호를 변경하는 로직을 기록하고자 한다.

 

저번 포스팅에서는 로직 흐름 중 2. 서버 딴 로직을 기록해 보았다.

이번 포스팅에서는 2. 서버 딴 로직에서 "/memberChangePw.me"로 리다이렉트하고 나서의 처리를 마저 구현한 후, 3. 비밀번호 변경 페이지를 구현해보도록 하겠다.

 

---

♠ 프로젝트 전체 로직 흐름이 궁금하면 아래 포스팅을 참고하세요 ♠

 

2023.04.25 - [JSP/MVC] - [JSP] [MVC] [JAVA] 이메일 전송으로 회원 비밀번호 변경 구현하기 #1. 구현 틀 잡기

[JSP] [MVC] [JAVA] 이메일 전송으로 회원 비밀번호 변경 구현하기 #1. 구현 틀 잡기

---

 

 

로직 흐름

1. "/memberChangePw.me"을 해당 컨트롤러가 받아 Action 클래스를 호출한다(MemberFrontController.java).
2. Action 클래스에서 세션을 확인하고, 세션 속성에 따라 액션을 취한다(MemberChangePwAction.java).
   
   • 인증코드가 저장된 세션 속성이 있어야 비밀번호 변경 페이지로 이동이 가능하다.
3. 비밀번호 변경 페이지에서 사용자는 인증코드와 변경할 새 비밀번호를 입력하고 전송 버튼을 클릭한다.
   • JS로 유횻값 검사를 한 후 서버로 보낸다.

 

 

로직 흐름 코드 및 실행화면

1. 컨트롤러(MemberFrontController.java)

MemberFrontController 클래스에 아래 코드를 추가한다.

들어온 URL을 매핑하여 MemberChangePwAction 클래스를 호출한다.

// 인증코드 이용, 새 비밀번호 변경 페이지 요청
else if (command.equals("/memberChangePw.me")) {
    action = new MemberChangePwAction();
    try {
        forward = action.execute(req, resp);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

 

2. Action 클래스(MemberChangePwAction.java)

해당 Action 클래스에서는 세션 속성을 확인하여

1. 로그인 속성값이 없으면서
2. 인증코드가 저장된 속성이 있는 경우에만

비밀번호 변경 페이지로 이동될 수 있도록 처리한다.

 

HttpSession session = req.getSession(false); 

• false로 설정하면 브라우저에서 보낸 request에 최근 만들어진 세션 객체가 있으면 그것을 리턴하고, 없으면 NULL을 리턴한다. 

 

Action 클래스 로직 순서

• 브라우저에서 건너온 세션을 확인한다.
  • 인증코드가 세션에 저장되어 있으므로 세션이 존재하지 않으면 접근하지 못하도록 해준다.
  • 인증코드가 저장된 속성은 MemberForgotPwProAction 클래스에서 생성해 주었다(이전 포스팅 참고).
• 로그인 상태에선 접근하지 못하도록 처리한다.
  • 로그인을 처리하는 클래스에서 사용자가 로그인을 하면 세션에 속성 "isLogin"에 true가 저장되도록 만들었기 때문에, 만약 이 isLogin 속성값이 null이 아니면 접근을 못하도록 해준다.
  • 이동하는 경로는 "/bookShopMain.ok" (홈 페이지)이다.
• 속성 "isLogin" 값이 null이라면(로그인이 안된 상태), 인증코드가 저장된 속성값을 가져온다. 
  
  • 속성값이 있는 경우, 페이지 이동을 설정한다.
    • 이동할 경로 : /member/changePwForm.jsp
    • 이동할 방식 : Forward

package action;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import vo.ActionForward;

/** 임시코드를 발급받은 후, 새 비밀번호로 변경하는 페이지 요청을 처리하는 클래스 */
public class MemberChangePwAction implements Action {

	@Override
	public ActionForward execute(HttpServletRequest req, 
    					HttpServletResponse resp) throws Exception {

		ActionForward forward = null;
		
		/* 브라우저에서 건너온 세션 확인 
		 * 로그인 상태에선 접근 못하게 설정 */
		HttpSession session = req.getSession(false);
		if(session != null) {
			// 세션이 생성되어 있는 경우
			if((String)session.getAttribute("isLogin") != null) {
				// 로그인된 상태
				session.invalidate();
				
				resp.setContentType("text/html;charset=utf-8");
				PrintWriter out = resp.getWriter();
				out.println("<script>");
				out.println("alert('접근 권한이 없습니다.');");
				out.println("location.href='/bookShopMain.ok';");
				out.println("</script>");
			} else {
				// 비로그인 상태
                		String authenticationCode =
                        			(String) session.getAttribute("authenticationCode");
				
                		if(authenticationCode != null) {				
                    			// 인증코드가 저장된 속성이 있는 경우
					forward = new ActionForward();
					forward.setPath("/member/changePwForm.jsp");
					forward.setRedirect(false);
				} else {
					resp.setContentType("text/html;charset=utf-8");
					PrintWriter out = resp.getWriter();
					out.println("<script>");
					out.println("alert('잘못된 접근 권한입니다.');");
					out.println("location.href='/bookShopMain.ok';");
					out.println("</script>");
				}
			}
		} else {
			// 세션이 생성되지 않은 경우
			resp.setContentType("text/html;charset=utf-8");
			PrintWriter out = resp.getWriter();
			out.println("<script>");
			out.println("alert('잘못된 접근입니다.');");
			out.println("location.href='/bookShopMain.ok';");
			out.println("</script>");
		}
		return forward;
	}
}

 

3. 비밀번호 변경 페이지(changePwForm.jsp)

사용자는 이동한 페이지에서 인증코드와 변경할 새 비밀번호를 입력하고 전송 버튼을 클릭한다.

3-1. ▼ 비밀번호 변경 페이지

요청된 URL은 http://localhost:8090/memberChangePw.me 이다.

비밀번호 변경 페이지

 

3-2. ▼ 비밀번호 변경 페이지 HTML

Form 영역의 코드를 살펴보면 다음과 같다.

 

submit 버튼을 누르면 Form 데이터가 /memberChangePwPro.me 로 넘어간다.

<div class="col-lg-6">
    <div class="login_form_inner">
        <h3>비밀번호 변경하기</h3>
        <form class="row login_form" action="${request.getContextPath() }/memberChangePwPro.me" 
        		method="post" id="contactForm" name="changePwForm" novalidate="novalidate">
            <input type="hidden" name="m_id" value="${m_id }">
            <div class="col-md-12 form-group">
                <input type="password" class="form-control" id="authenCode" name="authenCode" placeholder="인증번호를 입력하세요"
                        onfocus="this.placeholder = ''" onblur="this.placeholder = '인증번호를 입력하세요'">
            </div>
            <div class="col-md-12 form-group">
                <input type="password" class="form-control" id="newPw" name="newPw" placeholder="새 비밀번호를 입력하세요"
                         onfocus="this.placeholder = ''" onblur="this.placeholder = '새 비밀번호를 입력하세요'">
            </div>
            <div class="col-md-12 form-group">
                <input type="password" class="form-control" id="checkPw" name="checkPw" placeholder="새 비밀번호를 한번 더 입력하세요"
                         onfocus="this.placeholder = ''" onblur="this.placeholder = '새 비밀번호를 한번 더 입력하세요'">
            </div> 
            <div class="col-md-12 form-group">
                <button type="button" class="primary-btn" onclick="checkForm();">변경하기</button>
            </div>
        </form>
    </div>
</div>

 

3-3. ▼ 비밀번호 변경 페이지 JS

"변경하기" 버튼을 클릭하면 호출되는 함수로, 인증코드와 비밀번호 입력 유횻값을 검사한다.

<script type="text/javascript">
			
    function checkForm() {

        var authenCode = $('#authenCode').val();
        var newPw = $('#newPw').val();
        var checkPw = $('#checkPw').val();

        if(authenCode == null || authenCode === "" || newPw == null || 
        		newPw === "" || checkPw == null || checkPw === "") {
            alert('모든 입력란을 작성하세요.');
            return false;
        }

        if(newPw !== checkPw) {
            alert('비밀번호가 일치하지 않습니다.!');
            return false;
        }

        $('form[name="changePwForm"]').submit();
    }

</script>

 

 

---

 

 

 

이렇게 2. 서버 딴 로직과 3. 비밀번호 변경 페이지 구현이 끝났다.

다음 포스팅에서는 구현의 마지막, 비밀번호 변경 페이지에서 건너온 form 정보를 처리하는 서버 딴 로직을 기록해 보도록 하겠다.

 

 

끝.