메일 서비스 만들기 with Google SMTP

1. Google SMTP 설정

2022 년 5 월 부터 변경이 되었기에, 아래 블로그를 참고하여 smtp 설정을 마쳐주세요!

Google Gmail STMP 사용을 위한 세팅

2. build.gradle

아래와 같이 dependency 를 추가해줍니다.

implementation 'org.springframework.boot:spring-boot-starter-mail'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

3. 메일 서비스의 흐름

메일 서비스의 흐름은 각자의 기능 요구사항에 따라 다르겠지만, 저의 경우는 아래와 같은 흐름으로 동작되도록 만들었습니다. 이는 회원가입시에 사용한 로직입니다.

3.1. 프론트에서의 이메일 입력 후 인증메일 전송 요청

3.2. 서버에서는 요청으로 받은 이메일로 메일 전송

• 해당 유저가 이미 존재하는지 확인
  • 존재하지 않는다면 이메일을 키로 하고, 인증번호를 생성하여 이를 값으로 redis 에 저장
    • 유효시간을 적절하게 설정합니다.
  • 존재한다면 이미 존재하는 유저임을 알리는 에러코드를 반환합니다.
• 시큐리티와 JWT 필터를 무시하도록 설정을 해줍니다.

3.3. 유저는 프론트에 인증번호를 입력후, 인증번호 검증 요청

3.4. 프론트에서의 요청값과 Redis 에 저장된 값을 토대로 검증 수행

• Redis 에 값이 없다면 유효기간이 지났기 때문에 다시 인증번호를 받아야 합니다.
• 값이 일치한다면 200 을 반환합니다.

4. 프론트에서의 메일 서비스

4.1. AuthenticationDto.ts

export interface authenticationRequest {
    email: string;
}

export interface authenticationValidateRequest {
    email: string;
    tempCode: string;
}

export interface signupRequest {
    email: string;
    password: string;
    nickname: string;
    birthday: Date
}
...

4.2. AuthenticationApi.ts

import {ref } from "vue";
import {
    authenticationRequest,
    authenticationValidateRequest,
    loginRequest,
    signupRequest
} from "../dto/AuthenticationDto.ts";
import axios from "axios";
import axiosInstance from "./AxiosInstance.ts";
import {useUserStore} from "../store/userStore.ts";

export const error = ref<String | null>(null);
const API_BASE_URL = 'http://localhost:8080/api/v1/auth';

export const authenticationMailSend = async (data: authenticationRequest) => {
    try {
        const response = await axios.post(`${API_BASE_URL}/signup/authentication/send`, data);
        return response;

    } catch (e: any) {
        return e.response;
    }
};

export const authenticationValidate = async (data: authenticationValidateRequest) => {
    try {
        const response = await axios.post(`${API_BASE_URL}/signup/authentication/check`, data);
        return response.status;

    } catch (e: any) {
        return e.response.status;
    }
};

export const signup = async (data: signupRequest)=> {
    try {
        const response = await axios.post(`${API_BASE_URL}/signup`, data);
        return response.status;

    } catch (e: any) {
        return e.response.status;
    }
};
...

4.3. SignupPage.vue

<template>
  <div class="background">
    <div class="white-box">
      <div class="signup-content">
        <div class="align-text">
          <div class="title">
            회원가입을 위해 <br>
            정보를 입력해주세요.
          </div>
        </div>
        <form @submit.prevent="handleSignup">
          <div class="form-item">
            <label for="email">이메일</label>
            <div class="align-contents">
              <input id="email" type="email" v-model="formValue.email" placeholder="이메일을 적어주세요." class="custom-input" />
              <button type="button" class="authentication-button" @click="handleEmailSend">이메일 인증</button>
            </div>
          </div>
          <div class="form-item">
            <label for="authCode">인증번호</label>
            <div class="align-contents">
              <input id=authCode type="password" v-model="code" placeholder="인증번호를 적어주세요." class="custom-input" :disabled="isCodeInputDisabled"/>
              <button type="button" class="authentication-button" @click="handleAuthValidate">인증 하기</button>
            </div>
          </div>
          ...
</template>

<script setup lang="ts">
import { authenticationMailSend, authenticationValidate, signup } from '../../api/AuthenticationApi.ts';
import { authenticationRequest, authenticationValidateRequest, signupRequest } from '../../dto/AuthenticationDto.ts';
import { ref, computed } from 'vue';
import { useMessage } from 'naive-ui';

import DatePicker from "../../components/DatePicker.vue";
import router from "@/router";

const formValue = ref({
  email: '',
  password: '',
  nickname: '',
  birthday: new Date()
});

const message = useMessage();

const code = ref('');
const isCodeInputDisabled = ref(true);
const isInputDisabled = ref(true);

