【勉強メモ】deviseを実装させる④【挫折しない！】

##今回の目標
・テーブルに名前(name)カラムを追加させる
・nameでログインできるようにする

##１．名前の項目(nameカラム)を追加させる
今、deviseのデフォルトの状態で、モデルは以下の通りになっている。

| email | password |
|:-:|:-:|
|kaizoukuouni@naru.com| umigakirai|
|dorayaki_tabetai@22c.com|nezumikirai|
|pika_chu@denki.com| monsterballkirai |

emailとpasswordだけでログイン機能を実装するのはイヤだ。名前を追加したい。

そこで、nameカラムを追加して以下のようなモデルにしようと思う。

|name| email | password |
|:-:|:-:|:-:|:-:|
|Luffy|kaizoukuouni@naru.com| umigakirai|
|doraemon|dorayaki_tabetai@22c.com|nezumikirai|
|pikachu|pika_chu@denki.com| monsterballkirai |

###deviseのモデルにnameカラムを追加する
コマンドをつかってカラム追加

```
$ rails g migration add_カラム名_to_テーブル名 カラム名:データ型
```

今回はusersのテーブルだから以下のようにコマンド入力を行う。

```
$ rails g migration add_name_to_users name:string
```

add(追加)したい、nameをusersにね。nameのデータ型はstring。

モデル名は複数形。

マイグレーションファイルを確認する。次のやつができている。

```db/migrate/20171008113553_add_name_to_users.rb
  def change
    add_column :users, :name, :string
  end
```

マイグレーションを反映させる

```
$ rails db:migrate
```

<img width="567" alt="スクリーンショット 2017-10-08 20.39.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/205578/ebc22058-262c-6bc1-259b-94d8b8868ff6.png">


これでuserテーブルにnameカラムが追加された。

<img width="651" alt="スクリーンショット 2017-10-08 20.37.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/205578/47e13cad-90c7-2d15-9a8c-774af4238830.png">

###追加したカラムの変更を許可する
コントローラのストロングパラメータに追加カラムを記述する必要がある。…ストロングパラメータって何だ？？？

```app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :authenticate_user!
  before_action :configure_permitted_parameters, if: :devise_controller?

protected

    def configure_permitted_parameters
      # sign_upのときに、nameをストロングパラメータに追加する
      devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :email])
      # account_updateのときに、nameをストロングパラメータに追加する
      devise_parameter_sanitizer.permit(:account_update, keys: [:name, :email])
    end

end
```

ストロングパラメータって何？
とりあえず、今見ているテキストのコードを打つ。ここで躓いていてもしかたないしな。

##２．nameで認証できるように設定する。
###認証キーをnameに変更。

```config/initialize/devise.rb
~省略~

  # ==> Configuration for any authentication mechanism
  # Configure which keys are used when authenticating a user. The default is
  # just :email. You can configure it to use [:username, :subdomain], so for
  # authenticating a user, both parameters are required. Remember that those
  # parameters are used only when authenticating and not when retrieving from
  # session. If you need permissions, you should implement that in a before filter.
  # You can also supply a hash where the value is a boolean determining whether
  # or not authentication should be aborted when the value is not present.
  # config.authentication_keys = [:email]

  config.authentication_keys = [:name]

~省略~
```

``config.authentication_keys = [:email]`` の下に ``config.authentication_keys = [:name]`` を追加。

##３．nameをviewで表示させる。
###認証Topページとかとかを修正してnameを表示させる

```app/views/devise/sessions/new.html.erb
<h2>ログイン</h2>

<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>

  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name, autofocus: true %>
  </div>

  <div class="field">
    <%= f.label :password %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

  <% if devise_mapping.rememberable? -%>
    <div class="field">
      <%= f.check_box :remember_me %>
      <%= f.label :remember_me %>
    </div>
  <% end -%>

  <div class="actions">
    <%= f.submit "Log in" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>
```

```app/views/posts/index.html.erb
<h1>ようこそ、俺たちの花園へ！！</h1>
逢いたかったよ <%= current_user.name %>さん
```

``current_user``がログインユーザーのこと。

###emailフィールドを削除する
名前で入力するからログイン画面でのメールフォームは不要。だから、emailフィールドを削除する。

##よーし、新規登録をするぞ！！
今、目の前にうまい棒があるから、名前は「umaibo」にして、メールアドレスは「umaibo@10en.com」にしよう。

<img width="470" alt="スクリーンショット 2017-10-08 22.09.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/205578/ab85287c-e476-6b00-dff9-da3c5f1f0115.png" border="1">

<img width="776" alt="スクリーンショット 2017-10-08 22.17.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/205578/82aefe7f-d90e-9619-089d-efe2635077da.png">

やったー、大成功だ！！

###名前を変更してみる
日本語でもおｋ？？？

<img width="461" alt="スクリーンショット 2017-10-08 22.20.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/205578/a64a7c34-7af1-a2f1-d67f-9e56180b74db.png">


ログインするときも日本語でいけました♪


##ここまでやってきて…
今回は難しかった。これは難しいし、途中、何を入力しているのか分からなかった。
ただ、完璧に理解しないと次にいかない！みたいなことをやっていると、いつまで経っても先に進むことはできないから、今回はとりあえずやり方だけ載せておこう。
あとできっと分かるようになるかもしれないしな。

分からないところが出てきて、止まってしまうクセを無くさないといけないな。「まぁ、そのうち分かるだろう」くらいの割り切りがないといけない。

エンジニアへの道は険しい…

#過去の学習
【勉強メモ】deviseを実装させる①【挫折しない！】
https://qiita.com/takatoshi0905/items/d39832df81f3c6550b42
【勉強メモ】deviseを実装させる②【挫折しない！】
https://qiita.com/takatoshi0905/items/dbb303900f79f1208585
【勉強メモ】deviseを実装させる③【挫折しない！】
https://qiita.com/takatoshi0905/items/6f7e73ada9307657d679