인증번호 발송 시: 유효 시간 설정(session 사용)

인증 번호_유효 시간(Session 사용)

<aside> 💡 SMTP 사용하여 메일 ( 인증 번호 : 랜덤 난수 ) 을 전송할 때, 유효 시간 3분을 session 을 사용하여 적용 시키는 과정에 대한 설명입니다.

</aside>

---

코드

HTML

<meta name="_csrf_header" th:content="${_csrf.headerName}">
<meta name="_csrf" th:content="${_csrf.token}">

<div class="pop_wrap login user_find" data-layer-wrap="user_find" style="display: block;">
	<div class="pop_top">
	<!-- S : 성환 : 팝업창 닫기 버튼-->
		<button class="pop_close hide_pop" data-layer-id="user_find" >
			<img src="/pon/common/image/chat_close.svg" alt="">
		</button>
		<!-- E : 성환 : 팝업창 닫기 버튼-->
	</div>
	<div class="pop_content">
		<h2 class="pop_title">아이디 · 비밀번호 찾기</h2>
		<div class="login_wrap">
			<div class="tab_menu">
				<div class="tab_menu_btn">
					<a href="javascript:void(0);" data-tab="tab1" class="active">아이디 찾기</a>
					<a href="javascript:void(0);" data-tab="tab2">비밀번호 찾기</a>
				</div>

				<form th:action = "@{/findUsername}" method = "post" onsubmit="return findUsername()">
					<div class="tab_cont current" data-tab-wrap="tab1">
						<div class="input_wrap">
							<input id="username" name="username" class="name_input" type="text" placeholder="이름을 입력해주세요.">

							<input id="phone" name="phone" type="number"  placeholder="휴대폰 번호를 입력해주세요.">
						</div>
						<!-- S : 성환: 아이디 찾기 버튼-->
						<button type="button" class="btn btn_login_default login_btn" onclick="findUsername()">아이디 찾기</button>
						<!-- E : 성환: 아이디 찾기 버튼-->
						<!-- 기존코드 <button id="findId_find_btn" class="find_btn">아이디 찾기</button>-->
					</div>
				</form>

				<div class="tab_cont" data-tab-wrap="tab2">
					<div class="input_wrap">
						<input id="findPw_name" class="name_input" type="text" placeholder="이름을 입력해주세요.">

						<input id="findPw_email" class="name_input" type="text" placeholder="이메일을 입력해주세요.">
						<div class="group">
							<input id="findPw_auth_number" class="cert_input" type="number" placeholder="인증 번호를 입력해주세요.">
							<button id="findPw_send_auth_number" class="cert_btn" onclick="**findUseremail**()">인증번호 발송</button>
							<div id="timerDisplay" class="timer_display"></div>
						</div>
					</div>

					<!-- S : 성환 : 비밀번호 찾기 버튼-->
					<div class="login_btn_wrap">
						<button type="button" class="btn btn_login_default login_btn" onclick="findUserpw()">비밀번호 찾기</button>
					</div>
					<!-- E : 성환 : 비밀번호 찾기 버튼-->

					<!--기존코드 <button id="findPw_find_btn" class="find_btn">비밀번호 찾기</button>-->
				</div>
			</div>
		</div>
	</div>
</div>

1. JavaScipt

/* S: 비밀번호 찾기 - 이메일 찾기(이메일 발송, 타이머) */
function **findUseremail**(){
    //사용자 입력 값 가져오기
    var findpwname = $("#findPw_name").val();
    var findpwemail = $("#findPw_email").val();

    // 서버로 전송할 데이터 구성

    data = new FormData();
    data.append( "userNm", findpwname );
    data.append( "userId", findpwemail );

    var header = $("meta[name='_csrf_header']").attr('content');
    var token = $("meta[name='_csrf']").attr('content');

    // Ajax 를 사용한 서버로의 요청
    $.ajax({
        url: "/findUseremail",
        type: "POST",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        // contentType: "application/json; charset=utf-8",
        beforeSend: function(xhr){
            xhr.setRequestHeader(header, token);
        },
        success: function (result) {

            // 통신 이후 로직
            **if ( result.flag == "E" ) {**
                **alert( result.msg );**

            **} else if ( result.flag == "S" ) {**
                // 존재하는 계정정보일 경우 인증번호 발송되었다고 알림
                **alert(result.msg);**

                // TODO : 3분 타이머 해야함
                **startTimer**(**180**);
            }
        },
        error: function (){
            alert("code:"+request.status+"\\n"+"message:"+request.responseText+"\\n"+"error:"+error)
        }
    })
}

// 타이머(3분)
function **startTimer**(**duration**) {
    var timer = duration, minutes, seconds;
    var intervalId = setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        // 'timerDisplay'라는 ID를 가진 HTML 요소에 타이머 표시
        $("#timerDisplay").text("재발송 (" + minutes + ":" + seconds + ")");

        if (--timer < 0) {
            clearInterval(intervalId);
            // 타이머가 0에 도달하면 버튼 텍스트를 초기 상태로 변경
            $("#findPw_send_auth_number").text("인증번호 발송");
            // 선택적으로 타이머가 0에 도달했을 때 추가 작업 수행 가능
        }
    }, 1000);
}

/* E: 비밀번호 찾기 - 이메일 찾기(이메일 발송, 타이머) */

