귤마켓 인증번호 구현(TWILIO, SENDGRID, nodeMailer)

💬 귤마켓 인증번호 구현 흐름

📑 1. pages/enter: 사용자 데이터 전송
📑 2. api/users/enter: API 요청 처리

TWILIO: sms 인증구현을 도와주는 플랫폼
SENDGRID: 메일 인증구현을 도와주는 플랫폼 (회원가입이 어렵다.)
nodeMailer: 메일 인증구현을 도와주는 노드모듈 (비교적 쉬움)

---

📑 1. pages/enter

// (간략하게 함)

const { register, handleSubmit } = useForm<IEnterForm>();

// API 요청 함수 (실제 코드는 useMt.tsx가 대신함)
const onValid = (dataForm: IEnterForm) => {
	fetch("api/users/enter", {
      method: "POST",
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json",
      },
    }
}

return (
  <form onSubmit={handleSubmit(onValid)}>
  	<input /> // email or phone
  	<button />
  </form>
);

---

📑 2-1. api/users/enter (with TWILIO)

1. 📦 npm i twilio (TWILIO 모듈 설치)
2. TWILIO 사이트 가입 및 계정 생성

TWILIO_SID: 메인 페이지 Account SID
TWILIO_TOKEN: 메인 페이지 Auth Token
TWILIO_MSGID: 메세지 서비스 SID
MY_P: +82를 붙인 내 전화번호

import twilio from "twilio";

const {
  TWILIO_SID,
  TWILIO_TOKEN,
  TWILIO_MSGID,
  MY_P,
} = process.env;

// enter.tsx 부터 받은 사용자 데이터
const { email, phone } = req.body;

// 랜덤 인증번호
const payload = String(Math.random()).substring(2, 8); 

// twilio 연결 (for sms)
const twilioClient = twilio(TWILIO_SID, TWILIO_TOKEN);

if (phone) {
	  await twilioClient.messages.create({
      messagingServiceSid: TWILIO_MSGID,
      to: MY_P!, // 실제 서비스시, phone 변수가 들어가야 함
      body: `귤마켓 인증 요청입니다. 인증번호: ${payload} 🍊`,
    });
  }

---

📑 2-2. api/users/enter (with nodeMailer)

sendgrid 사용하려다가 가입절차가 너무 까다로워서 인증받기 전까지 nodeMailer를 사용해보았다.

실제 프로젝트에선
libs/server/nodeMailer, pages/api/users/enter에서 사용하였다.

1. 📦 npm install --save nodemailer @types/nodemailer
모듈 설치

2. 📦 네이버 메일 설정
내 메일함 오른쪽 설정버튼 클릭 -> 'POP/IMAP 설정'
-> 'IMAP/SMTP 설정' -> 사용함, 동기화 메일 제한 1000 설정

NAV_ID: 네이버 아이디
NAV_PW: 네이버 비밀번호

import nodemailer from "nodemailer";

const {NAV_ID, NAV_PW} = process.env;

// enter.tsx 부터 받은 사용자 데이터
const { email, phone } = req.body;

// 랜덤 인증번호
const payload = String(Math.random()).substring(2, 8); 


function SendEmail() {
  return nodemailer.createTransport({
    service: "Naver",
    port: 587,
    host: "smtp.naver.com",
    secure: false,
    requireTLS: true,
    auth: {
      user: NAV_ID, 
      pass: NAV_PW,
    },
  });
}

// 이메일 전송 
if (email) {
  const mailOptions = {
    from: NAV_ID, // 실제 서비스시, 서버 메일 들어가야함
    to: NAV_ID, // 실제 서비스시, 가입 메일 들어가야함
    subject: "귤마켓 메일 인증 요청 🍊",
    html: `
    	<p>귤마켓 인증번호: <strong>${payload}</strong></p>
    `,
  };
  // 메일 보내기
  SendEmail().
  sendMail(mailOptions, (error) => error && console.log(error));
}

---

📑 2-3. api/users/enter (with SENDGRID)

회원가입 절차가 굉장히 까다로웠다. 실제로 메일을 주고받았고,
2-3일이 지나서야 가입이 완료되었다.. 안되는 영어로 노력했다ㅠ

1. 📦 npm install --save @sendgrid/mail
모듈 설치

2. 📦 SENDGRID 사이트 접속
EMAIL API 탭 - Integration Guide를 통하여 APIKEY 생성

import sendgrid from "@sendgrid/mail";

const {SENDGRID_APIKEY} = process.env;

// enter.tsx 부터 받은 사용자 데이터
const { email, phone } = req.body;

// 랜덤 인증번호
const payload = String(Math.random()).substring(2, 8); 

// sendgird 연결 (for mail)
sendgrid.setApiKey(SENDGRID_APIKEY!);

// mail 인증 요청
  if (email) {
	await sendgrid.send({
      from: MY_EMAIL!,
      to: MY_EMAIL!,
      subject: "귤마켓 메일 인증 요청 🍊",
      html: `<p>귤마켓 인증번호: <strong>${payload}</strong></p>`,
    });
  }