블라인드 채용사이트 (3) - 프론트 정규식 및 백엔드 이메일 인증코드 부분 구현

24/02/06 (화)

1. 프론트 쪽에서 정규식 검증 진행 (정규식 담당 컴포넌트를 따로 만든 후 거기에서 true / false 반환)2. 메일 인증번호 발송 구현 (메일 송수신 확인 및 인증번호 확인)

 

 

어차피 이메일과 휴대전화번호는 이상하게 입력해도 인증번호가 검증해주기 때문에 빡빡하게는 유효성처리 안함

---

유효성검증 컴포넌트 구성

Redux 사용하려다 백엔드 쪽 비중을 두고 공부할 목적이라서 우선 Context로 검증에 필요한 Props들 처리

 

---

 

정규식에 필요한 양식들을 변수 선언

 

---

useEffect로 로직 실행

Input의 값들이 변경될 때 마다 로직 실행

useEffect에 유효성 검증 로직을 안하면 랜더링 되기 전에 검증로직이 실행되어 오류가 발생

---

이메일 인증 메일 발송 백엔드 부분

gradle 의존성 추가

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

---

구글메일로 할 예정이기 때문에 구글들어가서 smtp 부분 설정 후 메일관련 Config 자바 파일 생성

필요한 설정 관련 부분 넣어주고 민감한 정보들은 properites에 저장후 @Value 어노테이션으로 값 가져오기

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.JavaMailSenderImpl;

import java.util.Properties;

@Configuration
public class GoogleEmailConfig {

    @Value("${spring.mail.port}")
    private int port;

    @Value("${spring.mail.host}")
    private String host;

    @Value("${spring.mail.username}")
    private String userEmail;

    @Value("${spring.mail.password}")
    private String mailPassword;



    //JAVA MAILSENDER 인터페이스를 구현한 객체를 빈으로 등록하기 위함.
    @Bean
    public JavaMailSender mailSender(){

        JavaMailSenderImpl mailSender = new JavaMailSenderImpl(); //JavaMailSender 의 구현체를 생성하고
        mailSender.setHost(host); // 속성을 넣기 시작합니다. 이메일 전송에 사용할 SMTP 서버 호스트를 설정
        mailSender.setPort(port); // 587로 포트 지정
        mailSender.setUsername(userEmail); // 구글계정 넣기
        mailSender.setPassword(mailPassword); //구글 앱 비밀번호 넣기 / 암호 은닉화를 위해 @Value 어노테이션으로 properties에 정의된 암호를 가져옴

        Properties javaMailProperites = getJavaMailProperites();

        mailSender.setJavaMailProperties(javaMailProperites); // mailSender에 우리가 만든 properties 넣기

        return mailSender; // Bean으로 등록

    }

    private Properties getJavaMailProperites() {
        Properties javaMailProperites = new Properties(); // JavaMail의 속성을 설정하기 위해 Properties 객체를 생성
        javaMailProperites.put("mail.transport.protocol", "smtp"); // smtp 프로토콜 사용
        javaMailProperites.put("mail.smtp.auth", "true"); // smtp 서버에 인증이 필요
        javaMailProperites.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory"); // SSL 소켓 팩토리 클래스 사용
        javaMailProperites.put("mail.smtp.starttls.enable", "true"); // STARTTLS(TLS를 시작하는 명령)를 사용하여 암호화된 통신을 활성화
        javaMailProperites.put("mail.debug", "true"); // 디버깅 정보 출력
        javaMailProperites.put("mail.smtp.protocols", "TLSv1.2"); // 사용할 ssl 프로토콜 버전
        return javaMailProperites; // 설정 값을 return
    }

}

---

로직 부분 구현 

import jakarta.mail.MessagingException;
import jakarta.mail.internet.MimeMessage;
import lombok.RequiredArgsConstructor;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Service;
import java.util.Random;

@Service
@RequiredArgsConstructor
public class EmailService {

    private final JavaMailSender mailSender;
    private int authNumber; // 인증번호

    @Value("${spring.mail.port}")
    private int port;

    @Value("${spring.mail.host}")
    private String host;

    @Value("${spring.mail.username}")
    private String userEmail;

    @Value("${spring.mail.password}")
    private String mailPassword;

    // 임의의 인증번호 6자리 생성하기
    private void authNumberMaker() {
        Random random = new Random();
        authNumber = random.nextInt(900000) + 100000;
    }

    // mail을 어디서 어디로 보내는지, 인증 번호의 형식 (html) 형식으로 디자인해서 보낼지 작성
    public String joinEmail(String email) {
        authNumberMaker();
        String setFrom = userEmail; // 보내는 사람의 이메일
        String toMail = email; // 받는 사람의 이메일
        String title = "블라인드 픽 회원가입 인증 이메일 입니다."; // 이메일 제목
        String content = "블라인드 픽 회원가입 인증 번호입니다." + // 이메일 본문 (html 형식)
                "<br><br>" +
                "인증번호: " + authNumber + "입니다.";
        emailSend(setFrom, toMail, title, content);
        return Integer.toString(authNumber);

    }

    // 이메일 전송시키는 로직
    public void emailSend(String setFrom, String toMail, String title, String content) {
        MimeMessage message = mailSender.createMimeMessage();// JavaMailSender 객체를 사용하여 MimeMessage 객체를 생성
        try {
            // 이메일 메시지와 관련된 설정을 수행합니다.
            // true를 전달하여 multipart 형식의 메시지를 지원하고, "utf-8"을 전달하여 문자 인코딩을 설정
            MimeMessageHelper helper = new MimeMessageHelper(message, true, "utf-8");
            helper.setFrom(setFrom); // 이메일 발신자 주소
            helper.setTo(toMail); // 이메일 수신자 주소
            helper.setSubject(title); // 이메일 제목
            helper.setText(content, true); // 이메일 본문 , true로 설정해 html 설정으로 한다.
            mailSender.send(message);
        } catch (MessagingException e) {
            // 이메일 서버에 연결할 수 없거나, 잘못된 이메일 주소를 사용하거나, 인증 오류가 발생하는 등 오류
            // 이러한 경우 MessagingException이 발생
            e.printStackTrace();
        }

    }
}

 

 

---

메일 수신 확인

 

---

완성작업

1. 정규식 검증 로직 완성(프론트만)

2. 인증 메일 송수신 확인(인증번호 검증은 아직 x)

 

TODO

1. 메일 인증번호 검증 완성 시키기 

2. 휴대전화번호 인증 시스템 시작하기

3. 그리고 내 깃허브에 메일 관련 부분 정리해서 업로드 하기4. 블로그에 메일 관련 부분 정리해서 업로드 하기

---

 

참고 블로그: https://velog.io/@dionisos198/%EC%8A%A4%ED%94%84%EB%A7%81%EC%9C%BC%EB%A1%9C-%EC%9D%B4%EB%A9%94%EC%9D%BC-%EC%9D%B8%EC%A6%9D-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0#

velog