Amazon SESで日本語のカスタム検証メールを送信する

f:id:ecb_kkanazawa:20211020005850p:plain

 

こんにちは、ecbeing金澤です。
レビューのSaaSサービス「ReviCo(レビコ)」のプロダクトリードをしています。

 

 

 

 

はじめに

Amazon SESの検証メールは分かりにくい

SESを使ってメールを送信する際、送信元アドレスを任意のメールアドレスにするには、ドメインの検証かメールアドレスの検証が必要になります。

ドメインの検証はDNSにレコードを追加する必要がある一方、メールアドレスの方は飛んできた検証メールに載っているURLをクリックするだけで済むので、比較的容易に検証できます…が、

メールが英語でスパムっぽい上に、検証URLをクリックするとSESの紹介ページに遷移するという動きになっており、検証が正常にできたのかどうか分かりにくいフローになってしまっています。

f:id:ecb_kkanazawa:20211124170034p:plain

デフォルトの検証フローはこんな感じ…

 

カスタム検証Eメールテンプレートとは

これをもっとユーザーフレンドリーにすべく、SESにはカスタム検証Eメールテンプレートというものが用意されています。

docs.aws.amazon.com

 

具体的には以下の項目をカスタマイズすることができます。

  • 検証メールの送信元メールアドレス
  • 検証メールの件名
  • 検証メールの本文
  • 検証URLをクリックした後に遷移するWebページ(検証成功・失敗)

 

なお、カスタムテンプレートの作成と、それを使用した検証メールの送信は、記事執筆時点では AWS CLI または AWS SDKでのみ可能となっています。

いやこういうのこそマネジメントコンソールでできてほしいんだけど…と思うのですが、今後のアップデートに期待しましょう。

 

カスタム検証Eメールテンプレートを作って送信してみる

それでは実際にやってみたいと思います。

今回は AWS CLI で試してみました。

AWS CLIのインストールやクレデンシャルの設定は省略しますので、必要な方はクラスメソッドさんの記事を参考にされると良いと思います。

(DevelopersIOにはいつも大変お世話になっております!)

Windows環境でAWS CLI v2をインストールする | DevelopersIO

[初心者向けTips]AWS CLI認証情報ファイルに最低限設定しておく項目 | DevelopersIO

 

前提

カスタムテンプレートを使用するには、SESがサンドボックスの外にある必要があります。
(サンドボックス内ではテンプレートの作成までしかできません)

 

マネジメントコンソールから申請すれば良いのですが、サンドボックス外に移動すると

  • 送信のメールアドレスの制限が無くなる

ため、メールの誤送信によるセキュリティ事故が起こるリスクが跳ね上がりますので、移動の是非は慎重に検討した方が良いです。(個人的には開発環境ではおすすめしません…)

docs.aws.amazon.com

 

カスタムテンプレート作成

JSONファイル作成

まずカスタムテンプレートの内容をJSON形式で用意します。

カスタムできる項目は以下です。

 

JSONキー名 論理名 補足説明
TemplateName テンプレート名 後で検証メールを送信する時に使います(50個まで作れますが、一意な名前を付けてください)
FromEmailAddress 検証メールの送信元アドレス このメールアドレスも検証済みである必要があります(未検証の場合テンプレート登録時にエラーになります)
TemplateSubject 検証メールの件名  
TemplateContent 検証メールの本文 HTML形式ですが使用できるタグに制約があります(公式ドキュメント)
SuccessRedirectionURL 検証が成功した時に表示するWebページのURL 静的ページであればS3に置いておくのが良いと思います
FailureRedirectionURL 検証が失敗した時に表示するWebページのURL 同じく

 

JSONにするとこのような形になります。

各項目はダブルクォートで括ってください。

{
    "TemplateName": "CustomTemplate", 
    "FromEmailAddress": "xxxx@test.com",
    "TemplateSubject": "メールアドレスの認証作業をお願い致します",
    "TemplateContent": "
    <html>
    <head></head>
    <body>
        ご担当者様<br>
        <br>
        お世話になっております。<br>
        <br>
        メールアドレスの認証作業をお願い致します。<br>
        下記URLをクリックすると完了致します。<br>
        <br>
        ※このメールは自動送信でお送りしています。<br>
        お問い合わせはサポートまでご連絡ください。<br>
        </body>
    </html>
    ",
    "SuccessRedirectionURL": "https://xxxx.s3.ap-northeast-1.amazonaws.com/ses-email-verification/success.html",
    "FailureRedirectionURL": "https://xxxx.s3.ap-northeast-1.amazonaws.com/ses-email-verification/failure.html"
}

 

TemplateContent は検証URLの上に挿入されるので、その想定で本文を考えてください。

また、この程度の本文であればHTMLである必要もないのですが、HTMLタグを取っ払ってテキストメールにすると改行が反映されなかったので、公式ドキュメントに沿ってHTMLにしています。

 

