見出し画像
Photo by noouchi

PicTweetユーザー登録しよう

SyosenPS

ユーザー関連の機能はGemを使用

deviseを使用したユーザー登録をしていこう

ログイン機能の実装

【手順】
1. Gemをインストールしてサーバーを再起動しよう
2. コマンドを利用してdeviseの設定ファイルを作成しよう
3. コマンドを利用してUserモデルを作成しよう
4. 未ログイン時とログイン時でボタンの表示を変える実装をしよう
5. コントローラーにリダイレクトを設定しよう

ライブラリをインストールしよう


deviseデバイス

ユーザー管理機能を簡単に実装するためのGem

Gemfileの最終行に入力
gem 'devise'

ターミナル
# Gemをインストール
% bundle install

サーバーを再起動

deviseの設定ファイルを作成

ターミナル
% rails g devise:install

Userモデルを作成

ターミナル
% rails g devise user

db/migrate/20XXXXXXXXX_devise_create_users.rb
ファイルが出来上がる！
いつも念力でできたみたいな感覚になるやつ。

テーブルを作成しよう

db/migrate/20XXXXXXXXX_devise_create_users.rb　ファイルへ
class DeviseCreateUsers < ActiveRecord::Migration[6.0]
def change
create_table :users do |t|
## Database authenticatable
t.string :email, null: false, default: ""
t.string :encrypted_password, null: false, default: ""

 ## Recoverable
 t.string   :reset_password_token
 t.datetime :reset_password_sent_at

 ## Rememberable
 t.datetime :remember_created_at

 # 省略

 t.timestamps null: false

end

add_index :users, :email, unique: true
add_index :users, :reset_password_token, unique: true

add_index :users, :confirmation_token, unique: true

add_index :users, :unlock_token, unique: true

end
end


deviseのビュー作成

deviseを使用してログイン機能を実装すると、自動的にログイン画面とサインアップ画面が生成される。
↓
それは・・・、
deviseのGem内に存在するビューファイルを読み込んでいるため

rails g devise:viewsレイルズ ジー デバイス ビューズコマンド

ターミナル
% rails g devise:views

できた！
サインアップ画面はapp/views/devise/registrations/new.html.erb
ログイン画面のビューはapp/views/devise/sessions/new.html.erb

先にログイン画面
<div class="contents row">
<div class="container">
<h2>Log in</h2>
<%= form_with model: @user, url: user_session_path, id: 'new_user', class: 'new_user', local: true do |f| %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, 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.label :remember_me %><br />
      <%= f.check_box :remember_me %>
    </div>
  <% end -%>

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

</div>
</div>

次にサインアップ画面
app/views/devise/registrations/new.html.erb　ファイルへ
<div class="contents row">
<div class="container">
<h2>Sign up</h2>
<%= form_with model: @user, url: user_registration_path, id: 'new_user', class: 'new_user', local: true do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
      <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

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

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

</div>
</div>

確認用URL
http://localhost:3000/users/sign_in

ドキドキする・・・。

rails db:migrate:status
マイグレイションファイルが実行されているか否かを確認できる

今回は余計なファイルが保存されていたため、「down」表示がでた。
気をつけよう！

ちなみに、
ターミナルで　↑キーを押すと、一つ前のコマンドが表示されるよ。

サインアップ時の名前登録

usersテーブルにカラムを追加しよう

サインアップ時に登録する情報は
・メールアドレス
・パスワード
＞＞これに加えてニックネームを登録する

rails g migrationレイルズ ジー マイグレーションコマンド

usersテーブルにnicknameカラムをstring型で追加

ターミナル

% rails g migration AddNicknameToUsers nickname:string
% rails db:migrate

新規登録画面のビューを編集

app/views/devise/registrations/new.html.erb ファイル
<div class="contents row">
<div class="container">
<h2>Sign up</h2>
<%= form_with model: @user, url: user_registration_path, id: 'new_user', class: 'new_user', local: true do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>

  <div class="field">
    <%= f.label :nickname %> <em>(6 characters maximum)</em><br />
    <%= f.text_field :nickname, autofocus: true, maxlength: "6" %>
  </div>

  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email %>
  </div>

  <div class="field">
    <%= f.label :password %>
    <% if @minimum_password_length %>
      <em>(<%= @minimum_password_length %> characters minimum)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "off" %>
  </div>

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

  <div class="actions">
    <%= f.submit "Sign up" %>
  </div>
<% end %>

</div>
</div>

devise_parameter_sanitizerデバイス パラメーター サニタイザーメソッド

app/controllers/application_controller.rbファイル
class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?

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

確認用UR L
http://localhost:3000/users/sign_up

いいなと思ったら応援しよう！