이메일 API 사용하기

 

프로젝트를 진행하면서 아이디/비밀번호 찾기 할 시 휴대전화 / 이메일 둘 중 하나를 선택하여 본인인증하도록 설계했다.

그래서 오늘은 프로젝트에 이메일 API를 적용하면서 차근차근 적어보려고 한다.

 

생각한 인증 절차는

1. 사용자가 이메일로 인증을 클릭 >> 클릭에 따라 휴대전화 입력(기본) >> 이메일 입력으로 바뀜

2. 사용자가 생년월일, 이메일을 입력하고 인증번호 전송 버튼 클릭

3. 생년월일, 이메일이 둘 다 일치하는 회원이 DB에 존재하는지 확인

4. 만약 존재한다면 서버에서 세션에 해당 회원의 아이디 저장

5. 6자리 인증번호를 랜덤으로 생성하여 이메일로 발송하고 인증번호도 세션에 저장

6. 사용자가 인증번호를 입력하고 확인 버튼 클릭

7. 세션에 저장된 인증번호와 사용자가 입력한 인증번호가 동일한지 확인

8. 동일하다면 아래 칸 생성하여 세션에 저장해두었던 회원 아이디 출력

 

1번 과정에서는 라디오 버튼을 두고 사용자의 클릭에 따라 자바스크립트로 변환

2번 과정에서는 사용자가 인증번호 전송 버튼을 클릭하면 버튼 클릭에 따라 자바스크립트 실행. JS 코드 속 AJAX로 서블릿에게 이메일 전송 요청을 보냄 

 

	<!-- 아이디 찾기 Start -->
						<form id="id-form">
							<div class="form-group">
								<label> <input type="radio" name="idAuthMethod"
									value="phoneNum" checked> 회원정보에 등록한 휴대전화로 인증
								</label> <label> <input type="radio" name="idAuthMethod"
									value="email"> 본인확인 이메일로 인증
								</label>
							</div>
							<div class="form-group">
								<input type="date" id="memberBirthById" required>
							</div>
							<div class="form-group">
								<input type="text" placeholder="휴대전화번호 입력 (-제외)" id="memberPhoneNumberById" maxlength="11" pattern="[0-9]{11}" required>
								<span id="sendingconfirmById" style="color:red;" class="hidden">인증번호가 발송된 상태</span>&nbsp;
								<button id="confirmPhoneNumberBtnById" onclick="sendConfirmNumber('id',this)" type="button">인증번호 전송</button>
							</div>
							<div class="form-group hidden">
								<input type="text" placeholder="이메일 입력" id="memberEmailById" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
								<button id="confirmEmailBtnById" onclick="sendConfirmNumber('id',this)" type="button">인증번호 전송</button>
							</div>
							<div class="form-group" id="confirmWrapperById">
								<input type="text" placeholder="인증번호 입력" id="confirmById" readonly>
								<span id="timerById" style="color:red;" class="hidden">5:00</span>&nbsp;
								<button onclick="checkConfirmNumber('id')" type="button">확인</button>
							</div>
							<button class="submit-btn">아이디 찾기</button>
						</form>
						<!-- 아이디 찾기 End -->

원래 코드가 이랬다면

 

						<!-- 아이디 찾기 Start -->
<form id="id-form" method="post" action="findAccount.do"> <!-- 서버로 폼데이터 전송 -->
	<input type="hidden" name="searchCategory" value="SELECTONEFINDID"> <!-- 아이디 찾기임을 알려줌 -->
	<input type="hidden" name="searchType" id="id-searchType" value="email"> <!-- 이메일 인증임을 알려줌 -->

	<div class="form-group">
		<label><input type="radio" name="idAuthMethod" value="phoneNum" checked> 회원정보에 등록한 휴대전화로 인증</label>
		<label><input type="radio" name="idAuthMethod" value="email"> 본인확인 이메일로 인증</label>
	</div>

	<!-- 생년월일 -->
	<div class="form-group">
		<input type="date" id="memberBirthById" name="memberBirth" required>
	</div>

	<!-- 휴대전화 인증 -->
	<div class="form-group">
		<input type="text" placeholder="휴대전화번호 입력 (-제외)" id="memberPhoneNumberById" name="memberPhoneNumber" maxlength="11" pattern="[0-9]{11}" required>
		<span id="sendingconfirmById" style="color:red;" class="hidden">인증번호가 발송된 상태</span>&nbsp;
		<button id="confirmPhoneNumberBtnById" onclick="sendConfirmNumber('id',this)" type="button">인증번호 전송</button>
	</div>

	<!-- 이메일 인증 -->
	<div class="form-group hidden">
		<input type="text" placeholder="이메일 입력" id="memberEmailById" name="memberEmail" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
		<button id="confirmEmailBtnById" onclick="sendConfirmNumber('id',this)" type="button">인증번호 전송</button>
	</div>

	<!-- 인증번호 입력 -->
	<div class="form-group" id="confirmWrapperById">
		<input type="text" placeholder="인증번호 입력" id="confirmById" name="verificationCode" readonly>
		<span id="timerById" style="color:red;" class="hidden">5:00</span>&nbsp;
		<button onclick="checkConfirmNumber('id')" type="button">확인</button>
	</div>

	<!-- 최종 제출 버튼 -->
	<button class="submit-btn">아이디 찾기</button>
</form>

<!-- 아이디 찾기 End -->

다음과 같이 수정

 

그러고나서 재실행 후 f12에서 입력해서 확인해보면 값이 잘 오고 있는 것을 확인할 수 있다.

 

이후는 다음 블로그 업데이트 때..