[Spring boot] Rest Api + Vue.js를 이용한 SMTP 초 간단 이메일 인증 구현

일단 냅다 결과물 보여주기~~~ 

 

SMTP를 이용한 이메일 인증 구현! 인터넷을 찾던 중 다들 서비스 + 컨트롤러 + config 파일 등등 생각보다 복잡한 방법을 쓰면서 구현 하길래 낙담하고 있던 와중에 친구가 도와줘서 구현 완료 된 이메일 인증! 아주 아주 간단한 이메일 인증을 구현 할 수 있다. 단지 Controller의 메소드 하나로... 미쳤다....

 

 

SMTP란? 

Simple Mail Transfer Protocol (간이 우편 전송 프로토콜) 로 이메일을 송수신하는 서버라고 할 수 있다. 

자세한 내용은 아래 글을 통해 알 수 있다! 

 

pom.xml 

우선 개발환경이 Spring boot Maven 을 사용하고 있음으로 pom.xml에 SMTP 송수신이 가능한 의존성을 주입해 준다. 

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-mail</artifactId>
</dependency>

 

application.properties

메일 호스트마다 메일 포트가 다름으로 이용하고 싶은 이메일에 맞는 포트번호를 사용하면 된다. 

#mail
spring.mail.host=smtp.gmail.com
spring.mail.port=587
spring.mail.username=이메일을 보낼 G메일 입력 
spring.mail.password=2단계 인증을 통해 얻은 키 값 
spring.mail.properties.mail.smtp.auth=true //이메일 서버에 인증 요구
spring.mail.properties.mail.smtp.starttls.enable=true //암호화된 연결을 활성화. STARTTLS는 이메일 전송 중에 보안 계층을 추가하여 데이터의 기밀성을 보호
spring.mail.properties.mail.smtp.connectiontimeout=18000 //SMTP 서버에 대한 연결 시도 시, 연결 제한 시간 설정
spring.mail.properties.mail.smtp.timeout=18000 //SMTP 서버와의 통신 시간 제한 설정
spring.mail.properties.mail.smtp.writetimeout=18000 //SMTP 서버에 데이터를 전송하는 시간 제한 설정

여기서 저 mail.password 에 메일의 진짜 비밀번호를 치는거 아니다... 내가 그랬어서 미리 말한다.. 진짜.. 아니다.. 절대 작동 안한다.. ㅠ ㅠ 2단계 인증을 통해 발급 받은 키를 써주는것이다... 2단계 인증 후 앱 비밀번호 받는 건 아래의 포스팅에 자세하게 적어 두었다! 

[SMTP] Gmail을 이용한 초 간단 이메일 인증 구현 - 비밀번호 발급

 

@Autowired 추가 

 JavaMailSender 는 MailSender 인터페이스를 상속받은 것으로 자바에서 지원해 준다. 

@Autowired
private JavaMailSender javaMailSender;

 

@RestController 작성 

아주 간단한단 이메일 인증을 한다고 했으니 다른 패키지를 열어서 뭐 하고 그런 것도 없이 그냥 Member 테이블에 컨트롤러 하나로 끝내겠다! 

 

@ResponseBody
	@PostMapping("/email")
	public Map email(String email) {
		Map map = new HashMap<>();
		MemberDto dto = service.getMember(email);
        
		if (dto != null) {
			map.put("exist", "이미 존재하는 이메일입니다.");
		} else {
			Random random = new Random(); // 난수 생성을 위한 랜덤 클래스
			String key = ""; // 인증번호 담을 String key 변수 생성
            
			SimpleMailMessage message = new SimpleMailMessage(); // 이메일 제목, 내용 작업 메서드
			message.setTo(email); // 스크립트에서 보낸 메일을 받을 사용자 이메일 주소
			
			// 입력 키를 위한 난수 생성 코드 
			for (int i = 0; i < 3; i++) {
				int index = random.nextInt(26) + 65;
				key += (char) index;
			}
			for (int i = 0; i < 6; i++) {
				int numIndex = random.nextInt(10);
				key += numIndex;
			}
			
			String mail = "\n Plantiful 회원가입 이메일 인증.";
			message.setSubject("회원가입을 위한 이메일 인증번호 메일입니다."); // 이메일 제목
			message.setText("인증번호는 " + key + " 입니다." + mail); // 이메일 내용
			
            try {
				mailSenderImpl.send(message);
			} catch (Exception e) {
				e.printStackTrace();
			}
			map.put("key", key);
			map.put("dto", dto);
		}
		return map;
	}

 

컨트롤러를 작성하다가 위기에 봉착했다. 

