あっかぎのページ

Postman SMTPのOAuth2.0を使ってWordPressでメール送信

20151129_1

WordPress標準のメール機能でメールが送れなかったので、Postamn SMTPというPluginのメール機能でメールを送れるようにしたお話。

前置き

20151129_2
(画像はクリックで拡大できるよ)

WordPressのお問い合わせ機能にContact Form 7というPluginを使っています。さくらVPSにサーバーを移行してお問い合わせ欄から『送信』すると自分にメールが届く仕組みです。

今まではロリポップの100円プランで運用していて問題なくメールが届いていましたが、さくらVPSに移行すると同じ仕組みでもメールが届かなくなってしまいました。送信すると『あなたのメッセージは送信されました。ありがとうございました。』と送信が完了した旨は表示されるのですが、肝心のメールが届かないという現象でした(上の画像ような表示)。

おそらく自分で取得したドメインやさくらVPSから新しく発行されたドメインでは、ドメインの力が弱くてスパムメールとしてフィルターされたからじゃないかなと勝手に想像しています。

そこで、自分のGmailアカウントを利用してメールを送信する仕組みを使って、WordPressにメールを送信する機能を実装しました。今回はPostman SMTPというPluginを使ってOAuth2.0の仕組みを利用したメール機能を実装します。

ちなみに、WP Mail SMTPというPluginも使ってみましたが、こちらはGoogleアカウントで安全性の低いアプリからのアカウントへのアクセスを許可する設定をしないとメールが送れなかったので、採用を見送りました(設定自体はこちらの方が簡単です→参考サイト『Contact Form 7プラグインでGmailのSMTPサーバを使ってメール送信』)。

今回はより安全性の高いPostman SMTPを採用します。Gmailを経由してメールを使うので、Googleのアカウントも必要になります。

Postman SMTPの設定

Postman SMTPはOAuth2.0を利用することもできるメール送信Pluginです。

OAuthはアプリごとにキーやパスワードが発行されて、それを使って認証する仕組みです。アプリにアカウントのパスワードを渡さなくてよく、機能やアプリごとに細かく認証できるので、通常のアカウントとパスワードによる認証よりもより安全に通信ができます。

ここでは、Contact Form 7の『送信』機能からメールを送れることを目標にします。

Postman SMTPのインストール

20151129_3

WordPressの管理画面から『プラグイン』→『新規追加』→『プラグインの検索』欄に『Postman』と入力してPluginの検索をします。上の画面は検索結果で、『Postman SMTP Mailer/Email Log』というPluginをインストールします。

Postman SMTPの設定

20151129_4

WordPressの管理画面から『設定』→『Postman SMTP』を選択します。上のように『Postman SMTP Setup』という設定画面になります。この中の『Show All Settings』をクリックします(Start the Wizardボタンのすぐ下)。

20151129_5

上のような画面になりますので、GmailのOAuth用に設定していきます。Accountタブで

  • Transport
    • Type → SMTP
    • Outgoing Mail Server Hostname → smtp.gmail.com
    • Outgoing Mail Server Posrt → 587
    • Emvelope-From Email Address → 自分のGmailアドレス
    • Securiyty → STARTTLS
  • Authentication
    • Authorized JavaScript origins → WordPressのサイトURL(自動)
    • Authorized redirect URI → WordPressのサイト認証URI(自動)
    • Client ID → Googleで発行したアプリID
    • Client Secret → Googleで発行したアプリパスワード

Transport部ではGmailに関する設定です。上の内容 + 自分のGmailアドレスを入力します。

Authenticationでは上の2段はWordPressのサイトに合わせて自動で設定されます。これを下段2段の認証用に使いますので、控えておきます。下2段はGoogleアカウントで設定して取得するので、今の段階は空欄になります。

GoogleでOAuth認証データ取得

一旦WordPressを離れて、GoogleでOAuth認証のためのデータを取得します。ここでClient IDとClient Secretを取得して、先ほどのPostman SMTPの設定欄に入力します。

※GoogleはよくUIや手順が変更されるので、時期によっては下の手順と変わっているかもしれません。

まず、次のアドレスからGoogleの認証情報を設定する画面に行きます。

20151129_6

Google(Gmail)アカウントがあれば通常のログイン手続きで上のような認証情報の画面に移動できます。ここからOAuthの情報を取得していきます。『認証情報を追加▽』ボタンをクリックすると3つの選択肢が出るので『OAuth 2.0 クライアント ID』を選択します。

20151129_7

そうすると上のような『クライアントIDの作成』画面へ移動します。ここで先ほどのPostman SMTPの情報を入力してクライアントID(Client ID)を取得していきます。

20151129_8

入力内容は次の通りです。

  • アプリケーションの情報 → 『ウェブアプリケーション』を選択
  • 名前 → 好きな名前を入力
  • 承認済みのJavaScript生成元 → Postman SMTPのAuthorized JavaScript origins欄を入力
  • 承認済みのリダイレクトURI → Postman SMTPのAuthorized redirect URI欄を入力

以上を入力して『作成』ボタンを押します。

20151129_9

入力内容に問題がなければ、上のような画面に

  • クライアントID
  • クライアントシークレット

の情報が表示されます。この2つの情報を控えておきます。(あとで一覧画面からも確認できます)

以上で、GoogleでOAuth認証データの取得ができました。

再びPostman SMTPの設定

20151129_5

クライアントID(Client ID)とクライアントシークレット(Client Secret)のOAuth情報が取得できましたので、あらためてWordPressのPostman SMTPの設定画面へ戻ります。

Postman SMTPの設定画面の一番下にある入力欄にGoogleで取得したOAuth情報をそれぞれ入力します。

  • Client ID → Googleで取得したクライアントID
  • Client Secret → Googleで取得したクライアントシークレット

Postman SMTPの設定はこれで完了したので『変更を保存』をクリックして設定を完了します。最後に、Postman SMTPのPluginを有効にすれば、Gmailを経由してメールが送れるようになります。

20151129_2

WordPress上でContact Form 7やメールを送るツールでテストしてみてください。きちんと設定したメールアドレスに届けば完了です。

おわりに

ロリポップからさくらVPSへWordPress移行して、見た目はうまくコピーできて安心していました。ところが、メール機能をチェックしてみると今回のようにメールがうまく送れないことに気が付きました。

たまたまメール機能をチェックして判明しましたが、このあたりの移行に関するチェック内容をまとめておかないと意外なところで失敗がありそうですね。

最終的には自動テストに移行できればいいですが、当面はブログの記事に残したり、簡単なチェックリストを残すなりしてやらないとダメですね。