🍎

【Rails】deviseのサインアップ方法変更(nameを追加)

2023/07/21に公開

Rails

はじめに

deviseを使って認証機能を実装します。
デフォルトは「メールアドレス」「パスワード」でサインアップできる状態になっているので、「ユーザー名」を追加していきます！

devise導入済み
usersテーブルにnameカラム追加済み
下記の続きです！

1.devise機能が備わっているviewを作成

ターミナル

$ rails g devise:views

以下のように出力されればOK!

ターミナル

Running via Spring preloader in process 15973
      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_error_messages.html.erb
      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

deviseの機能と関連付けられた、app/views/deviseが追加される。
app/views/devise/registrations/new.html.erb・・・サインアップページ
app/views/devise/sessions/new.html.erb・・・ログインページ

2.サインアップページにユーザー名のフォームを追加

app/views/devise/registrations/new.html.erb

<h2>Sign up</h2>

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <div class="field">                             ←ここから
    <%= f.label :name %><br>
    <%= f.text_field :name, autofocus: true %>
  </div>　　　　　　　　　　　　　　　　　　　　　　　 ←ここまで4行追加！

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autocomplete: "email" %>　←「autofocus: true」を削除
  </div>
:
:

ユーザー名を入力するためのフォームを4行分追加
email用のフォームにデフォルトで記述されていた「autofocus: true」を削除
「autofocus: true」とは・・・ページを表示した際、フォームにカーソルをあわせることができる

参考にさせていただきました🙏↓

ここまでで..../users/sign_upへアクセスすると、Name用のフォームが追加されている！

3.コントローラー編集

初期状態のdeviseはサインアップ時に「email」「password」しか受け取れない設定になっているため、「name」を保存できるように変更する。

deviseのストロングパラメータを編集
deviseのストロングパラメータはApplicationControllerに記述
　- deviseのコントローラーは直接修正できないため、全てのコントローラーに対する処理を行える権限を持つApplicationControllerに記述
・・・なぜ直接修正できないのかわからない🤔と思ってググったらわかりやすい記事を書いてくださっている方が…！

ということで、ApplicationControllerを編集していきます！

app/controller/application_controller.rb

class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end
end

追記した内容について　↓

app/controller/application_controller.rb

1.devise利用の機能(ユーザー登録やログイン認証等)を使う前に、
configure_permitted_parametersメソッドが実行される

 before_action :configure_permitted_parameters, if: :devise_controller?

app/controller/application_controller.rb

2.サインアップの際に「name」のデータ操作を許可する
　ストロングパラメータと同様の機能

def configure_permitted_parameters
   devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
end

「private」ではなく「protected」にすることで、他のコントローラーからも参照できるようにしている

以上でサインアップ時にユーザー名を使用できるようになりました！

続きます🙋

はじめに

1.devise機能が備わっているviewを作成

2.サインアップページにユーザー名のフォームを追加

3.コントローラー編集

Discussion