const passwordPattern = /^[A-Za-z\d~!@#$%^&*()_\-+=\[\]{}|\\;:'",.<>?/]{8,20}$/;
const nicknamePattern = /^[a-zA-Z가-힣\d]+$/;

const passwordError = computed(() => {
  return passwordPattern.test(formValue.value.password) ? '' : '영문, 숫자, 특수문자를 사용하여 8-20 자로 만들어주세요.';
});

const nicknameError = computed(() => {
  return nicknamePattern.test(formValue.value.nickname) && formValue.value.nickname.length >= 2 && formValue.value.nickname.length <= 12
      ? ''
      : '닉네임은 2-12 글자로 만들수 있어요.';
});

const handleEmailSend = async () => {
  const data: authenticationRequest = {
    email: formValue.value.email,
  };

  const response = await authenticationMailSend (data);

  if (response.status === 200) {
    message.success("인증 번호가 담긴 메일을 발송 했어요.", {
      keepAliveOnHover: true
    });

    isCodeInputDisabled.value = false;

  } else if (response.status === 400) {
    if (response.data.errorCode === 'MAIL_01') {
      message.error("잘못된 이메일 형식이에요.", {
        keepAliveOnHover: true
      });

    } else if (response.data.errorCode === 'INVALID_VALUE_02') {
      message.warning("이미 존재하는 이메일이에요. 로그인 페이지로 이동할게요.", {
        keepAliveOnHover: true
      });

      await router.push('/login');
    }
  }
};

const handleAuthValidate = async () => {
  const data: authenticationValidateRequest = {
    email: formValue.value.email,
    tempCode: code.value,
  };

  const response = await authenticationValidate (data);

  if (response === 200) {
    message.success("이메일 인증이 완료 되었어요.", {
      keepAliveOnHover: true
    });

    isInputDisabled.value = false;

  } else {
    message.error("인증 번호를 다시 입력해주세요.", {
      keepAliveOnHover: true
    });
  }
};

...
</script>

<style scoped lang="scss">
...
</style>

5. 서버에서의 메일 서비스

5.1. application.yml

spring:
  ...
  
  mail:
    host: smtp.gmail.com
    port: 587
    username: ${GOOGLE_MAIL_USERNAME}
    password: ${GOOGLE_MAIL_PASSWORD}
    properties:
      mail:
        smtp:
          auth: true
          starttls:
            enable: true
        transport:
          protocol: smtp
        debug: true
...

5.2. RandomNumberUtil.java

import com.planner.travel.domain.user.repository.UserRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Component;

import java.util.Random;

@Component
@RequiredArgsConstructor
public class RandomNumberUtil {
	
		...
	
    public Long setTempCode() {
        Random random = new Random();
        long randomNumber = random.nextLong(900000) + 100000;
        return randomNumber;
    }
}

5.3. RedisUtil

import lombok.RequiredArgsConstructor;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.stereotype.Component;

import java.time.Duration;

@Component
@RequiredArgsConstructor
public class RedisUtil {
    private final StringRedisTemplate stringRedisTemplate;
    private ValueOperations<String, String> valueOperations;

    public String getData(String key) {
        valueOperations = stringRedisTemplate.opsForValue();
        return valueOperations.get(key);
    }

    public void setData(String key, String value) {
        valueOperations = stringRedisTemplate.opsForValue();
        valueOperations.set(key, value);
    }

    public void setDataWithExpire(String key, String value, Duration duration) {
        valueOperations = stringRedisTemplate.opsForValue();
        valueOperations.set(key, value, duration);
    }

    public void deleteData(String key) {
        stringRedisTemplate.delete(key);
    }
}

5.4. MailAuthenticationRequest.java

public record MailAuthenticationRequest (String email) {}

5.5. MailAuthenticationMessage.java

public record MailAuthenticaionMessage (
        String to,
        String subject
) { }

5.6. emailAuthentication.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<body>
<div style="margin:100px;">
    <h1> 안녕하세요.</h1>
    <h1> Travel planner 입니다. </h1>
    <br>
    <p> 아래 코드를 인증번호란에 입력해주세요.</p>
    <br>

    <div align="center" style="border:1px solid black; font-family:verdana,serif;">
        <h3 style="color:blue"> 회원가입 이메일 인증 코드 입니다. </h3>
        <div style="font-size:130%" th:text="${code}"> </div>
    </div>
    <br/>
</div>

</body>
</html>

5.7. MailService.java

import com.planner.travel.domain.user.repository.UserRepository;
import com.planner.travel.global.util.RandomNumberUtil;
import com.planner.travel.global.util.RedisUtil;
import com.planner.travel.global.util.mail.dto.MailAuthenticaionMessage;
import jakarta.mail.MessagingException;
import jakarta.mail.internet.MimeMessage;
import lombok.RequiredArgsConstructor;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Service;
import org.thymeleaf.context.Context;
import org.thymeleaf.spring6.SpringTemplateEngine;

import java.time.Duration;

@Service
@RequiredArgsConstructor
public class MailService {
    private final JavaMailSender javaMailSender;
    private final RandomNumberUtil randomNumberUtil;
    private final RedisUtil redisUtil;
    private final UserRepository userRepository;
    private final SpringTemplateEngine templateEngine;

    public String sendMailAuthenticationCode(MailAuthenticaionMessage message) throws MessagingException {
        validateUser(message.to());

        MimeMessage mimeMessage = javaMailSender.createMimeMessage();
        MimeMessageHelper messageHelper = new MimeMessageHelper(mimeMessage, false, "UTF-8");

        Long tempCode = randomNumberUtil.setTempCode();
        redisUtil.setDataWithExpire(message.to(), String.valueOf(tempCode), Duration.ofMinutes(5));

        messageHelper.setTo(message.to());
        messageHelper.setSubject(message.subject());
        messageHelper.setText(setContext(String.valueOf(tempCode)), true);
        javaMailSender.send(mimeMessage);

        return String.valueOf(tempCode);
    }

    public String setContext(String tempCode) {
        Context context = new Context();
        context.setVariable("code", tempCode);
        return templateEngine.process("emailAuthentication", context);
    }

    private void validateUser(String email) {
        userRepository.findByEmailAndProvider(email, "basic")
                .ifPresent(u -> {
                    throw new IllegalArgumentException();
                });
    }
}

5.8. SpringConfiguration.java

import com.planner.travel.global.auth.oauth.handler.OAuth2AuthenticationSuccessHandler;
import com.planner.travel.global.auth.oauth.service.CustomOAuth2UserService;
import com.planner.travel.global.jwt.JWTAuthenticationFilter;
import com.planner.travel.global.jwt.token.TokenAuthenticator;
import com.planner.travel.global.jwt.token.TokenExtractor;
import com.planner.travel.global.jwt.token.TokenValidator;
import lombok.RequiredArgsConstructor;
import org.springframework.boot.autoconfigure.security.servlet.PathRequest;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.config.annotation.authentication.configuration.AuthenticationConfiguration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
import org.springframework.security.config.http.SessionCreationPolicy;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfiguration {
    private final CustomUserDetailsService customUserDetailsService;
    private final AuthenticationConfiguration authenticationConfiguration;
    private final TokenExtractor tokenExtractor;
    private final TokenValidator tokenValidator;
    private final TokenAuthenticator tokenAuthenticator;
    private final CustomAuthenticationEntryPoint customAuthenticationEntryPoint;
    private final CustomOAuth2UserService customOAuth2UserService;
    private final OAuth2AuthenticationSuccessHandler oAuth2AuthenticationSuccessHandler;

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity httpSecurity) throws Exception {
        httpSecurity
                .csrf(AbstractHttpConfigurer::disable)
                .cors(cors -> {})
                .authorizeHttpRequests((authorizeRequest) ->
                        authorizeRequest
                                .requestMatchers(HttpMethod.OPTIONS, "/**").permitAll()
                                **.requestMatchers("/api/v1/auth/**").permitAll() // 여기서 pass 하도록 설정**
                                .requestMatchers("/oauth/**").permitAll()
                                .requestMatchers("/api/v1/oauth/**").permitAll()
                                .requestMatchers("/api/v1/auth/token/**").permitAll()
                                .requestMatchers("/docs/**").permitAll()
                                .requestMatchers("/ws/**").permitAll()
                                .requestMatchers("/favicon.ico/**").permitAll()
                                .requestMatchers("/error").permitAll()
                                .requestMatchers(PathRequest.toStaticResources().atCommonLocations()).permitAll()
                                .anyRequest().authenticated()
                )
                .formLogin(AbstractHttpConfigurer::disable)
                .sessionManagement((sessionManagement) ->
                        sessionManagement
                                .sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                )
                .exceptionHandling((exception) ->
                        exception
                                .authenticationEntryPoint(customAuthenticationEntryPoint)
                )
                .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class)
                .addFilterBefore(customAuthenticationFilter(), JWTAuthenticationFilter.class);

        httpSecurity
                .oauth2Login(oauth2 -> oauth2
                        .authorizationEndpoint(authorization -> authorization
                                .baseUri("/api/v1/oauth/authorize")
                        )
                        .redirectionEndpoint(redirection -> redirection
                                .baseUri("/oauth/callback")
                        )
                        .userInfoEndpoint(userInfo -> userInfo
                                .userService(customOAuth2UserService)
                        )
                        .successHandler(oAuth2AuthenticationSuccessHandler)
                );

        return httpSecurity.build();
    }

    // CORS 설정
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();

        config.setAllowCredentials(true);
        config.addAllowedOriginPattern("*");
        config.addExposedHeader("Authorization");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);

        return new CorsFilter(source);
    }

    // Custom Bean
    @Bean
    public BCryptPasswordEncoder bCryptPasswordEncoder() {
        return new BCryptPasswordEncoder();
    }

    @Bean
    public CustomAuthenticationFilter customAuthenticationFilter() throws Exception {
        CustomAuthenticationFilter customAuthenticationFilter = new CustomAuthenticationFilter(authenticationManager());
        customAuthenticationFilter.afterPropertiesSet();
        return customAuthenticationFilter;
    }

    @Bean
    public AuthenticationManager authenticationManager() throws Exception {
        return authenticationConfiguration.getAuthenticationManager();
    }

    @Bean
    public CustomAuthenticationProvider customAuthenticationProvider() {
        return new CustomAuthenticationProvider(customUserDetailsService, bCryptPasswordEncoder());
    }

    @Bean
    public JWTAuthenticationFilter jwtAuthenticationFilter() {
        return new JWTAuthenticationFilter(tokenExtractor, tokenValidator, tokenAuthenticator);
    }
}

