ブログトップ

公開日:

更新日:

10 min read

技術革新

Cloudflare workersでGmailを使ってメール送信を実装する 準備編

Cloudflare Workers Gmail API ウェブ開発 JavaScript OAuth 2.0
Cloudflare workersでGmailを使ってメール送信を実装する 準備編のイメージ
  • 準備編←今ココ
  • 開発環境編（準備中）
  • 実装編（準備中）

ホームページのフォームから送られてきた内容をメールで送信する機能を実装したい。ホームページは静的コンテンツ(html)なので、CloudFlare Pagesにデプロイしています。ジェネレーターはAstroです。GitHubリポジトリに原稿をpushすれば、自動でビルドしてくれるので、これはすごい！しかも無料！

私は超ベテラン年寄りエンジニアで、10年ほど現場からは離れていたこともあり（システム案件には何らかの形でかかわっていた）、3年前に現場に復帰したころは浦島太郎異世界転生ものでした。

20世紀のバージョン管理は、なんといってもVisual SourceSafeでした。それが21世紀になるとGitHubとやらで、これがまったくわけわからん。

概念が根本的に異なるので、それを理解するのも一苦労だったのに「チェックアウト」の意味すらVisual SourceSafeとかけ離れているので、下手に知識があるから混乱するばかりの今日のこの頃、皆様方におかれましては誠にご健勝のこととお喜び申し上げます。

【悲報】cloudflare workersで使える無料のメール送信サービスは終了していた

問合せフォームのメール送信に適したサービスをAIに聞いてみたところ、以下のような回答が返ってきた。

Cloudflare Workersで使用できる無料のメール送信サービスとして、MailChannels Send APIがおすすめです。このサービスは以下の特徴を持っています:

  1. 完全無料: 使用量や送信数に関係なく、無料で利用できます。

  2. 使用期限なし: 特に期限は設定されていません。

  3. 簡単な設定: Cloudflare WorkersからAPIを直接呼び出すだけで利用可能です。

  4. 1日10通程度の送信に最適: 小規模な送信量に適しています。

  5. スパム対策機能: 自動的に有害なコンテンツを識別してブロックします。

  6. ドメイン認証: Domain Lockdown DNSレコードを設定することで、独自ドメインからのメール送信が可能です。

使用方法:

  1. 送信元ドメインのDNSにDomain Lockdownレコードを設定します。

  2. Cloudflare Workerのコードで、MailChannels Send APIのエンドポイント（https://api.mailchannels.net/tx/v1/send）にPOSTリクエストを送信します。

  3. リクエストボディにメールの送信元、宛先、件名、本文などの情報をJSON形式で含めます。

をを！これはすごい！と思い、２日かけて実装するが、全くメールが送信できない。APIを呼び出すと認証エラーが返ってくる。

プログラムを隅々までチェックした。これ以上のことはできない。AIの答えは正しいとは限らない、とチャットにはしつこいほど書いてある。こういうときは古典的な手段、つまりGoogleで検索するしかない。

MailChannelsとCloudFlareの連携は2024年6月30日でサービス終了しますた（泣）

俺の時間を返せ…😿

【難問】Gmailで送信しよう

CloudFlare Workersの呪い制約

1. Google APIパッケージの使用不可:

Cloudflare WorkersはNode.js環境ではないため、Node.js用のGoogle APIクライアントライブラリを直接使用することはできません。代わりに、Google APIのRESTエンドポイントに直接HTTPリクエストを送信する必要があります。

2. Nodemailerパッケージの使用不可:

同様に、NodemailerもNode.js環境に依存しているため、Cloudflare Workersでは使用できません。

実装前の超絶面倒くさい準備

