「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > プロフェッショナルな電子メール サービスを構築する: Gmail OAuth Express + Webhook

プロフェッショナルな電子メール サービスを構築する: Gmail OAuth Express + Webhook

2024 年 11 月 3 日に公開
ブラウズ:892

電子メール通知は、最新の Web アプリケーションにとって非常に重要です。このガイドでは、Express.js と Gmail の OAuth2 認証を使用して、安全な電子メール通知サービスを構築します。当社のサービスは Webhook リクエストを受け入れ、受信データに基づいて電子メールを自動的に送信します。

私たちが構築しているもの

次の Express サーバーを作成します:

  • POST リクエスト経由で Webhook データを受信します
  • OAuth2 を使用して Gmail で認証します
  • Webhook ペイロードに基づいてカスタマイズされた電子メールを送信します
  • エラーを適切に処理します

前提条件

  • 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 プロジェクトを作成します:

a. https://console.cloud.google.com/
に移動します b.ページ上部のプロジェクト ドロップダウンをクリックします
c. 「新しいプロジェクト」をクリックします
d.プロジェクト名を入力して「作成」をクリック

Build a Professional Email Service: Gmail OAuth Express   Webhooks

ステップ 2: Gmail API を有効にする:
a.左側のサイドバーで、[API とサービス] > [ライブラリ]
に移動します。 b. 「Gmail API」を検索
c. 「Gmail API」をクリックし、「有効にする」をクリックします

Build a Professional Email Service: Gmail OAuth Express   Webhooks


ステップ-3: OAuth 同意画面を構成します:
a. 「APIとサービス」>「OAuth同意画面」に移動します
b.ユーザータイプとして「外部」を選択し、「作成」をクリックします
c.必須フィールドに入力してください:
- アプリ名: [あなたのアプリ名]
- ユーザーサポートメールアドレス: [あなたのメールアドレス]
- 開発者の連絡先情報: [あなたのメールアドレス]
d. 「保存して続行」をクリックします
e. 「スコープ」ページで、「スコープの追加または削除」
をクリックします。 f. 「https://mail.google.com/」スコープを見つけて選択します
g. 「更新」をクリックし、「保存して続行」をクリックします
h. 「ユーザーのテスト」ページで、「ユーザーの追加」
をクリックします。 私。 Gmail アドレスを追加し、[保存して続行] をクリックします
j.概要を確認し、[ダッシュボードに戻る] をクリックします


ステップ 4: OAuth2 認証情報を作成する:
a. [API とサービス] > [認証情報]
に移動します。 b. [認証情報の作成] > [OAuth クライアント ID] をクリックします
c.アプリケーションの種類として「Web アプリケーション」を選択します
d.名前: [あなたのアプリ名]
e.承認された JavaScript オリジン: サーバーのドメインを追加します (例: ローカル開発の場合は http://localhost:3000)
Build a Professional Email Service: Gmail OAuth Express   Webhooks
f.承認されたリダイレクト URI:
- 追加: https://developers.google.com/oauthplayground
- サーバーのコールバック URL がある場合は追加します (例: http://localhost:3000/auth/google/callback)
g. 「作成」をクリック
h.ポップアップにクライアント ID とクライアント シークレットが表示されます。これらを安全に保存してください。


ステップ 5: 新しいリフレッシュ トークンを取得します:
a. https://developers.google.com/oauthplayground/

にアクセスします。

Build a Professional Email Service: Gmail OAuth Express   Webhooks

b.右上隅の歯車アイコン(設定のような)をクリックします
c. 「独自の OAuth 資格情報を使用する」チェックボックスをクリックします
d.新しいクライアント ID とクライアント シークレットを入力してください
e.設定を閉じる
f.左側のサイドバーで、「Gmail API v1」
を見つけます。 g. https://mail.google.com/
を選択します h. 「API を承認」をクリックします
私。 Google アカウントを選択し、要求された権限を付与します
j.次の画面で「トークンの認証コードを交換」
をクリックします。 k.レスポンスから「リフレッシュトークン」をコピー

このプロセス中または電子メール機能のテスト中に問題が発生した場合は、発生した具体的なエラー メッセージや動作をコメントに記入してください。


コードの説明

実装を段階的に見てみましょう:

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;
  }
}

この機能:

  • Webhook ペイロードからデータを抽出します。ニーズに基づいてペイロードを変更できます
  • 新しいアクセス トークンを取得します
  • OAuth2 認証を使用してトランスポートを作成します
  • カスタマイズされたコンテンツを含むメールを送信します

4. Webhook エンドポイント

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");
  }
});

Webhook エンドポイント:

  • POST リクエストを受信します
  • Webhook データを処理します
  • メールを送信します
  • 適切な応答を返します

テスト

curl または Postman を使用して Webhook をテストします:

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

トラブルシューティング

一般的な問題と解決策:

  1. 認証エラー: OAuth2 認証情報を確認してください
  2. トークンの有効期限: リフレッシュ トークンが有効であることを確認してください
  3. 欠落データ: Webhook ペイロードを検証します

結論

これで、OAuth2認証された安全な電子メール通知システムが完成しました。この実装は、セキュリティと信頼性を維持しながら、より複雑な通知システムを構築するための強固な基盤を提供します。

この投稿がメール サービスの設定に役立つことを願っています。

コーディングを楽しんでください! ?

リリースステートメント この記事は次の場所に転載されています: https://dev.to/yashrajxdev/build-a-professional-email-service-gmail-oauth2-express-webhooks-2gp8?1 侵害がある場合は、[email protected] までご連絡ください。それを削除するには
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3