5.9. JWTAuthenticationFilter.java

import com.planner.travel.global.jwt.token.TokenAuthenticator;
import com.planner.travel.global.jwt.token.TokenExtractor;
import com.planner.travel.global.jwt.token.TokenValidator;
import io.jsonwebtoken.ExpiredJwtException;
import jakarta.servlet.FilterChain;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;
import org.jetbrains.annotations.NotNull;
import org.springframework.http.HttpStatus;
import org.springframework.web.filter.OncePerRequestFilter;

import java.io.IOException;

@RequiredArgsConstructor
public class JWTAuthenticationFilter extends OncePerRequestFilter {
    private final TokenExtractor tokenExtractor;
    private final TokenValidator tokenValidator;
    private final TokenAuthenticator tokenAuthenticator;

    @Override
    protected void doFilterInternal(HttpServletRequest request, @NotNull HttpServletResponse response,
                                    @NotNull FilterChain filterChain) throws ServletException, IOException {

        String requestURI = request.getRequestURI();

        if (requestURI.startsWith("/api/v1/auth/signup") || // 여기서 pass 하도록 설정
                requestURI.equals("/api/v1/auth/login") ||
                requestURI.equals("/api/v1/auth/logout") ||
                requestURI.startsWith("/api/v1/auth/token") ||
                requestURI.startsWith("/api/v1/oauth") ||
                requestURI.startsWith("/ws") ||
                requestURI.startsWith("/docs") ||
                requestURI.startsWith("/oauth") ||
                requestURI.startsWith("/favicon.ico")
        ) {
            filterChain.doFilter(request, response);
            return;
        }

        String accessToken = tokenExtractor.getAccessTokenFromHeader(request);

        if (accessToken != null) {
            try {
                tokenValidator.validateAccessToken(accessToken);
                tokenAuthenticator.getAuthenticationUsingToken(accessToken);

            } catch (ExpiredJwtException e) {
                response.setStatus(HttpStatus.UNAUTHORIZED.value());
                setResponse(response, "TOKEN_01");

                return;
            }
        }

        filterChain.doFilter(request, response);
    }

