목표
- 이메일 전송이 가능하도록 기본 환경 셋팅
- View(회원가입페이지)에서 입력한 데이터(이메일 주소)를 Controller(Member Controller)로 전송
- 이메일을 입력한 뒤, 인증번호 전송 버튼을 클릭하면 칸에 입력이 가능하면서 입력한 이메일로 인증번호 전송
- 일치할 경우 초록색 글, 일치하지 않을 경우 빨간색 글
0. 메일 계정 보안 설정
SMTP Server를 통해서 메일 전송 기능을 구현하기 위해선 사용하고자 하는 메일의 SMTP 보안 단계를 낮추어야 합니다. 네이버의 경우 로그인시 휴대폰승인을 통한 보안 단계까지 설정이 되어 있을 경우 아래의 설정만으로는 부족합니다.
1) 네이버
- 네이버 메일 페이지에 들어간 후 왼쪽 하단에 "환경 설정"을 클릭합니다.
- 상단 목록 중 "POP3/IMAP 설정"을 클릭합니다.
- "POP3/SMTP 사용"을 '사용함'으로 체크 후 확인버튼을 클릭합니다.
1. 이메일 전송 환경 세팅
1) pom.xml 설정(라이브러리 추가)
- pom.xml에 아래의 두개 라이브러리를 추가합니다.
<!-- Email 인증번호 라이브러리 추가 -->
<!-- https://mvnrepository.com/artifact/javax.mail/mail -->
<dependency>
<groupId>javax.mail</groupId>
<artifactId>mail</artifactId>
<version>1.4.7</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.springframework/spring-context-support -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context-support</artifactId>
<version>${org.springframework-version}</version>
</dependency>2) mailSender Bean 등록
'메일 서버에 계정 인증 후 메일을 전송하는 방법'을 택하였고 이용한 이메일은 네이버 이메일입니다.
- root-context.xml에 아래의 코드를 추가해줍니다.
- username / your_email : 자신의 이메일 아이디 입력
- password / your_password : 자신의 이메일 비밀번호 입력
<!-- navermail설정 -->
<bean id="mailSender" class="org.springframework.mail.javamail.JavaMailSenderImpl">
<property name="host" value="smtp.naver.com"/> <!-- 메이서버 호스트 -->
<property name="port" value="465"/> <!-- 메이서버 포트번호 -->
<property name="username" value="your_email"/> <!-- 자신의 이메일 아이디 -->
<property name="password" value="your_password"/> <!-- 자신의 비밀번호 -->
<!-- 보안연결 SSL과 관련된 설정 -->
<property name="javaMailProperties">
<props>
<prop key="mail.smtp.auth">true</prop>
<prop key="mail.smtp.starttls.enable">true</prop>
<prop key="mail.smtps.checkserveridentity">true</prop>
<prop key="mail.smtps.ssl.trust">*</prop>
<prop key="mail.debug">true</prop>
<prop key="mail.smtp.socketFactory.class">javax.net.ssl.SSLSocketFactory</prop>
</props>
</property>
</bean>
2. 인증번호 입력란 색상 변경 및 disabled 속성 추가
1) 입력란 색상변경
- class가 "mail_check_input_box"인 div태그에 id속성 "mail_check_input_box_false"를 추가해줍니다.
<div class="mail_check_input_box" id="mail_check_input_box_false">- join.jsp와 연결된 css에 "#mail_check_input_box_false"와 "#mail_check_input_box_true"을 추가해주고 false에는 회색, true에는 투명 혹은 흰색을 설정해줍니다.
- 이메일 전송이 완료되었을 때 색상을 변경하기위해 "#mail_check_input_box_true" css를 추가하였습니다.
2) disabled 속성 추가
속성 class가 "mail_check_input"인 input태그에 disabled="disabled"속성을 추가해줍니다.
<input class="mail_check_input" disabled="disabled">3. 이메일 전송 메서드 추가(자바스크립트)
이메일 입력란에 이메일을 입력 후 [인증번호 전송] 버튼을 클릭하면 작동하는 메서드를 추가하겠습니다. 해당 메서드는 controller로 작성한 이메일 주소를 보내고, 인증번호 생성하여 전달받은 이메일로 전송한 뒤 전송된 인증번호를 뷰(회원가입페이지)로 다시 반환되로록 합니다. controller에 요청할 때 화면이 전환되면 안되기 때문에 ajax를 사용하겠습니다.
- 아래의 메서드 코드를 추가합니다.
- 해당 코드는 class명이 "mail_check_button" input태그를 클릭하였을 때 실행됩니다.
- 이메일 입력란에 입력된 값[$(".mail_input").val()]을 사용하기 쉽도록 "email" 변수를 선언하였습니다.
- ajax 코드를 추가합니다.
- url을 통해 데이터를 보낼 수 있도록 GET 방식으로 하였고, url명을 "mailCheck"로 하였습니다.
//인증번호 이메일 전송
$(".mail_check_button").click(function() {
var email = $(".mail_input").val(); // 입력한 이메일
$.ajax({
type : "GET",
url : "mailCheck?email=" + email
})
});4. Controller 메서드 추가 및 jsp 코드 추가
추가할 메서드는 인증번호를 생성하여, 이메일과 뷰로 보내는 기능을 할 것입니다.
1) ajax에서 요청을 실행하는 메서드(mailCheckGET)를 추가합니다.
- 반환 타입은 String으로 합니다.
- 해당 Controller메서드를 ajax로 요청하였기 때문에 @ResponseBody 어노테이션을 사용합니다.
- View(회원가입페이지)에서 전송한 데이터를 확인하기 위해서 logger를 추가하였습니다.
2) 인증번호(난수) 생성
- 인증번호로서 숫자 6자리를 사용할 것이고, 이를 위해서 JAVA에서 제공하는 Random객체를 사용할 것입니다.
- 111111 ~ 999999 범위의 숫자를 얻기 위해서 nextInt(888888) + 111111를 사용하였습니다.
- 인증번호가 정삭적으로 생성되었는지 확인하기 위해서 logger를 추가하였습니다.
// 인증번호(난수) 생성
Random random = new Random();
int checkNum = random.nextInt(888888) + 111111;
logger.info("인증번호" + checkNum);3) 인증번호 이메일 전송
- 변수를 선언해서 이메일 전송에 필요로 한 데이터를 할당합니다.
- setFrom : root-context.xml에 삽입한 자신의 이메일 계정의 이메일 주소입니다. (아이디만 입력하는 것이 아니라 이메일 주소를 입력해야 합니다.
- toMail : 수신받을 이메일입니다. 뷰로부터 받은 이메일 주소인 변수 email을 사용하였습니다.
- title : 자신이 보낼 이메일 제목을 작성합니다.
- content : 자신이 보낼 이메일 내용입니다.
// 이메일 보내기
String setFrom = "abcd4501@naver.com";
String toMail = email;
String title = "회원가입 인증 이메일 입니다.";
String content = "홈페이지를 방문해주셔서 감사합니다." +
"<br><br>" +
"인증 번호는 " + checkNum + " 입니다." +
"<br>" +
"해당 인증번호를 인증번호 확인란에 기입하여 주세요.";- MemberController.java 상단에 JavaMailSender 객체 타입인 mailSender 변수를 선언합니다. 의존성 주입을 사용하기 위해서 @Autowired 어노테이션을 사용하였습니다.
- 이메일 전송을 위한 코드를 삽입합니다.
try {
MimeMessage message = mailSender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message, true, "utf-8");
helper.setFrom(setFrom);
helper.setTo(toMail);
helper.setSubject(title);
helper.setText(content, true);
mailSender.send(message);
}catch(Exception e) {
e.printStackTrace();
}4. 인증번호 뷰(회원가입 페이지)로 전송
- 생성한 인증번호 변수를 뷰로 반환하기만 하면 됩니다. 하지만 생선된 랜덤 변수는 int타입이므로 ajax를 통한 요청으로 인해 뷰로 다시 반환할 때 데이터 타입은 String만 가능합니다. 그렇기 때문에 String타입으로 변환 후 반환해줍니다.
- String타입 변수 num을 선언하고(checkNum)를 string으로 형 변환한 값을 할당합니다.
- mailCheckGET메서드의 return값으로 앞서 선언하였던 num을 사용합니다.
String num = Integer.toString(checkNum);
return num;- join.jsp에 이메일 인증번호 전송을 요청한 ajax에 success 코드 추가합니다.
$.ajax({
type : "GET",
url : "mailCheck?email=" + email,
success : function(data){
console.log("data : " + data);
}
});- controller로부터 데이터가 정상적으로 반환되는지 확인하기 위해 이메일 전송 코드를 잠시 주석처리한 후 console창을 확인하여 테스트를 진행합니다.
5. 인증번호 입력란 변환 기능
인증번호 입력란(mail_check_input)에 사용할 수 있도록 하기 위해 두 가지가 기능 실행되어야 합니다.
- 인증번호 입력란 태그의 속성 disabled 속성 값이 변경
- 인증번호 입력란의 배경색 변경
이 기능은 인증번호 전송이 정상적으로 작동하였을때만 진행이 됩니다. 그렇기 때문에 앞서 말한 두 가지 기능을 수행하는 명령 코드는 ajax 내에 있는 success코드에 작성되어야 합니다.
- 변경이 되어야 할 대상[$(".mail_check_input"), $(".mail_check_input_box")]을 쉽게 사용하기 위해서 checkBox, boxWrap변수를 선언 및 할당합니다.
- success 코드 안에 이메일 인증 입력란 [$(".mail_check_input")]이 입력이 가능하도록 속성을 변경해주는 코드를 추가합니다.
- success 코드 안에 이메일 인증 입력란 [$(".mail_check_input_box")]의 색상이 변경되도록(회색 => 흰색) 해당 태그 id속성 값을 변경해주는 코드를 추가합니다.
//인증번호 이메일 전송
$(".mail_check_button").click(function() {
var email = $(".mail_input").val(); // 입력한 이메일
var checkBox = $(".mail_check_input"); // 인증번호 입력란
var boxWrap = $(".mail_check_input_box")// 인증번호 입력란 박스
$.ajax({
type : "GET",
url : "mailCheck?email=" + email,
success : function(data){
//console.log("data : " + data);
checkBox.attr("disabled",false)
boxWrap.attr("id", "mail_check_input_box_true");
}
});
});6. 인증번호 일치 여부 검사 기능
입력된 인증번호와 이메일로 전송된 인증번호에 대한 비교는 Controller에서 진행되지 않고 뷰에서 진행되도록 만들 것입니다.
1) Controller로부터 전달받은 인증번호를 뷰에 저장하는 코드를 추가합니다. 사용자가 입력한 인증번호와 비교할 수 있도록 하기 위함입니다.
- 인증번호 이메일 전송 메서드 내의 ajax success 코드에 Controller부터 전달받은 인증번호를 위에서 선언한 code에 저장시키는 코드를 추가합니다.
var code = ""; //이메일전송 인증번호 저장위한 코드
//인증번호 이메일 전송
$(".mail_check_button").click(function() {
var email = $(".mail_input").val(); // 입력한 이메일
var checkBox = $(".mail_check_input"); // 인증번호 입력란
var boxWrap = $(".mail_check_input_box")// 인증번호 입력란 박스
$.ajax({
type : "GET",
url : "mailCheck?email=" + email,
success : function(data){
//console.log("data : " + data);
checkBox.attr("disabled",false)
boxWrap.attr("id", "mail_check_input_box_true");
code = data;
}
});
});2) 속성 class값이 "mail_check_wrap"인 div태그 제일 아래에 span태그를 추가해줍니다. 그리고 class속성을 추가해주고 값은 "mail_check_input_box_warn"으로 합니다.
<div class="mail_wrap">
<div class="mail_name">이메일</div>
<div class="mail_input_box">
<input class="mail_input" name="memberMail">
</div>
<div class="mail_check_wrap">
<div class="mail_check_input_box" id="mail_check_input_box_false">
<input class="mail_check_input" disabled="disabled">
</div>
<div class="mail_check_button">
<span>인증번호 전송</span>
</div>
<div class="clearfix"></div>
<span id="mail_check_input_box_warn"></span>
</div>
</div>3) join.css에 correct와 incorrect 코드(class 속성)를 추가해줍니다. 추가해준 css 속성은 인증번호의 일치 여부에 따라 위에서 추가해준 span태그의 글 색상을 변경시킬 때 사용될 것입니다.
.correct{
color: green;
}
.incorrect{
color: red;
}4) 인증번호 비교를 위한 메서드를 추가합니다. 해당 메서드는 인증번호 입력란에 데이터를 입력한 뒤 마우스로 다른 곳을 클릭 시에 실행이 됩니다.
- 아래의 변수를 선언 및 할당하는 코드를 추가해줍니다.
- inputCode : 사용자가 입력하는 인증번호입니다.
- checkResult : 2번에서 추가한 span태그입니다.
- 인증번호 일치 여부에 따라 다른 코드가 실행되도록 if문을 추가합니다. 비교값은 inputCode == code로 하였습니다.
- 일치할 경우 span태그에 "인증번호가 일치합니다."라는 문구와 함께 초록색으로 변경됩니다.
- 일치하지 않을 경우 span태그에 "인증번호를 다시 확인해주세요."라는 문구와 함께 빨간색으로 변경됩니다.
//인증번호 비교
$(".mail_check_input").blur(function() {
var inputCode = $(".mail_check_input").val(); // 입력코드
var checkResult = $("#mail_check_input_box_warn"); // 비교 결과
if (inputCode == code) { // 일치할 경우
checkResult.html("인증번호가 일치합니다.");
checkResult.attr("class", "correct");
} else { // 일치하지 않을 경우
checkResult.html("인증번호를 다시 확인해주세요.");
checkResult.attr("class", "incorrect");
}
});7. 테스트
- 이메일로 전송된 인증번호
- 인증번호 일치하지 않을 경우
- 인증번호 일치할 경우
개인이 공부한걸 작성하는 블로그입니다..