[Pumble/Node.js] nodemailer와 node-cache로 이메일 인증 구현하기(1)

✍️ 서론

Pumble 회원 가입 페이지 일부

Pumble은 로컬 회원가입 과정에서 다음과 같이 사용자의 메일로 인증 번호를 전송하고 이를 검증한다.

이를 위해 인증 메일 전송/인증 코드 검증을 구현하고자 했다.

 

👾 목표

1. 6자리의 인증코드를 생성하여, 이를 사용자 메일 주소에 전송한다.

2. 인증코드는 일정 시간동안만 보관한다.

3. 사용자가 입력한 코드와 저장해두었던 인증코드가 동일한지 확인한다.

4. 동일하다면 회원가입 절차로 넘어간다.

 

 

☘️ 진행

이번엔 메일을 보내는 것까지 포스팅할 예정이다.

1. Gmail IMAP 허용

먼저 인증 메일을 보내고자 하는 주소의 설정에서 IMAP을 허용하도록 한다.

 

Gmail로 들어가 우측 상단의 설정을 누른다.

 

설정을 누르면 나오는 Quick settings에서 `See all settings`를 선택한다.

 

`Fowarding and POP/IMAP` 탭에서 Enable IMAP을 선택한 뒤 Save Changes로 이를 저장한다.

 

2. App Password 설정

Gmail로 SMTP를 사용하기 위해선 App Password를 설정해야한다.

App Password란 보안 수준이 낮은 앱 또는 기기에 Google 계정에 대한 액세스 권한을 부여하는 16자리 비밀번호이다.

이를 설정하기 위해선 2단계 인증이 우선시 되어야 한다.

 

2단계 인증이 되어 있지 않다면 `구글 계정 관리 > 보안`에서 2단계 인증을 설정한다.

 

앱 비밀번호를 생성하기 위해 검색창에 앱 비밀번호(영문이라면 App Password)를 검색한다.

분명 버튼을 눌러서 넘어가는 방법도 있을 것 같은데 나는 못 찾았다😅

(혹시 아시는 분 계시면 댓글 남겨주세요! 추가하겠습니다.)

 

App password 페이지에서 App Password의 이름을 입력한 후 Create를 누르면 앱 비밀번호가 생성된다.

이 비밀번호는 다시 조회할 수 없기 때문에 복사하여 안전한 곳에 저장해야 한다. 물론 나는 그냥 메모장에 복사했다ㅎ

 

3. nodemailer 설치 및 설정

프로젝트 외부에 해야할 설정을 마쳤으니 이제 프로젝트 안에서의 설정을 해야할 차례다.

 

설치

npm install --save nodemailer

 

SMTP Transport 설정

import nodemailer from "nodemailer"

export const smtpTransport = nodemailer.createTransport({
    service: 'gmail', //사용할 서비스
    auth: {
        user: '{나의 메일}@gmail.com',
        pass: 'abcd efgh ijkl mnop'
    },
    tls: {
        rejectUnauthorized: false
    }
})

npm을 통해 nodemailer를 설치하고 SMTP Transport를 설정한다.

auth.pass에 아까 발급받은 App password를 입력한다. 유출된다고 안 되니 .env에 넣는게 좋을 것 같다.

나는 이걸 생각을 못하고 냅다 Github에 올려버려서 App password를 다시 발급받았다🫠

 

MESSAGE CONFIGURATION

const mailOption = {
    from: "송신자 메일 주소",
    to: "수신자 메일 주소",
    subject: "메일 제목",
    html: "html 형식의 메일 내용",
    text: "txt 형식의 메일 내용",
    attachment: ["다양한 파일의 배열"]
}

Command Configuration은 다음과 같다. 이 밖에도 다양한 필드가 있으다.(링크)

 

4. node-cache 설치

설치

npm install --save node-cache

node-cache는 node.js에서 사용할 수 있는 메모리 캐시 모듈이다.

10분만 저장했다가 폐기해야하는 인증코드를 굳이 DB에 저장하고 싶지 않아서 이를 선택했다.

또 ttl을 설정할 수 있어서 더 간편하게 구현이 가능할 것 같아 사용했다.

 

5. 인증번호 생성 및 전송

export const sendVerificationCodeService = async (body) => {
    const email = body.email
    const code = Math.floor(Math.random() * (999999 - 111111 + 1)) + 111111

    const mailOption = {
        from: "sender@example.com",
        to: email,
        subject: "[Pumble] 인증코드를 확인해주세요.",
        html: `<p>귀하의 이메일 주소를 통해 인증번호가 요청되었습니다. Pumble 인증 코드는 다음과 같습니다.</p><br><strong>${code}</strong><br><br><p>해당 코드는 10분 뒤 만료됩니다.<br>Pumble 운영팀</p>`
    }

    if (email) {
        try {
            await new Promise((resolve, reject) => {
                smtpTransport.sendMail(mailOption, (error, response) => {
                    if (error) {
                        console.log(error);
                        smtpTransport.close();
                        reject(new BaseError(status.SENDING_ERROR)); // 에러 발생 시 reject
                    } else {
                        console.log(response);
                        resolve(response); // 성공 시 resolve
                    }
                });
            });

            // 성공적으로 메일을 보냈다면 캐시에 저장
            cache.set(`Code-${email}`, code, 600);
            smtpTransport.close();
            return "인증코드가 전송되었습니다.";
        } catch (error) {
            throw new BaseError(status.SENDING_ERROR);
        }
    }
}

Request Body를 통해 받은 email을 수신자로 설정하고 6자리 숫자로 이루어진 랜덤한 인증 코드를 생성한다.

email 값이 있을 때 mailOption에 메일 옵션 값을 지정하고, smtpTransport.sendMail(옵션, 콜백함수)를 설정한다.

메일이 성공적으로 전송된다면 node-cache에 10분간 인증코드를 저장한다.

 

이제 sendVerificationCodeService 함수를 호출하면 수신자 메일 주소로 인증메일이 전송될 것이다.

 

 

⭐️ 결과

요청한 메일주소로 인증메일이 잘 오는 것을 확인할 수 있다!

 

 

🧐 느낀점

처음에 기능 구현을 떠올릴 땐 뭔가 어려워보여서 막막했는데 라이브러리가 잘 되어 있어서 생각보다 쉽게 구현이 가능했다.

정확히 어떤 원리로 메일이 보내지는 건진 모르겠지만 내 메일 주소에서 내가 지정한 메일주소로 메일이 가는 것이 신기했다.

 

 

🔗 참고

node-cache

 

Nodemailer :: Nodemailer

 

앱 비밀번호로 로그인 - Google 계정 고객센터