Challenge Engineer Life !

エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。

Zapier+SendGridで作るメール購読フォームのバックエンド

メール購読フォームを手軽に作る方法を模索しています。今回はZapierとSendGridを使ってみました。データベースも使わず、SendGridのContactsに直接登録してみました。

POST先のURLを作成

Zapierで作ります。

「Webhooks」を選択します。

f:id:kikutaro777:20190717211951p:plain

「Catch Hook」を選んで「Save + Continue」を押します。

f:id:kikutaro777:20190717212209p:plain

URLが発行されたらHTTPリクエストの送信を試します。

f:id:kikutaro777:20190717212219p:plain

今回はcurlで以下のようなリクエストを実行しました。

curl -X POST https://hooks.zapier.com/hooks/catch/xxx/yyy/ -d '{"email" : "hoge@example.com"}

successの応答後「Ok,I did this」を押すとZapierが受信したリクエストがみれます。

f:id:kikutaro777:20190717212409p:plain

続いて以下のリンクをクリックしてActionを作成します。

f:id:kikutaro777:20190717212436p:plain

SendGridのContactに登録

受信したメールアドレスをSendGridのWeb APIでContactに登録します。

「Webhooks」を選びます。

f:id:kikutaro777:20190717212503p:plain

「POST」を選んで「Save + Continue」

f:id:kikutaro777:20190717212516p:plain

POSTで送る内容を登録します。

f:id:kikutaro777:20190717212715p:plain

以下の内容を入力します。

URL:https://api.sendgrid.com/v3/contactdb/recipients
Payload Type:JSON
Data:
 Key:email
 Value:下図を参照
Wrap Request In Array:yes
Headers:
 Key:Authorization
 Value:Bearer SG.xxx(SendGridのAPIキー)

DataのValueはTriggerのテストで受けたEmailを選択します。

f:id:kikutaro777:20190717212613p:plain

Send Test To Webhooks by Zapierを押してテストします。

f:id:kikutaro777:20190717212747p:plain

以下の成功メッセージが表示されたら成功です。

f:id:kikutaro777:20190717212846p:plain

Zapの名前を付けて登録します。

f:id:kikutaro777:20190717212852p:plain

実行

再度curlでリクエストを実行します。

curl -X POST https://hooks.zapier.com/hooks/catch/xxx/yyy/ -d '{"email" : "hoge@example.com"}

Actionが実行されてSendGridのContactsに登録されれば成功です。

f:id:kikutaro777:20190717212930p:plain

あとは画面のフォームを用意するだけです。本来はダブルオプトインにするべきなので、もう一工夫必要そうです。

にほんブログ村 IT技術ブログへ
にほんブログ村 にほんブログ村 IT技術ブログ Javaへ
にほんブログ村