이메일 알림은 최신 웹 애플리케이션에 매우 중요합니다. 이 가이드에서는 Express.js와 Gmail의 OAuth2 인증을 사용하여 안전한 이메일 알림 서비스를 구축하겠습니다. 당사 서비스는 웹훅 요청을 수락하고 수신 데이터를 기반으로 자동으로 이메일을 보냅니다.

우리가 만들고 있는 것

우리는 다음과 같은 Express 서버를 만들 것입니다:

• POST 요청을 통해 웹훅 데이터 수신
• OAuth2를 사용하여 Gmail로 인증
• 웹훅 페이로드를 기반으로 맞춤형 이메일을 보냅니다.
• 오류를 적절하게 처리합니다.

전제 조건

• 컴퓨터에 Node.js가 설치되어 있습니다.
• Gmail API가 사용 설정된 Google Cloud Console 프로젝트
• OAuth2 자격 증명(클라이언트 ID, 클라이언트 비밀번호, 새로 고침 토큰)
• Express.js 및 async/await에 대한 기본 이해

프로젝트 설정

먼저 필수 패키지를 설치합니다:

npm install express body-parser nodemailer googleapis dotenv

사용자 인증 정보를 사용하여 .env 파일을 만듭니다.

CLIENT_ID=your_client_id
CLIENT_SECRET=your_client_secret
REDIRECT_URI=your_redirect_uri
REFRESH_TOKEN=your_refresh_token
[email protected]

저처럼 자격 증명을 설정하는 데 어려움이 있는 경우 아래 단계를 따르세요...

1단계: 새 Google Cloud 프로젝트 만들기:

에이. https://console.cloud.google.com/
로 이동하세요. 비. 페이지 상단의 프로젝트 드롭다운을 클릭하세요
기음. "새 프로젝트"
를 클릭하세요. 디. 프로젝트 이름을 입력하고 "만들기"

2단계: Gmail API 활성화:
에이. 왼쪽 사이드바에서 "API 및 서비스" > "라이브러리"
로 이동합니다. 비. "Gmail API"를 검색하세요
기음. "Gmail API"를 클릭한 다음 "활성화"

3단계: OAuth 동의 화면 구성:
에이. "API 및 서비스" > "OAuth 동의 화면"
으로 이동합니다. 비. 사용자 유형으로 "외부"를 선택하고 "만들기"
를 클릭하세요. 기음. 필수 필드를 입력하세요:
- 앱 이름: [앱 이름]
- 사용자 지원 이메일: [귀하의 이메일]
- 개발자 연락처 : [이메일]
디. "저장하고 계속하기"를 클릭하세요
이자형. '범위' 페이지에서 '범위 추가 또는 제거'
를 클릭하세요. 에프. "https://mail.google.com/" 범위
를 찾아 선택하세요. g. "업데이트"를 클릭한 다음 "저장하고 계속하기"
를 클릭하세요. 시간. "테스트 사용자" 페이지에서 "사용자 추가"
를 클릭하세요. 나. Gmail 주소를 추가하고 '저장하고 계속하기'
를 클릭하세요. j. 요약을 검토하고 '대시보드로 돌아가기'