그 이유는 내 컴퓨터에서 보낼 때는 메일이 잘만 보내지더니 다른 팀원들하고 공유를하니 이런 오류가 뜨기 시작하고 아무리 찾아도 이게 어디서 나오는 오류인지 모르겠는거다..  application.properties에 작성한 STARTTLS 오류 없는데!! ㅠㅠ 

com.sun.mail.smtp.SMTPSendFailedException: 530 5.7.0 Must issue a STARTTLS command first. 
pf18-20020a17090b1d9200b0024e33c69ee5sm2527890pjb.5 - gsmtp

 

그러다가 그렇다면 application.properties에 작성한게 적용이 안되는게 아닐까? 하는 팀원의 의견대로 아예 그냥 컨트롤러에 선언 해 주었더니 농락하냐.. 너무 잘 작동 되더라...ㅎ ㅎ 

JavaMailSenderImpl mailSenderImpl = new JavaMailSenderImpl();
		Properties prop = new Properties();
		mailSenderImpl.setHost("smtp.gmail.com");
		mailSenderImpl.setPort(587);
		mailSenderImpl.setUsername("applicaion.properties에 입력한 지메일 입력");
		mailSenderImpl.setPassword("2단계 인증 후 받은 앱  비밀번호 입력");
		prop.put("mail.smtp.auth", true);
		prop.put("mail.smtp.starttls.enable", true);
        
		mailSenderImpl.setJavaMailProperties(prop);

 

그래서 혹시! com.sun.mail.smtp.SMTPSendFailedException: 530  이런 오류를 만난다면 냅다 JavaMailSenderImpl 를 컨트롤러의 메서드 안에 선언 후 재정의 해주면 해결이 잘 될 것이다. 

 

 

vue.js 

<template>
    <h2 class="fw-bold mb-2" style="color:#4A5157">회원가입</h2>
    <br />
    <div class="form-outline form-white mb-4">
        <input type="text" v-model="email" class="form-control form-control-lg" placeholder="email" />
        <button class="btn btn-primary btn-sm" style=" color :#4A5157 ;border: none; background-color: white;"
            v-on:click="sendEmail">이메일인증</button>
    </div>
    <div class="form-outline form-white mb-4">
        <input type="text" class="form-control form-control-lg" placeholder="인증번호를 입력!" @input="updateEmailCheck" />
        <button class="btn btn-primary btn-sm" style=" color :#4A5157 ;border: none; background-color: white;"
            v-on:click="emailcheck">확인</button>
    </div>
    <button class="btn btn-primary btn-lg" style="color :#4A5157; border: none; background-color: white;"
        v-on:click="join" v-show="isVisible">join</button>
</template>

<script>
    export default {
        name: 'join',
        data() {
            return {
                email: '',
                pwd: '',
                nickname: '',
                phone: '',
                echeck: '',
                isVisible: false
            }
        },
        methods: {
            sendEmail() {
                const self = this;
                if (this.email == '') {
                    alert('이메일을 입력해주세요')
                } else {
                    const form = new FormData();
                    form.append('email', self.email);
                    self.$axios.post('주소', form)
                        .then(function (res) {
                            if (res.data.exist) {
                                alert(res.data.exist)
                            } else if (res.status == 200) {
                                alert('이메일이 발송되었습니다');
                                const key = res.data.key;
                                alert(key);
                                self.emailKey = key; // 서버에서 받은 인증 키 값을 저장
                            } else {
                                alert('잘못된 이메일입니다');
                            }
                        })
                }
            },

            updateEmailCheck(event) {
                this.echeck = event.target.value;
            },

            emailcheck() {
                const self = this;
                if (self.echeck === self.emailKey) {
                    alert('확인 완료');
                    this.isVisible = true;
                } else {
                    alert('인증번호가 일치하지 않습니다.');
                }
            }
        }
    }
</script>

 

작동 순서 

1. sendEmail 클릭 함수를 이용해 $axios로 back 단에 이메일 전송을 보낸다.

2. 인증이 온 코드를 입력하면 @input="updateEmailCheck" 함수 발동으로 this.echeck = event.target.value; 입력한 값이 echeck에 할당 된다. 

3. 확인을 누르면 클릭이벤트 emailcheck 가  1에서 얻어온 self.emailKey = key 와 echeck를 비교하여 같다면 

4. v-show="isVisible" 의 false여서 보이지 않았던  Join 버튼을 true 로 바꿔주고 화면에 보여준다. 

5. 나머지 값을 입력하고 조인을 누르면 끝! 

 

 

응용편+ 

비밀번호 찾기~~~