[spring+vue]인증 링크 메일 전송 시스템(1)

0. 개요
1. google smtp 설정
2. test 메일 보내기

0. 개요

인증 메일 시스템을 만드려는데 먼저 두가지 방법을 고려했었다.
첫째는, 인증 번호 입력 시스템 / 두번째는 인증 링크 클릭
둘 중에 후자로 선택.

로직 순서는
1) 사용자가 이메일을 입력 후 인증 하기 버튼 누름
2) DB에 사용자의 {이메일, 토큰, 만료 시간}이 저장됨과 동시에 사용자에게 인증 링크가 담긴 메일이 전송됨
3) 사용자가 만료시간 이전에 링크를 누를 경우, 성공적으로 member 테이블(인증이 성공한 사용자의 이메일만 모아둔 테이블)에 사용자의 이메일이 등록됨

이번 글에서는 google smtp 설정과 이를 활용하여 간단한 메일을 보내는 단계만 진행해 보도록 하겠다.

1. google smtp 설정

spring boot 프로젝트 설정

사용한 스프링 설정은 아래와 같습니다.

설정 바로 다운로드

google smtp 설정

구글 로그인 하신 후 > 프로필 사진을 누르면 나오는 "google 계정 관리"> 검색창에 "앱 비밀번호"

※이때, 구글 2차 인증이 활성화 된 상태여야 앱비밀번호를 설정할 수 있습니다. 2차 인증이 비활성화이신 분들은 활성화 후 진행

앱 이름을 정해 주고 만들기

비밀번호 16자리는 처음 만들때만 보여주니 어디 잘 적어두도록
하지만 잃어버렷다면 삭제하고 다시 만들 수 있으니 너무 걱정하지는 말자

앱 비밀번호는 실제 내 구글 계정 비밀번호 대신에 google 계정에 접근하는 권한을 가진 아이다.
그러니 다른 사람에게는 노출되지 않도록 하자

application.properties 파일에 아래 내용을 작성해 주면 smtp 설정은 끝이다.

#smtp 설정 {안에 본인 설정 적기} 
spring.mail.host=smtp.gmail.com
spring.mail.port=587
spring.mail.username= {구글 ID}@gmail.com
spring.mail.password= {앱 비밀번호 16자}
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.timeout=5000
spring.mail.properties.mail.smtp.starttls.enable=true

2. test 메일 보내기

spring+vue 프로젝트를 잘 모른다면 아래 블로그 참고

Spring+vue 프로젝트 만들기
[vue/spring] axios로 프론트와 백엔드 연결하기

기본 vue 페이지에서 about.vue만 바꿔서 테스트 해볼 것이다.

about.vue

※ vue 프로젝트에 작성하기
버튼을 누르면 아래 to에 있는 이메일로 subject의 제목과 text의 내용으로 메일이 가는 코드이다.

<template>
  <div class="about">
    <div>
      <button @click="sendEmail">이메일 보내기</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    sendEmail() {
      axios.post('http://localhost:8080/sendEmail', {
        to: '{메일을 받아볼 사용자 ID}@gmail.com',
        subject: 'test제목',
        text: 'test 내용'
      })
          .then(response => {
            console.log('이메일이 성공적으로 전송되었습니다.');
          })
          .catch(error => {
            console.error('이메일 전송 중 오류가 발생했습니다:', error);
          });
    }
  }
}
</script>

WebController.java

※ 여기부터는 spring 프로젝트에 작성

import com.mail.authapp.domain.EmailRequest;
import com.mail.authapp.service.MailService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@CrossOrigin(origins = "http://localhost:8081")
@RestController
public class WebContoroller {

    @Autowired
    private MailService mailService;

    @PostMapping("/sendEmail")
    public void sendEmail(@RequestBody EmailRequest emailRequest){
        System.out.println(emailRequest.getTo());
        mailService.sendEmail(emailRequest.getTo(), emailRequest.getSubject(), emailRequest.getText());
    }
}

MailService.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.stereotype.Service;

@Service
public class MailService {
    @Autowired
    private JavaMailSender emailSender;

    public void sendEmail(String to, String subject, String text) {
        SimpleMailMessage message = new SimpleMailMessage();
        message.setTo(to);
        message.setSubject(subject);
        message.setText(text);
        emailSender.send(message);
    }
}

EmailRequest.java

import lombok.Data;

@Data
public class EmailRequest {
    private String to;
    private String subject;
    private String text;
}

스프링과 vue 서버를 기동시킨후 버튼을 누르면 간단한 테스트 메일이 전송되는 것을 확인 할 수 있다.