【Rails】Devise+Letter_openerでメール認証機能の実装手順

## 目的
Deviseのconfirmableを使って、ユーザー新規登録時メール認証機能を実装します。

## 環境
Ruby 2.6.5
Rails 5.2.3
Devise 4.7.1
letter_opener_web 1.0

## Devise + Letter opener 実装手順
#### Deviseをインストールする

```ruby:Gemfile
gem 'devise', '~> 4.7', '>= 4.7.1'
```
```terminal:terminal
$ bundle install

$ rails g devise:install
      create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
```

#### 
<details><summary>ターミナルのステップによる、以下４つのセッティングの確認が必要です。（クリックで展開）</summary>
1. メールの設定をする
<div>

```ruby:config/environments/development.rb
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
```

</div>
2.rootの設定をする
<div>

```ruby:config/routes.rb
Rails.application.routes.draw do
  root "home#index"
end
```

</div>
3. フラッシュメッセージの設定をする
<div>

```ruby:app/views/layouts/application.html.erb
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
```

</div>
4. viewsファイルを生成する
<div>

```terminal:terminal
$ rails g devise:views
```

</div>
<img width="220" alt="Screen Shot 2019-10-27 at 17.46.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519582/9d9a9383-f2cb-62aa-2893-5afcb3112065.png">

</details>

以上のセッティングを完了したら、先ほど生成した`devise.rb`でconfig.mailer_senderの内容を編集しましょう。

```ruby:config/initializers/devise.rb
  # ==> Mailer Configuration
  # Configure the e-mail address which will be shown in Devise::Mailer,
  # note that it will be overwritten if you use your own mailer class
  # with default "from" parameter.
  config.mailer_sender = 'chimeiwang@example.com'
```

#### モデルを作成する
`rails generate devise <MODEL>`でモデルを作成します。

```terminal:terminal
$ rails g devise User
      invoke  active_record
      create    db/migrate/20191027084057_devise_create_users.rb
      create    app/models/user.rb
      invoke    test_unit
      create      test/models/user_test.rb
      create      test/fixtures/users.yml
      insert    app/models/user.rb
       route  devise_for :users
```

そして、confirmableの機能を追加します。

```ruby:app/models/user.rb
class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable, :confirmable
end
```

#### マイグレーションファイルを編集する
マイグレイトする前にconfirmableのコメントアウトを外します。

```ruby:db/migrate/xxxxxxxxxxx_devise_create_users.rb
class DeviseCreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      #略
      ## Confirmable
      t.string   :confirmation_token
      t.datetime :confirmed_at
      t.datetime :confirmation_sent_at
      t.string   :unconfirmed_email # Only if using reconfirmable
      #略
    end

    #略
    add_index :users, :confirmation_token,   unique: true
    #略
  end
end
```

```terminal:terminal
$ rails db:migrate
```

念のために、schemaを確認しましょう。

```ruby:db/schema.rb
ActiveRecord::Schema.define(version: 2019_10_27_084057) do

  create_table "users", force: :cascade do |t|
    #略
    t.string "confirmation_token"
    t.datetime "confirmed_at"
    t.datetime "confirmation_sent_at"
    t.string "unconfirmed_email"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["confirmation_token"], name: "index_users_on_confirmation_token", unique: true
    #略
  end
end
```

#### letter_opener_web をインストールする
```ruby:Gemfile
group :development do
  gem 'letter_opener_web', '~> 1.0'
end
```

```terminal:terminal
$ bundle install
```

```ruby:config/routes.rb
Your::Application.routes.draw do
  mount LetterOpenerWeb::Engine, at: "/letter_opener" if Rails.env.development?
  #略
end
```

```ruby:config/environments/development.rb
config.action_mailer.delivery_method = :letter_opener_web
```
これで、設定完了です。もう一度サーバーを起動して動作を確認します。

## 確認
<img width="262" alt="Screen Shot 2019-10-27 at 18.46.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519582/60a52a24-928a-7e87-c15e-90a81cedc3da.png">
<img width="699" alt="Screen Shot 2019-10-27 at 18.46.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519582/23c9b97a-079b-590a-447e-d2ffdc65c5d3.png">
確認オッケーです！

## 参考文献
https://github.com/plataformatec/devise
https://github.com/fgrehm/letter_opener_web