ハッキリ言って、これにたどり着くまでかなりの時間を要した。AIを駆使してもうまくいかない。数日前に発表されたChat-GPT4o1モデルで、ようやく答えにたどり着けた感がある。

  1. サービスアカウントの作成:

    • Google Cloud Consoleにアクセスし、新しいプロジェクトを作成するか、既存のプロジェクトを選択します。

    • 左側のメニューから「IAMと管理」→「サービスアカウント」を選択します。

    • 「サービスアカウントを作成」をクリックし、サービスアカウント名と説明を入力します。

    • 他はすべて省略して完了をクリックします。

      サービスアカウント作成

    • サービスアカウントを作成したら、「OAuth2 クライアントID」 をメモします。

    サービスアカウント

  2. 必要なロールの付与:

    • 左側のメニューから「IAMと管理」→「IAM」を選択します。
    • 該当するプリンシパルをチェックして「アクセス権を付与」をクリックします。
    • プリンシパルの追加の、 「新しいプリンシパル」 に、「サービスアカウント」 の長い文字列を入力します。

    IAMと管理

    • 「ロールを割り当てる」で、**「サービス アカウント管理者」**のロールを選択します。
    • 「別のロールを追加」をクリックし、**「サービス アカウント キー管理者」**のロールを選択します。
    • 「別のロールを追加」をクリックし、**「サービス アカウント トークン作成者」**のロールを選択します。
    • 「別のロールを追加」をクリックし、**「IAP ポリシー管理者」**のロールを選択します。 ロール割り当て
    • 保存をクリックします。

  3. Gmail APIの有効化:

    • 左側のメニューから「APIとサービス」→「ライブラリ」を選択します。 APIとサービス>ライブラリ

    • 「APIとサービスを検索」に”gmail”と入力して”gmail api”を選択する

    • 検索結果の**「Gmail API」**を選択する。

    • 「有効にする」をクリックします。

      Gmail API

  4. 「組織のポリシー管理者」のロール付与

    • 左側のメニューから「IAMと管理>IAM」を選択します。

    • 組織の管理者の右側にある編集アイコンをクリックします。

      IAMと管理>IAM

    • 「別のロールを追加」をクリックして「組織ポリシー管理者」を選択します。

    組織ポリシー管理者

    • 「保存」をクリックします。

  5. 「サービス アカウント キーの作成を無効化 のポリシー」の無効化

    • 左側のメニューから「IAMと管理>組織のポリシー」を選択します。

      組織のポリシー

    • フィルタに「iam.disableServiceAccountKeyCreation」を入力します。

      組織のポリシー検索

    • 表示されたiam.disableServiceAccountKeyCreationのリンクをクリックします。

    • 「ポリシーを管理」をクリックします。

    • 「親のポリシーをオーバライドする」を選択します。

    • 「ルールの追加」をクリックします。

    • 適用を「オン」にします。

      ポリシーの編集

    • 完了をクリックします。

  6. サービスアカウントの鍵を生成:

    • 左側のメニューから「IAMと管理>サービスアカウント」を選択します。

    • 作成したサービスアカウントをクリックして詳細ページを表示します。

    • 「キー」タブを選択します。

    • 「鍵を追加」→「新しい鍵を作成」をクリックします。

    • **「JSON」**形式を選択し「作成」をクリックします。

      ポリシーの編集

    • JSONファイルを安全な場所にダウンロードします。

  7. Google Workspace管理コンソールでのドメイン全体の委任の設定:

    • Google Workspace管理コンソール（https://admin.google.com）に管理者アカウントでログインします。

    • 左側のメニューから「セキュリティ」→「▶アクセスとデータ管理」→「APIの制御」を選択します。

    • 「ドメイン全体の委任を管理」をクリックします。

      ポリシーの編集

    • 「新しいクライアントIDを追加」をクリックし、以下の情報を入力します。

      • クライアントID: 手順1でメモしたサービスアカウントのクライアントID。
      • OAuthスコープ: 必要なAPIアクセス権限を持つスコープを入力（https://www.googleapis.com/auth/gmail.send）。

      ポリシーの編集

    • 「承認」をクリックして設定を保存します。

    • ドメイン全体の委任については、当社のような零細企業であれば問題ないでしょうが、それなりの規模の会社では注意が必要です。

まとめ

これで実装の準備ができた。長くなったので、今回はこのあたりで。 次回はCloudflare WorkersでGmail APIを使用してメール送信を実装する。

追伸

Gmailでエイリアスからメールを送信する場合は、「他のメールアドレスを追加」を忘れないように！

Gmail>設定>アカウント>他のメールアドレスを追加

他のメールアドレスを追加