[포스코x코딩온] 웹개발자 풀스택 부트캠프8기

nodemail을 활용한 이메일 인증 보내기

항상 발전하는 개발자 2023. 9. 11. 21:18
728x90

nodemail을 활용하여 회원가입 시 본인 인증으로 사용할 수 있는 이메일 인증

프로젝트 진행 중에 회원가입 기능을 구현하였는데 만들고 나니 본인인증 없이 회원가입을 하는 게 이상하다는 것을 알게 되었고 본인인증을 위해 이메일을 보내서 인증 번호를 확인하는 기능을 추가하였다.

 

Nodemailer

Nodemailer는 Node.js에서 이메일을 쉽게 보낼 수 있도록 하는 모듈이다.

높은 보안성
원도우 지원 및 npm으로 설치 가능
HTML content와 Plain text 사용 가능
메시지에 다양한 첨부 기능
HTML 콘텐츠에 이미지 포함 기능
TLS/STARTTLS 보안 발송
SMTP 외에 다양한 전송 방식
메시지 조작을 위한 커스텀 플러그인 지원
OAuth2 인증 지원
ES6 코드

설치

npm install nodemailer

이메일 인증

보내는 이메일을 사용하기 위해서 구글 계정에서 2단계 인증을 해줘야 한다.

인증 방법은 아래 링크를 참조하면 된다.

https://www.cckn.dev/dev/2000-9-nodemailer/

.env 파일 생성

위에서 받아온 키와 사용할 아이디를 환경변수로 설정하여 git에 올리지 않도록 조심하자!

NODEMAILER_USER="사용할 이메일"
NODEMAILER_PASS="키 값"

구현 순서

  1. 사용자에게 이메일을 받는다.
  2. 서버에서 사용자의 이메일로 메일을 보낸다.
  3. 사용자가 인증번호를 입력하고 똑같은지 확인한다.

1. 화면 구성

          <div class="emailBox">
            <form id="emailForm">
              <img src="/public/img/email.svg" class="emailImg" />
              <input
                type="email"
                id="email"
                class="email"
                placeholder="이메일"
              />

              <button
                type="button"
                class="emailsubmit"
                onclick="sendEmailVerification()"
              >
                전송
              </button>
            </form>
          </div>
          <div class="emailCheckBox">
            <img
              src="/public/img/cancel.svg"
              class="emailCheckImg"
              id="emailCheckImg"
            />
            <input
              type="number"
              id="emailCheck"
              class="emailCheck"
              placeholder="인증번호"
            />
            <button
              type="button"
              class="emailCheckSubmit"
              onclick="emailCheckSubmit()"
            >
              확인
            </button>
          </div>
  • input 타입을 email로 설정하여 email의 기본 구조가 입력될 수 있게 설정

2. 사용자 이메일 주소 서버로 전달

    //이메일 인증하기
    async function sendEmailVerification(event) {
      const emailInput = document.getElementById("email");
      const emailSubmitButton = document.querySelector(".emailsubmit");
      const email = emailInput.value;
      //유효성 검사
      if (!isValidEmail(email)) {
        alert("올바른 이메일 주소를 입력하세요.");
        return;
      } else {
        const res = await axios.post("signup/EmailAuthentication", {
          email: email,
        });
        alert("인증번호를 이메일로 발송하였습니다.");
        console.log("payload", res.data.payload);
        savedPayload = res.data.payload;
      }
    }
    // 간단한 이메일 유효성 검사 함수
    function isValidEmail(email) {
      const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
      return emailPattern.test(email);
    }
  • isValidEmail 함수를 통해 이메일 유효성 검사를 한다.
  • axios를 통해 서버로 사용자 이메일을 보낸다.

3. 받아온 이메일로 난수를 보낸다.

exports.EmailAuthentication = async (req, res) => {
  const { email } = req.body;
  if (email) {
    const payload = Math.floor(100000 + Math.random() * 900000) + ""; //난수 설정
    let transporter = nodemailer.createTransport({
      service: "gmail", //Gmail 이용
      auth: { //보내는 사용자 정보 입력
        user: process.env.NODEMAILER_USER, 
        pass: process.env.NODEMAILER_PASS,
      },
    });
    let mailOptions = { //보낼 메시지 내용 입력
      from: process.env.NODEMAILER_USER, 
      to: email, //프론트에서 받아온 이메일로 보낸다.
      subject: "하우스 파티 인증 메일",
      text: `하우스 파티 인증 번호는 ${payload} 입니다. 3분내로 입력해주세요.`,
    };
    transporter.sendMail(mailOptions, function (error, info) {
      if (error) {
        console.log(error);
      } else {
        res.json({ payload: payload }); 
        console.log("Email sent:" + info.response);
      }
    });
  }
};

이렇게 메일이 오는 것을 확인할 수 있다.

4. 프론트에서 인증번호 체크

//인증번호 체크
    function emailCheckSubmit(payload) {
      const emailCheck = document.getElementById("emailCheck").value;
      const emailCheckImg = document.getElementById("emailCheckImg");
      console.log("이메일 체크", savedPayload);
      if (emailCheck === savedPayload) {
        alert("본인 인증을 완료하였습니다.");
        sessionStorage.setItem("emailCheck", true);
        emailCheckImg.src = "/public/img/check.svg";
      } else {
        alert("인증번호가 틀립니다.");
      }
    }

이메일을 통해 간단한 본인인증을 구현하였습니다. 예전에는 처음 해보는 기능에 대해 공부하고 습득하는데 시간이 걸렸는데 코드 구조나 메커니즘을 이해하고 새로운 기능을 적용시켜 보니 점점 기능 적용이 빨라지고 있다는 것을 느끼는 시간이었습니다. 

728x90