Rails Heroku で運用しているサイトで SendGrid を2段階認証にし API KEY を利用して SMTP 方式で Mail を送信する

Rails と Heroku を利用して Webサイトを運用していましたが SendGrid でセキュリティの観点から user_name と Password を利用した認証ではメールを送信することが不可になったようです。そこで、メールを送信できるように

- SendGrid の2段階認証を有効化
- API key を利用してSendGrid にアクセス

上記、設定にしなおしました。

## 手順
1. Heroku のダッシュボードから SendGrid にアクセスする。
2. SendGrid の設定画面から2段階認証を有効する。
3. SendGrid の設定画面から API key を作成し保存する。
4. Rails `config/environments/production.rb`で ActionMailer の設定を編集する。
5. Heroku の環境変数に取得した API key を追加する。
6. `git push heroku master`する。

### 環境
- Rails
- Heroku
- SendGrid（※ Heroku の add-ons）  
※インストール済みの前提でいきます。


# 1. Heroku のダッシュボードから SendGrid にアクセスする。
Heroku の Web サイトの Overview メニュー内の　Installed add-ons から Twillo SendGrid をクリックし SendGrid の Web サイトへアクセスします。
![blog_0_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/8360384d-7718-6d67-5f42-59a10076f1e3.png)
初めて Web サイトを訪問した場合、アカウントを有効化するために任意のメールアドレスに有効化リンクを送信することになると思います。そちらは対応してアカウントを有効にしてください。

# 2. SendGrid の設定画面から2段階認証にする。
① SendGrid へのアクセスを2段階認証にします。メニューより「Two-Factor」をクリックします。
![blog_1_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/363aa7db-f64e-8d0d-b9c4-e9b1ce69d753.png)
② 遷移したページの画面右上の「Add Two-Factor Authentication」ボタンをクリックします。
![blog_2_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/7feca49f-e71c-5cc7-a989-81f23d45f8e2.png)
③「OK, Got it」ボタンをクリックします。
![blog_3_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/0e183cd5-f6c7-209e-40b1-0945f2b09dea.png)
④ 携帯端末に SMS で確認コードを送信してもらいます。
![blog_4_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/1faf3335-b5b8-8bae-30e3-4e8b813e4665.png)
⑤「Country Code」は、Japan(+81)を選択、「Mobile Phone Number」に利用している携帯番号の頭の0を除いた番号を入力し「Next」ボタンをクリックします。
![blog_5_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/269ebb2e-f618-9281-759d-00cb8d1557e9.png)
⑥ SendGrid より携帯端末に届いた確認コードを入力し「Save」ボタンをクリックします。
![blog_6_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/4ae21e00-b748-fcc8-1b56-7f8fdbe68720.png)
⑦ 2段階認証が有効になりました。
![blog_7_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/6a98f92f-0e40-7f8b-5705-7649ff528b8e.png)

# SendGrid の設定画面から API key を作成し保存する。
① 2段階認証が有効になった後、API key を作成します。メニューより「API Keys」をクリックします。
![blog_8_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/9b65e437-6828-f22b-10e6-8a4d33819944.png)
② 繊維したページ右上の「Create APK Key」をクリックします。
![blog_9_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/9c1b4c90-dd44-f6dc-c751-7dffaa22e902.png)
③ 「API Key Name」にAPI key の名前を入力します、任意の名前で大丈夫です。「API Key Permissions」は「Full Access」を選択し「Create & View」をクリックします。
![blog_10_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/8f87a740-c2b5-414f-b6b8-61a9dfc9cf3c.png)
④ 作成したAPI key が表示されるので「Copied!」をクリックしメモ帳などに控えておきます。この値は、後で Heroku の環境変数に追加します。  控え終わったら「Done」をクリックします。
※こちらの画面を閉じるとAPI key の値は確認できなくなります。Heroku の環境変数に追加する前になくしてしまった場合は、新しくAPI key を作り直す必要があります。
![blog_11_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/c8639b06-2325-67e6-360b-88ebba6c3491.png)
⑤ SendGrid の API key が作成できました。SendGrid の Webサイトでの設定は以上になります。
![blog_12_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/6f582fb7-fe3d-11ae-d27f-f5157b61c4e8.png)

# 4. Rails `config/environments/production.rb`で ActionMailer の設定を編集する。
SendGrid で「2段階認証の有効化」と「API Key」の作成ができたので Rails の ActionMailerを SendGrid にアクセスして発行できるように`config/environments/production.rb`の設定を下記のように編集します。

```ruby:config/environments/production.rb
  config.action_mailer.perform_caching = false
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.perform_deliveries = true
  host = '********'
  config.action_mailer.default_url_options = { host: host }
  ActionMailer::Base.smtp_settings         = {
      address:              'smtp.sendgrid.net',
      user_name:            'apikey',
      password:             ENV['SENDGRID_API_KEY'],
      authentication:       :plain,
      domain:               'herokuapp.com',
      port:                 '587',
      enable_starttls_auto: true,
  }

```

※ host の「********」は自身の Rails アプリケーションのルート URL にしてください。

SendGrid に API key でアクセスする場合、user_name は、必ず'apikey' になります。
password に先程、作成した API key を渡します。Heroku の環境変数に API key を追加して読み込むようにするのでENV['SENDGRID_API_KEY']と入力しています。

参考：[Integrating with the SMTP API - ドキュメント | SendGrid](https://sendgrid.kke.co.jp/docs/API_Reference/SMTP_API/integrating_with_the_smtp_api.html)

# 5. Heroku の環境変数に取得した API key を追加する。
ターミナルで以下のコマンドを入力して Heroku の環境変数に SendGrid の API key を追加します。
※ ************************************* には SendGrid API key を作成した際に控えていた値を入力してください。

```terminal
$ heroku run config:set SENDGRID_API_KEY=*************************************
```
Heroku の環境変数の確認をしたい場合は、以下のコマンドで確認できます。

```terminal
$ heroku run config
```
Heroku への環境変数の追加は、Heroku の Web サイトからも追加できます。Settings ページの「Config Vars」から設定してください。
![blog_13_qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/a9b6d2ae-68c2-6985-1fc9-f2834f614e19.png)

# 6. `git push heroku master`する。
最後に下記コマンドで本番環境に反映させます。以上で SendGrid に API key でアクセスし SMTP 方式でメールを送信できるようになります。

```terminal
$ git push heroku master
```