Zenn
Closed7

WordPressでメール送信出来るようにする + Two-Factorでメール認証を設定する (さくらのレンタルサーバ)

WordPress
Ryo NakaeRyo Nakae

久しぶりにWordPressにログインしたら、SiteGuard WP Pluginで設定していた画像認証の画像が表示されなくて大変困った（多分、サーバ移行やPHP, MySQLのアップデートをしたりしたから）。
さくらのレンタルサーバ（スタンダード）にWordPressをインストールしているので、管理画面からファイルマネージャを開き、SiteGuardのプラグインファイルを削除して一旦無事にログインできるようになった。

以前も画像認証の画像が表示されない問題があり、その時はなんとか直して画像が表示できるようになった記憶があるが、直し方を忘れてしまった。

なので、SiteGuardによる画像認証は諦め、この機に別の認証方法を設定してみることにした。

Ryo NakaeRyo Nakae

要点

  • WordPressでメール認証をするには、WordPressからメールを送信できるようにする必要がある
  • おそらく何も設定しないと、メールが送信されないはず（送信はされているが、受信側でブロックされてしまう）
  • SMTPでメールを送りつつ、SPF/DMARCレコードをドメインのDNSに追加する必要がある
Ryo NakaeRyo Nakae

さくらのレンタルサーバ側の設定

  • サーバーコントロールパネルにログイン
  • メールアドレス(ユーザー名)を新規追加
    • 分かりやすく wordpress にした
      • 今回はドメインが example.com と仮定
    • パスワードも良い感じに設定

WordPress側の設定

https://ja.wordpress.org/plugins/wp-mail-smtp/

  • WP Mail SMTP by WPForms をインストールして有効化
  • プラグインを設定
    • 送信元メールアドレス: wordpress@example.com
    • メーラー: その他のSMTP
      • SMTPホスト: 初期ドメイン (xxx.sakura.ne.jp)
      • 暗号化: TLS
      • SMTPポート: 587
      • 認証: オン
      • SMTPユーザー名: wordpress@example.com
      • SMTPパスワード: ↑で設定したパスワード

ドメインの設定

さくらのレンタルサーバ側の設定

メールドメイン設定

  • SPFレコード: 利用する
  • DKIMレコード: 利用する
  • DMARCレコード: 利用する
  • DMARCポリシー: 迷惑メールフォルダに保存する (quarantine)

設定時に色々入力する必要があるかもだが、全部初期値でOK。

SPFレコードとDMARCレコードを調べる

  • さくらのレンタルサーバのサーバーコントロールパネルにログイン
  • 「メール」→「メールドメイン」→該当のドメインの「操作」→「DNSレコード設定」をクリック
    • @ のTXTレコード、_dmarc のTXTレコードの値を控えておく

DNSにレコードを追加

  • ドメインの管理画面にログイン
  • DNS設定で以下を設定
    • example.com: ↑の@ のTXTレコード
    • _dmarc.example.com: ↑の_dmarc のTXTレコード

テストメール送信

設定が終わったらWP Mail SMTP by WPFormsの設定の「ツール」からテストメールが送信できる。
無事に成功したら完了

Ryo NakaeRyo Nakae

Two-Factorの設定

ユーザー → プロフィール に飛んだら下部に「Two-Factor設定」というセクションが増えている。

とりあえず、メール認証を有効化。

  • 「メールを有効化」にチェック
  • メイン認証方法を「メール」に設定

これでメール認証が有効になったので、ID/PASSだけのログインよりは安心出来るでしょう。

Ryo NakaeRyo Nakae

Two-Factorで認証アプリ（とリカバリーコード）を有効にする

Google Authenticatorや1Passwordなどのアプリで二段階認証出来るようにも出来る。が、僕の環境だとちょっと詰まったのでメモ。

WordPressアドレスとサイトアドレスは揃える

WordPressをヘッドレスCMSとして利用しているので、WordPressアドレスとサイトアドレスを別にしている。
ここが別だと、Two-Factorで認証アプリを有効化したときに、QRコードを読み取ってコードを入力するときに、CORSエラーで先に進めなかった。サーバーの設定にもよるだろうが、さくらのレンタルサーバだととりあえずエラーが起きた。

設定時はWordPressアドレスとサイトアドレスは同じにして、設定が完了したらまた別に戻したらOK。

このスクラップは2日前にクローズされました