日本語部分をJSONエンコードしてファイルに保存

JSONができたら、日本語の部分をJSONエンコードしてファイルに保存します。

JSONエンコードはググればやり方が色々出てきますので、お好きなようにしてください。

 

最終的にこのようなJSONになります。

{
    "TemplateName": "CustomTemplate", 
    "FromEmailAddress": "xxxx@test.com",
    "TemplateSubject": "\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u306e\u8a8d\u8a3c\u4f5c\u696d\u3092\u304a\u9858\u3044\u81f4\u3057\u307e\u3059",
    "TemplateContent": "\u003Chtml\u003E\n\u003Chead\u003E\u003C\/head\u003E\n\u003Cbody\u003E\n\u3054\u62c5\u5f53\u8005\u69d8\u003Cbr\u003E\n\u003Cbr\u003E\n\u304a\u4e16\u8a71\u306b\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u3002\u003Cbr\u003E\n\u003Cbr\u003E\n\u30e1\u30fc\u30eb\u30a2\u30c9\u30ec\u30b9\u306e\u8a8d\u8a3c\u4f5c\u696d\u3092\u304a\u9858\u3044\u81f4\u3057\u307e\u3059\u3002\u003Cbr\u003E\n\u4e0b\u8a18URL\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u5b8c\u4e86\u81f4\u3057\u307e\u3059\u3002\u003Cbr\u003E\n\u003Cbr\u003E\n\u203b\u3053\u306e\u30e1\u30fc\u30eb\u306f\u81ea\u52d5\u9001\u4fe1\u3067\u304a\u9001\u308a\u3057\u3066\u3044\u307e\u3059\u3002\u003Cbr\u003E\n\u304a\u554f\u3044\u5408\u308f\u305b\u306f\u30b5\u30dd\u30fc\u30c8\u307e\u3067\u3054\u9023\u7d61\u304f\u3060\u3055\u3044\u3002\u003Cbr\u003E\n\u003C\/body\u003E\n\u003C\/html\u003E",
    "SuccessRedirectionURL": "https://xxxx.s3.ap-northeast-1.amazonaws.com/ses-email-verification/success.html",
    "FailureRedirectionURL": "https://xxxx.s3.ap-northeast-1.amazonaws.com/ses-email-verification/failure.html"
}

 

SESにアップロード

AWS CLIでJSONファイルをアップロードして、カスタムテンプレートを登録します。

JSONファイルを保存したディレクトリでターミナルを開き、以下のコマンドを実行します。

※先ほど保存したJSONファイルは custom_template.json と名付けました。

aws ses create-custom-verification-email-template --cli-input-json file://custom_template.json

 

ちなみに2回目以降は create ではなく update になります。

aws ses update-custom-verification-email-template --cli-input-json file://custom_template.json

 

作ったカスタムテンプレートは以下のコマンドで確認できます。

aws ses list-custom-verification-email-templates

 

検証メール送信

以下のコマンドを実行すると、カスタムテンプレートを使用した検証メールが送信されます。

※カスタムテンプレートを複数作った場合は、使用したいテンプレート名を --template-name に指定してください。

aws ses send-custom-verification-email --email-address 【送信先のメールアドレス】 --template-name CustomTemplate

 

f:id:ecb_kkanazawa:20211124191123p:plain

設定した通りにメールが届きました。

 

f:id:ecb_kkanazawa:20211125095932p:plain

認証成功画面もきちんと表示されました。

 

 

おわりに

アプリケーションへの組み込み

ReviCoでは、カスタムテンプレートはAWS CLIで作りつつ、検証メール送信はこのように画面からできるように作り込みました。

検証状態の表示もあわせて作ってあります。

(検証メールアドレスの一覧を取得して、当該メールアドレスがあるかどうか&検証済みかどうかで表示を分けています)

f:id:ecb_kkanazawa:20211124191713p:plain

メールアドレスが未検証の場合

f:id:ecb_kkanazawa:20211124172014p:plain

メールアドレスが検証済みの場合

 

業務フローの改善

ReviCoでは、レビュー促進メールのFromアドレスに利用者のメールアドレスを設定できるのですが、設定の際はReviCoカスタマーサポートに都度連絡していただく必要があり、利用者・カスタマーサポートともに時間と手間が掛かっていました。

 

今回この機能を用意したことで、利用者自身で設定を完結できるようになり、利便性向上だけでなく、カスタマーサポートの工数も削減することができました。

 

f:id:ecb_kkanazawa:20211124183948p:plain

業務フローからカスタマーサポートが消え、ステップ数も半分になりました。

 

カスタムテンプレートの作成・使用も、AWS CLIを使うハードルさえ乗り越えれば非常に簡単にできますので、同じような事象でお困りの方はぜひ試してみて頂ければと思います!

 

お知らせ

ecbeingではプロダクトの課題を技術で解決してくれる仲間を募集しています!

careers.ecbeing.tech