스프링으로 쇼핑몰을 만들어보자4 - 인증번호 이메일 전송

2022-06-13

기능구현

회원가입(주소API연동, 이메일 인증, ajax를 사용하여 아이디 중복검사)
관리자 페이지(인터셉터 적용, 상품관리, 회원관리)
업로드(이미지 등록, 수정, 삭제)
검색
페이징
구매(장바구니, 포인트사용)
댓글(등록,수정,삭제)
중간에 막혔거나 에러 해결 못하겠으면 yoonbitnara@gmail.com 으로 문의

join.jsp

<div class="mail_wrap">
				<div class="mail_name">이메일</div> 
				<div class="mail_input_box">
					<input class="mail_input" name="memberMail">
				</div>

<div class = 'mail_wrap>'클래스 이름을 mail_check_wrap로 바꿔준다.

<div class="mail_check_wrap">
				<div class="mail_name">이메일</div> 
				<div class="mail_input_box">
					<input class="mail_input" name="memberMail">
				</div>

SMTP Server를 이용한 메일전송(세팅)

SMTP는 Simple Mail Transfer Protocol의 약자이며 전자 메일 전송을 위한 표준 프로토콜이다.
메일 서버는 SMTP Server, POP3 Server가 있고 POP3 Server는 이메일을 수신하는 서버이다.
메일 전송 기능을 구현하기 위해선 아래의 4가지가 필요하다.
- pom.xml 설정
- mailSender Bean등록(root-context.xml or servlet-context.xml)
- Controller 메서드 추가
- 메일 계정 보안 설정
메일서버(SMTP Server)를 통해 메일을 전송할 때 두가지 방법이 있다.
- 메일서버가 릴레이를 허용하는 경우
  - 계정이 존재하지 않더라도 메일을 발송할 수 있다.
  - 릴레이를 허용하는 경우 잘못된 방식으로 악용될 수 있다.
  - 특정 IP에서만 릴레이가 되도록 하는게 일반적이다.
  - 릴레이란?
    - 외부에서 해당 메일서버를 경유해서 외부로 메일을 보내는 것을 의미한다.
- 메일서버에 계정 인증 후 메일을 전송하는 방법

구글 세팅

네이버 세팅

네이버 메일 좌측 하단 환경설정 클릭

메일 페이지 좌측 하단 환경설정 클릭

pom.xml 설정

<!-- mail lib -->
		<dependency>
    		<groupId>javax.mail</groupId>
    		<artifactId>mail</artifactId>
    		<version>1.4.7</version>
		</dependency>

pom.xml에 mail 라이브러리를 추가해준다.

spring-context-support 라이브러리를 추가한다.

<!-- 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>

gmail

root-context.xml 에 코드 추가

<!-- gmail설정 -->
<bean id="mailSender2" class="org.springframework.mail.javamail.JavaMailSenderImpl"> 
     <property name="host" value="smtp.gmail.com" />
     <property name="port" value="587" />
 <property name="username" value="your_email"/> <!-- 자신의 이메일 아이디 -->
 <property name="password" value="your_password!"/> <!-- 자신의 비밀번호 -->
 <!-- 보안연결 TLS과 관련된 설정 -->
     <property name="javaMailProperties">
    <props>
       <prop key="mail.smtp.auth">true</prop>
       <prop key="mail.smtp.starttls.enable">true</prop>
    </props>
     </property>
</bean>

naver

root-context.xml 에 코드 추가

<!-- 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>

javaMailProperties인 <property> 태그에 삽입된 코드는 SSL 인증 코드다.

daum

root-context.xml 에 코드 추가

<bean id="mailSender" class="org.springframework.mail.javamail.JavaMailSenderImpl"> 
 <property name="host" value="smtp.daum.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>

입력란 색상변경

mail_check_input_box클래스에 id속성 mail_check_input_box_false를 추가한다. - join.jsp

변경 전
<div class="mail_check_input_box">
 
변경 후
<div class="mail_check_input_box" id="mail_check_input_box_false">

join.css에 방금 추가한 id에 css를 넣어준다.

 
#mail_check_input_box_false{
    background-color:#ebebe4;
}
 
#mail_check_input_box_true{
    background-color:white;
}

