[JSP] [MVC] [JAVA] 이메일 전송으로 회원 비밀번호 변경 구현하기 #2. 인증코드 발급 페이지 구현

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

 

저번 포스팅에서는 프로젝트 개요적인 면에서 개발 환경에 따른 필요 라이브러리를 설정하고,  전체 구현 흐름을 간략하게 정리해 보았다. 

이번 포스팅에서는 저번 포스팅에서 정리한 로직 흐름 중 1. 인증코드 발급 페이지를 구현하고, 서버 측에서 이메일을 송신하기 위해 필요한 SMTP 설정을 정리해 보도록 하겠다.

 

목표

♠ JSP에서 MVC 패턴을 지키면서 구현할 수 있다.

♠ 이메일 사용을 위한 네이버 SMTP 설정을 할 수 있다.

 

 

로직 흐름 코드 및 실행화면

1. 인증코드 발급 페이지(forgotPwForm.jsp)

1-1. ▼ 인증코드 발급 페이지

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

인증코드 발급 페이지

 

1-2. ▼ 인증코드 발급 페이지 HTML

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

 

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

<div class="col-lg-6">
  <div class="login_form_inner">
    <h3>인증코드 발급하기</h3>
    <form class="row login_form" action="${request.getContextPath() }/memberForgotPwPro.me" 
          method="post" id="contactForm" name="emailForm" novalidate="novalidate">
      <div class="col-md-12 form-group">
        <input type="text" class="form-control" id="m_id" name="m_id" placeholder="아이디를 입력하세요"
               onfocus="this.placeholder = ''" onblur="this.placeholder = 'Username'">
      </div>
      <div class="col-md-12 form-group">
        <input type="email" class="form-control" id="m_email" name="m_email" placeholder="이메일을 입력하세요"
               onfocus="this.placeholder = ''" onblur="this.placeholder = 'Username'">
      </div>
      <div class="col-md-12 form-group">
        <button type="submit" value="임시 비밀번호 발급받기" class="primary-btn">전송하기</button>
      </div>
    </form>
  </div>
</div>

 

 

네이버 SMTP 설정하기

나는 네이버의 SMTP를 이용할 것이므로 네이버 이메일 환경설정에 들어가 POP3/SMTP 설정을 잡아준다.

이 계정으로 비밀번호 찾기를 원하는 회원에게 이메일을 보낼 것이다.

아래 이미지처럼 POP3/SMTP 사용에 체크하고 저장한다.

이미지 하단에 보이는 SMTP 서버명과 SMTP 포트 정보, 본 네이버 계정 정보를 나중에 서버 딴에서 사용할 것이다.

네이버 SMTP 설정

 

여기서 잠깐, 네이버 SMTP 설정만 하고 프로젝트를 실행시키면 다음과 같은 에러를 만날 수 있다.

 

javax.mail.AuthenticationFailedException:
535 5.7.1 Username and Password not accepted blabla - nsmtp

 

이를 방지하기 위해 네이버 계정의 보안설정에 들어가 SMTP용 비밀번호를 별도로 세팅해 준다.

 

아래 이미지처럼 계정의 보안설정 ▶ 2단계 인증에 들어간다.

2단계 인증

 

그 후, 기기를 선택하고 다음을 누르면 아래 화면이 나온다.

애플리케이션 종류를 아무거나 선택하고 생성하기를 눌러주면 비밀번호가 생성된다.

이 비밀번호를 SMTP용 비밀번호로 사용할 것이다.

애플리케이션 비밀번호 관리

 

 

---

 

 

이렇게 프론트 딴의 인증코드 발급 페이지와 네이버 SMTP 설정이 끝났다.

다음 포스팅에서는 인증코드 발급 페이지에서 넘어간 데이터를 처리하는 서버 딴 로직을 기록해 보도록 하겠다.

 

 

끝.