    private void setResponse(HttpServletResponse response, String errorCode) throws IOException {
        response.setContentType("application/json;charset=UTF-8");
        response.getWriter().println(
                "{\"errorCode\" : \"" + errorCode + "\"}"
        );
    }
}

5.10. MailController.java

import com.planner.travel.global.util.mail.dto.MailAuthenticaionMessage;
import com.planner.travel.global.util.mail.dto.request.MailAuthenticationRequest;
import com.planner.travel.global.util.mail.service.MailService;
import jakarta.mail.MessagingException;
import lombok.RequiredArgsConstructor;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequiredArgsConstructor
@RequestMapping("/api/v1/auth/signup")
public class MailController {
    private final MailService mailService;

    @PostMapping("/authentication/send")
    public ResponseEntity<?> sendAuthenticationEmail(@RequestBody MailAuthenticationRequest request) throws MessagingException {
        MailAuthenticaionMessage mailAuthenticaionMessage = new MailAuthenticaionMessage(
                request.email(),
                "[travel-planner] 이메일 인증 코드 입니다."
        );

        String tempCode = mailService.sendMailAuthenticationCode(mailAuthenticaionMessage);
        return ResponseEntity.ok(tempCode);
    }
}

6. 결과

위와같이 메일 서비스를 작성하면 아래와 같이 메일이 옵니다.