mail_check_input 클래스에 disabled="disabled" 속성을 추가한다.

<input class="mail_check_input" disabled="disabled">

이메일 전송 메서드 추가(JS)

인증번호 전송 버튼을 클릭하면 작동하는 메서드를 추가한다.
controller로 작성한 이메일 주소를 보내고, 인증번호를 생성하여 전달받은 이메일로 전송한 뒤 전송된 인증번호를 회원가입페이지로 다시 반환되도록 한다.
controller에 요청할 때 화면이 전환되면 안되기 때문에 ajax를 사용한다.
join.jsp에 아래 코드를 추가한다.

 
/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
    
});

이메일 입력란에 email 변수를 선언한다.

 
/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
    
    var email = $(".mail_input").val();        // 입력한 이메일
    
});

ajax 코드를 추가한다.

/* 인증번호 이메일 전송 */
$(".mail_check_button").click(function(){
    
    var email = $(".mail_input").val();        // 입력한 이메일
    
    $.ajax({
        
        type:"GET",
        url:"mailCheck?email=" + email
                
    });
    
});

대충 설명을 하자면 url을 통해 데이터를 보낼 수 있도록 GET방식으로 하였고 url명을 mailCheck로 하였다.

Controller 메서드 추가

인증번호를 난수로 생성하여 이메일과 뷰로 보내는 기능을 만들 예정이다.

mailCheckGET 메서드 추가

반환타입은 임시로 void로 하였다. 추후 String으로 바꿀예정이다.
반환타입을 String으로 변경할 경우 회원가입페이지로 온전히 데이터를 전송하기 위해선 @ResponseBody 어노테이션이 필요하다.

package com.store.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.store.model.MemberVO;
import com.store.service.MemberService;

@Controller
@RequestMapping(value = "/member")
public class MemberController {
	
	private static final Logger logger = LoggerFactory.getLogger(MemberController.class);
	
	@Autowired
	private MemberService memberService; // 코드 추가
	
	//회원가입 페이지 이동
	@RequestMapping(value = "join", method = RequestMethod.GET)
	public void joinGET() {
		logger.info(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 회원가입 페이지 진입");
	}
	
	// 회원가입
	@RequestMapping(value = "/join", method = RequestMethod.POST)
	public String joinPost(MemberVO member) throws Exception {
		
		logger.info(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> join 진입");
		
		//회원가입 서비스 실행
		memberService.memberJoin(member);
		
		logger.info("join Service 성공");
		
		return "redirect:/main";
	}
	
	// 로그인 페이지 이동
	@RequestMapping(value = "login", method = RequestMethod.GET)
	public void loginGET() {
		
		logger.info(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 로그인 페이지 진입");
	}
	
	// 아이디 중복 검사
	@RequestMapping(value = "/memberIdChk", method = RequestMethod.POST)
	@ResponseBody
	public String memberIdChkPOST(String memberId) throws Exception {
		
		//logger.info(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> memberIdChk 진입");
		
		int result = memberService.idCheck(memberId);
		
		logger.info("결과값 : " + result);
		
		if (result != 0) {
			
			return "fail"; // 중복아이디가 존재하면 fail
			
		} else {
			
			return "success"; // 중복아이디가 존재하지 않는다면 success
		}
	}
	
	// 이메일 인증
	@RequestMapping(value = "mailCheck", method = RequestMethod.GET)
	@ResponseBody
	public void mailCheckGET(String email) throws Exception {
		
		// 뷰에서 넘어온 데이터 확인
		logger.info("========================== 이메일 데이터 전송 확인 ============================");
		logger.info("인증번호 : [ " + email + " ]");
	}
	

}

중간확인

server run을 하여 중간확인을 한다.

Console에 정상적으로 데이터가 넘어왔는지 확인해본다.

스프링으로 쇼핑몰을 만들어보자4 - 인증번호 이메일 전송

기능구현

목차

join.jsp

SMTP Server를 이용한 메일전송(세팅)

구글 세팅

네이버 세팅

다음

pom.xml 설정

spring-context-support 라이브러리를 추가한다.

gmail

naver

daum

입력란 색상변경

이메일 전송 메서드 추가(JS)

Controller 메서드 추가

mailCheckGET 메서드 추가

중간확인

Leave a comment