Next.js에서 Gmail API로 메일 전송하기

Next.js version: 13.5.6
page route를 기준으로 작성 되었다.

google cloud console 설정

https://console.cloud.google.com/welcome?organizationId=0

1. 프로젝트 생성

좌측 상단 프로젝트 선택 => 새 프로젝트 => 만들기

2. gmail api 활성화

라이브러리 => 검색창에서 gmail api 검색 => gmail api를 선택해서 [사용] 버튼 클릭

3. 클라이언트 ID 생성

사용자 인증 정보 탭에서 사용자 인증 정보 만들기 => [OAuth 클라이언트 ID] 클릭
OAuth 동의 화면이 없다면 만들어 주어야 한다.

• OAuth 동의 화면 설정
  
  앱이름, 사용자 지원 이메일, 개발자 연락처 정보 정도만 입력해주고
  저장후 계속 클릭
  
  범위 추가 또는 삭제 클릭
  
  필터란에 auth/gmail.send 검색 후 적용 및 업데이트
  저장후 계속 버튼 클릭해서 생성 마무리

애플리케이션 유형: 웹 어플리케이션
이름: 자유롭게
승인된 리디렉션 URI: https://developers.google.com/oauthplayground
이렇게 입력을 하고 만들어 주면 아래와같이 클라이언트 ID, 클라이언트 CLIENT_SECRET이 생성된다.

refresh token 발급

https://developers.google.com/oauthplayground/ 접속 후 오른쪽 설정 버튼에서
OAuth Client ID 및 OAuth Client Secret 입력 후
Step 1에서  https://www.googleapis.com/auth/gmail.send 을 입력한 다음
[Authorize APIs] 클릭

Step2로 넘어오게 되면서 [Exchange authorization code for tokens] 를 클릭하면 refresh token이 발급된다.

코드 작성

googleapis 설치

npm i googleapis

/pages/api/gmail/send.ts 경로에 아래 코드 작성

import { NextApiRequest, NextApiResponse } from "next";
import { google } from "googleapis";

const CLIENT_ID = "YOUR_CLIENT_ID";
const CLIENT_SECRET = "YOUR_CLIENT_SECRET";
const REDIRECT_URI = "SITE_URL";
const REFRESH_TOKEN = "YOUR_REFRESH_TOKEN";

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

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  try {
    const gmail = google.gmail({ version: "v1", auth: oAuth2Client });

    
    const subject = "메일 제목 test";
    const encodedSubject = `=?UTF-8?B?${Buffer.from(subject).toString("base64")}?=`;

    const email =
      "From: 이메일@gmail.com\n" +
      "To: 이메일@gmail.com\n" +
      `Subject: ${encodedSubject}\n` +
      "MIME-Version: 1.0\n" +
      'Content-Type: text/plain; charset="UTF-8"\n' +
      "Content-Transfer-Encoding: message/rfc2822\n" +
      "\n" +
      "메일 본문 test\n";

    const base64EncodedEmail = base64Encode(email);

    const response = await gmail.users.messages.send({
      userId: "me",
      requestBody: {
        raw: base64EncodedEmail,
      },
    });
    res.status(200).json(response.data);
  } catch (error) {
    console.log(`error22`, error);
    res.status(500).json({ error: (error as Error).message });
  }
}

const base64Encode = (message: string) => {
  return Buffer.from(message)
    .toString("base64")
    .replace(/\+/g, "-")
    .replace(/\//g, "_");
};

• 요청

 axios.post("/api/gmail/send", {}).then((result) => {
      console.log(result);
    });

아래 이미지와 같이 메일이 정상적으로 발송되는것을 볼 수 있다.