4단계: OAuth2 자격 증명 만들기:
에이. "API 및 서비스" > "자격 증명"
으로 이동합니다. 비. "자격 증명 만들기" > "OAuth 클라이언트 ID"
를 클릭하세요. 기음. 애플리케이션 유형으로 "웹 애플리케이션"을 선택하세요.
디. 이름: [앱 이름]
이자형. 승인된 JavaScript 출처: 서버 도메인을 추가하세요(예: 로컬 개발의 경우 http://localhost:3000)

에프. 승인된 리디렉션 URI:
- 추가: https://developers.google.com/oauthplayground
- 서버의 콜백 URL이 있으면 추가하세요(예: http://localhost:3000/auth/google/callback)
g. "만들기"를 클릭하세요
시간. 팝업에 클라이언트 ID와 클라이언트 비밀번호가 표시됩니다. 안전하게 저장하세요.

5단계: 새 새로 고침 토큰 받기:
에이. https://developers.google.com/oauthplayground/

비. 오른쪽 상단의 톱니바퀴 아이콘(설정처럼)을 클릭하세요
기음. "자신의 OAuth 자격 증명 사용" 확인란을 클릭합니다.
디. 새 클라이언트 ID와 클라이언트 비밀번호를 입력하세요.
이자형. 설정 닫기
에프. 왼쪽 사이드바에서 'Gmail API v1'
을 찾습니다. g. https://mail.google.com/
를 선택하세요. 시간. "API 승인"
을 클릭하세요. 나. Google 계정을 선택하고 요청된 권한을 부여하세요
j. 다음 화면에서 "토큰 교환 인증 코드"
를 클릭하세요. 케이. 응답에서 "새로 고침 토큰"을 복사합니다

이 과정이나 이메일 기능을 테스트하는 동안 문제가 발생하면 댓글로 구체적인 오류 메시지나 동작을 알려주세요.

코드 설명

구현을 단계별로 분석해 보겠습니다.

1. 초기 설정 및 종속성

const express = require("express");
const bodyParser = require("body-parser");
const nodemailer = require("nodemailer");
const { google } = require("googleapis");
require("dotenv").config();

const app = express();
app.use(bodyParser.json());

이 섹션에서는 Express 서버를 설정하고 필요한 종속성을 가져옵니다. body-parser를 사용하여 JSON 요청을 구문 분석하고 dotenv를 사용하여 환경 변수를 관리합니다.

2. OAuth2 구성

const oAuth2Client = new google.auth.OAuth2(
  CLIENT_ID,
  CLIENT_SECRET,
  REDIRECT_URI
);
oAuth2Client.setCredentials({ refresh_token: REFRESH_TOKEN });

Google의 인증 라이브러리를 사용하여 OAuth2 클라이언트를 만듭니다. Gmail API를 사용하여 토큰 새로 고침 및 인증을 처리합니다.

3. 이메일 전송 기능

async function sendEmail(webhookData) {
  const {
    receiver_email, //change data based on your needs
  } = webhookData;

  try {
    const accessToken = await oAuth2Client.getAccessToken();
    const transport = nodemailer.createTransport({
      service: "gmail",
      auth: {
        type: "OAuth2",
        user: process.env.EMAIL_USER,
        clientId: CLIENT_ID,
        clientSecret: CLIENT_SECRET,
        refreshToken: REFRESH_TOKEN,
        accessToken: accessToken,
      },
    });

    const mailOptions = {
      from: `Your Name `,
      to: receiver_email,
      subject: ``, //Add Subject of Email
      html: ``, // Add your HTML template here
    };

    return await transport.sendMail(mailOptions);
  } catch (error) {
    console.error("Error in sendMail function:", error);
    throw error;
  }
}

이 기능:

• 웹훅 페이로드에서 데이터를 추출하며 필요에 따라 페이로드를 수정할 수 있습니다.
• 새로운 액세스 토큰을 얻습니다.
• OAuth2 인증을 사용하여 전송을 생성합니다.
• 맞춤형 콘텐츠가 포함된 이메일을 보냅니다.

4. 웹훅 엔드포인트

app.post("/webhook", async (req, res) => {
  try {
    const webhookData = req.body;
    await sendEmail(webhookData);
    res.status(200).send("Email sent successfully");
  } catch (error) {
    console.error("Error processing webhook:", error);
    res.status(500).send("Error processing webhook");
  }
});

웹훅 엔드포인트:

• POST 요청 수신
• 웹훅 데이터 처리
• 이메일 보내기
• 적절한 응답을 반환합니다.

테스트

curl 또는 Postman을 사용하여 웹훅을 테스트하세요.

curl -X POST http://localhost:4000/webhook \
-H "Content-Type: application/json" \
-d '{
  "receiver_email": "[email protected]",
}'

문제 해결

일반적인 문제 및 해결 방법:

1. 인증 오류: OAuth2 자격 증명을 확인하세요
2. 토큰 만료: 새로 고침 토큰이 유효한지 확인
3. 데이터 누락: 웹훅 페이로드 확인

결론

이제 안전한 OAuth2인증 이메일 알림 시스템을 갖게 되었습니다! 이 구현은 보안과 안정성을 유지하면서 더욱 복잡한 알림 시스템을 구축하기 위한 견고한 기반을 제공합니다.

이 게시물이 이메일 서비스를 설정하는 데 도움이 되기를 바랍니다.

즐거운 코딩하세요! ?