A Day in the Life

Firebase Cloud Functions でのメールフォーム用 function を作る

いわゆるメールフォーム機能がほしい。基本無料で使えて、SPAMは弾いて、自分にメールが届けばok、という単純な要件なので、Cloud Fuctions for Firebase で作った。TypeScriptでの実装例はこんな感じ。

Cloud Functions で各種値を取得するために、functions:config:set で値を入れ、適当に onCallHTTP経由での関数呼び出しにマッピングすれば OK。

npx firebase functions:config:set \
  gmail.user="" \
  gmail.client-id="" \
  gmail.client-secret="" \
  gmail.refresh-token="" \
  recaptcha.v3secret=""

smpt は Colud Functions で叩ける API 群にはないので、Gmail からメールを送れる OAuth2 の cliendId / clientSecret / refreshToken を取得する。これがややこしくて面倒なのだけど、node.js 上の nodemailer で OAuth 2.0 を使って gmail からメールを送る の方法で取得すれば OK。なおnode.js 上の nodemailer で OAuth 2.0 を使って gmail からメールを送るにのっているserver.jsのサンプルコードは私の環境ではうまく動かず、nodemailer のドキュメント通りにやったらうまく動いた。

メール送信APIだけだとspamロボットが叩きまくるので、reCAPTCHA v3を使って、人かどうかの判定も入れている。なおクライアントサイド(Webブラウザ)側ではreact-google-recaptcha-v3を使ってる。


以前、このサイトにおたよりフォームを作った時には、いわゆるメールフォーム機能を提供しているサービスを比較検証して作ったのだけど、それよりもとっとと自分で Cloud Functions で作ったほうが簡単かつ短時間で終わったのだった。

Firebase Extensionsが一般の開発者も公開できるようになり、かつ Cloud Fucntions とうまくマッピングできれば、各種設定だけ入力して自分のプロダクトにデプロイできるようになり、たとえば今回のようなメールフォームのユースケースを満たす単機能 function は自ら実装することなく利用できるようになるだろうから、今後拡充していくと嬉しいなぁ。

(なお今でも extensions として、firestore-send-emailがあるけど、これは firestore のドキュメントをトリガーに smtp でメールを送るものなので、用途が異なる。)

関連するかもエントリー

おたよりフォームを作った
まったくもってサイトにリアクションがないのは寂しい、かといって Disqus のようなコメントフォームを設置するのはどうなんだろうなーと思って、ちょうどよい距離感かもしれないないメールフォームであるところの「おたよりフォーム」を作ってみた。記事下部から送れると思うので、お気軽にお...
まったくもってサイトにリアクションがないのは寂しい、かといって Disqus のようなコメントフォームを設置するのはどうなんだろうなーと思っ...
親族間で写真を共有する
DSC01842.jpg by Yuichi Tateno, on Flickr実家に帰っていたので、孫の写真を親族間で共有しようと google+ を設定したけどいまいち…。google+ のコミニュティ機能で親族のプライベートコミュニティを作ったんだけど、PC からしか使えな...
DSC01842.jpg by Yuichi Tateno, on Flickr実家に帰っていたので、孫の写真を親族間で共有しようと goo...
2021年4月19日
朝、久しぶりに日の出直後に海辺で朝食。もう日の出は5:05ぐらいなのね。今日は月曜のはずなのに、休日なのか、というぐらい釣り人が居て、釣り開き(なんてものはないのだけど)を感じる。昼食は、わざわざ話を聞きたいとここまで伺ってくれた方とオープンテラスでランチ。鳩が別の客が離席したす...
朝、久しぶりに日の出直後に海辺で朝食。もう日の出は5:05ぐらいなのね。今日は月曜のはずなのに、休日なのか、というぐらい釣り人が居て、釣り開...