deviseのインストール

Facebookログインを実装するためには、deviseというgemを使います。
deviseは、railsでlogin,logout機能を簡単に実装することができるようになるgemです。

インストールには下記の記事が非常に参考になりました。
https://qiita.com/cigalecigales/items/f4274088f20832252374


まずdeviseをインストールし、使える状態にします。
Gemfileに

```:Gemfileに追記
gem 'devise'
```

を追記して保存します。

保存したら、追加したgem（devise）をインストールします。

```:インストールコマンド
$ bundle install
```

無事にdeviseがインストールされたら、deviseの設定ファイルをrailsアプリにインストールします。

```:deviseの設定ファイルインストールコマンド
$ rails generate devise:install
```

無事に実行されると、下の２つのファイルがcreateされるはずです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/128651/410c1fe6-1f0b-ea6d-2cba-e872c299d88c.png)

```:インストール成功時のメッセージ
Running via Spring preloader in process 74719
      create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files.
 Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port:3000 }

     In production, :host should be set to the actual host of your application.


  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:
                 root to: "home#index"


  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:
                 <p class="notice"><%= notice %></p>
                 <p class="alert"><%= alert %></p>


  4. You can copy Devise views (for customization) to your app by running:
       rails g devise:views

===============================================================================
```

このように４つのメッセージが表示されます。

1. デフォルトURLの指定

```:デフォルトのURLを指定してください
  1. Ensure you have defined default url options in your environments files.
 Here
     is an example of default_url_options appropriate for a development environment
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { host: 'localhost', port:3000 }

     In production, :host should be set to the actual host of your application.
```

デフォルトのURL（開発環境の場合は、localhost:3000）を設定してくださいという意味です。


例にあるように、追記します。場所はどこでも大丈夫なのかな。

```:config/environments/development.rbへの追記
config.action_mailer.default_url_options = { host: 'localhost', port:3000 }
```

2.root_urlの指定

```:rootを指定してください
  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:
                 root to: "home#index"
```

rootのpathを指定してくださいという意味です。
1番で追記したURLにアクセスした際に表示されるページを指定します。
また、devise内でroot_urlに遷移するタイミング（会員登録終了後など）があるので、その時の表示ページにもなります。

```:config/routes.rbへの追記
root_url遷移時に表示させたいページ（コントローラー名#アクション名）
```

3.flashメッセージ表示場所の指定

```:flashメッセージを表示するためのタグを指定してください
  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:
                 <p class="notice"><%= notice %></p>
                 <p class="alert"><%= alert %></p>
```

flashメッセージを表示するためのタグをapplication.html.erb内に記述してくださいという意味です。
bodyタグのすぐ下にしました。

```:application.html.erbへの追記
  <body>
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>

    <%= yield %>
  </body>
```

4.view変更時の設定

```:viewを変更する際の設定方法
  4. You can copy Devise views (for customization) to your app by running:
       rails g devise:views
```

viewをカスタマイズするためには、上記のコマンドを実行する必要があります。

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

すると

```:
Running via Spring preloader in process 48740
      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_links.html.erb
      invoke  form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/email_changed.html.erb
      create    app/views/devise/mailer/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb
```

と表示され、viewを変更するためのファイルがcreateされます。
とりあえず登録画面だけ見たいという時は、実行しなくても問題はありません。

次にdeviseを使用するUserモデルを作成します。

```:deviseを利用するモデルの作成
$ rails g devise User
```

```:成功時のログ
Running via Spring preloader in process 61750
      invoke  active_record
      create    db/migrate/20180513111448_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
```

createされたUserモデルは、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/128651/bd6d6884-f14d-dab8-ec61-f025ed825a67.png)
のようになっています。

必要なモジュールのコメントアウトを外す必要があるので、今回は
:omniauthable以外のコメントアウトを外します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/128651/99b63348-ed68-b6c9-2550-c77e15f18cfc.png)

次に追加したモジュールをマイグレーションファイルの方でも追加します。
この辺りの、createされたファイルのコメントアウトをいじらなかったからなのか、
Signup時にエラーがなくならず、かなり時間がかかってしまいました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/128651/7f1e5a8a-d1ea-37a3-ab20-8dabfd998f05.png)

そしてDBに反映させます。

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


http://localhost:3000/users/sign_up
にアクセスして、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/128651/c01d8f07-91f0-8216-9bd9-5a8fd20c0bde.png)

が表示され、Sign upできれば完成です。