1. Controller (1. 이메일 전송 시(인증 번호) , 2. 인증 번호 검증)

	/* S : 이메일 확인 및 인증번호 전송 */
	@ResponseBody
	**@PostMapping("/findUseremail")**
	public Map<String, Object> findUseremail( @ModelAttribute LoginDto loginDto) {

		//메소드가 실행되고 나서 클라이언트에게 반환될 데이터를 담기 위한 자료구조를 생성하는 부분
		Map<String, Object> result = new HashMap<String, Object>();

		// 여기에서 실제 로직을 구현하고 결과를 반환합니다.

		// 1. 이름/ 이메일 / (관리자여부) 로 계정을 찾음
		// 비밀번호 찾기 기능에서 실제로 사용자 정보를 데이터베이스에서 조회하는 부분
		LoginDto targetDto = loginService.findByUserNmAndUserIdAndMngrYn(loginDto);

		if ( targetDto != null ) {
			// 1-1. 해당 입력값으로 찾은 계정이 있을 떄
			result.put("flag", "S");
			result.put("msg", "인증번호가 발송되었습니다. ");

			//이메일 전송
			// sendEmail(targetDto.getUserId(),generateRandomAuthNumber());
			try{
				sendEmail(targetDto.getUserId(),generateRandomAuthNumber(), session);
			}catch(MessagingException e){
				e.printStackTrace();
				result.put("flag", "E");
				result.put("msg","이메일 전송 중 오류가 발생했습니다.");
				return result;
			}

		} else if ( targetDto == null ) {
			// 1-2. 해당 입력값으로 찾은 계정이 없을 때
			result.put("flag", "E");
			result.put("msg", "입력하신 정보와 일치하는 계정이 존재하지 않습니다. 다시 시도해주세요. ");
		}

		return result;
	}

	**// 이메일 전송 메서드**
	private void **sendEmail**(String to, String authNumber , **HttpSession session**)throws MessagingException{
		MimeMessage mimeMessage = javaMailSender.createMimeMessage();
		MimeMessageHelper helper = new MimeMessageHelper(mimeMessage, false, "UTF-8");

		helper.setTo(to);
		helper.setSubject("이메일 인증번호");
		helper.setText("인증번호: " + authNumber, true);

		javaMailSender.send(mimeMessage);

		// 세션에 인증번호 저장
		session.setAttribute("authCode", authNumber);
		// TODO : 시작 시간 체크
		// 세션에 시작시간 저장
		**session**.**setAttribute**("authStartTime", System.currentTimeMillis());
	}

	// 랜덤한 인증번호 생성 메서드
	private String generateRandomAuthNumber(){
		// TODO 여기에 랜덤 인증번호 생성 로직 추가 (조건 : 랜덤한 6자리 숫자)
		// return "123456";
		// 랜덤 인증번호 생성 (6자리 숫자)
		Random random = new Random();
		int min = 100000;
		int max = 999999;
		int randomAuthNumber = random.nextInt((max - min) + 1) + min;

		return String.valueOf(randomAuthNumber);
	}
	/* E : 이메일 확인 및 인증번호 전송 */

• 이메일 (인증번호) 발송 버튼 클릭 시 시간을 세션(Session) 에 저장한다.

/* S: 비밀번호 찾기 - 인증번호 검증 */
	@ResponseBody
	**@PostMapping("/findUserpw")**
	public Map<String,Object> findUserpw(@RequestParam String authNumber, **HttpSession session**){
		Map<String, Object> result = new HashMap<>();

		// 세션에서 저장된 [인증번호] 와  [시작 시간]  가져오기
		String storedAuthCode = (String) session.getAttribute("authCode");
		**Long startTime = (Long) session.getAttribute("authStartTime");**

		if (storedAuthCode != null && storedAuthCode.equals(authNumber) && **startTime != null**) {
			// 인증번호 일치
			result.put("flag", "S");
			result.put("msg", "인증에 성공했습니다.");
			**// 검증 시간 체크**
			// TODO : 시작 시간 , 검증시간 비교하여 3분 이내인지 확인
			**long currentTime = System.currentTimeMillis();
			long timeDifference = currentTime - startTime;
			if (timeDifference <= 3 * 60 * 1000) {** // 3분 (3 * 60 * 1000 밀리초)
				// 3분 이내
				**result.put("flag", "S");
				result.put("msg", "인증에 성공했습니다.");**
			// 인증 성공 후 필요한 작업 수행
			**} else {**
				// 3분 넘어가면..
				// 시간초과 메시지..
			**result.put("flag", "E");
			result.put("msg", "시간이 초과되었습니다.");**
			**}**

		} else {
			// 인증번호 불일치
			result.put("flag", "E");
			result.put("msg", "인증에 실패했습니다. 다시 시도해주세요.");
		}

		return result;
	}
	/* E: 비밀번호 찾기 - 인증번호 검증 */

---

각 Level 역할

[인증번호 발송] 버튼 클릭 시

1. html 역할 : 03:00 (3분) 이 흐르고 있음을 표출해야 한다.
2. JavaScript 역할: html 에 실시간으로 시간이 흐르게 동작 구현

---

---

1. Controller 역할:

• 1-1: [인증번호 발송] 버튼 클릭 시 → 호출되는 메서드에 시작 시간을 세션에 저장 ,
• 1-2: 인증번호 입력 후 [확인] 버튼 클릭 시 → 해당 메서드 호출 하여 인증번호 발송 할 때 세션에 저장해둔 시간과 현재 시간을 비교하여 3분 이내인지(현재 시간 -발송 시간) 확인
• 1-3: 해당 결과 result 에 put 하여 결과_return 시킴.