①Railsで作ったメモアプリにログイン機能を実装【devise】

今回Railsで作成したメモアプリにログイン機能を実装するための手順を示していく。今回Memo_appディレクトリにメモアプリを作成しているのでその配下でログイン機能を実装していく。

【環境】

deviseを使用
仮想環境でdebian使用

①gem "devise"をbundleでinstallする ▼Gemfile

gem "devise" # 追加

②ターミナルで$ bundle install実行

③ターミナルで$ rails g devise:install　deviseの設定ファイルをrailsアプリケーションにインストールするためのコマンド。

 create  config/initializers/devise.rb
      create  config/locales/devise.en.yml

④ターミナルで$ rails g devise User name:stringでモデルを作成する

/Memo_app$ rails g devise User name:string
      invoke  active_record
      create    db/migrate/20230905042124_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

上記2つのファイルが作成される。

⑤ターミナルで$ rails db:migrate

== 20230905042124 DeviseCreateUsers: migrating ================================
-- create_table(:users)
   -> 0.0015s
-- add_index(:users, :email, {:unique=>true})
   -> 0.0006s
-- add_index(:users, :reset_password_token, {:unique=>true})
   -> 0.0004s
== 20230905042124 DeviseCreateUsers: migrated (0.0027s) =======================

⑥ターミナルで$ rails g devise:controllers usersを実行しコントローラーを作成する

Memo_app$ rails g devise:controllers users
      create  app/controllers/users/confirmations_controller.rb
      create  app/controllers/users/passwords_controller.rb
      create  app/controllers/users/registrations_controller.rb
      create  app/controllers/users/sessions_controller.rb
      create  app/controllers/users/unlocks_controller.rb
      create  app/controllers/users/omniauth_callbacks_controller.rb
===============================================================================

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

  Ensure you have overridden routes for generated controllers in your routes.rb.
  For example:

    Rails.application.routes.draw do
      devise_for :users, controllers: {
        sessions: 'users/sessions'
      }
    end

===============================================================================

※ここでサーバーをリスタートする。ここまでの作業でログイン画面が作成される。▼以下のようになればオッケー。

⑦ターミナルで$ rails g devise:views usersを実行しviewを作成する

/Memo_app$ rails g devise:views users
      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/users/shared
      create    app/views/users/shared/_error_messages.html.erb
      create    app/views/users/shared/_links.html.erb
      invoke  form_for
      create    app/views/users/confirmations
      create    app/views/users/confirmations/new.html.erb
      create    app/views/users/passwords
      create    app/views/users/passwords/edit.html.erb
      create    app/views/users/passwords/new.html.erb
      create    app/views/users/registrations
      create    app/views/users/registrations/edit.html.erb
      create    app/views/users/registrations/new.html.erb
      create    app/views/users/sessions
      create    app/views/users/sessions/new.html.erb
      create    app/views/users/unlocks
      create    app/views/users/unlocks/new.html.erb
      invoke  erb
      create    app/views/users/mailer
      create    app/views/users/mailer/confirmation_instructions.html.erb
      create    app/views/users/mailer/email_changed.html.erb
      create    app/views/users/mailer/password_change.html.erb
      create    app/views/users/mailer/reset_password_instructions.html.erb
      create    app/views/users/mailer/unlock_instructions.html.erb

⑧ログイン後にlocalhost:3000/my_memos　に行ってほしいので、app/controllers/application_controller.rbに以下を記述。

class ApplicationController < ActionController::Base
    before_action :authenticate_user! #localhost:3000/my_memosに行く前にログイン画面表示するための記述

    def after_sign_in_path_for(resource)
        my_memos_path # ログイン後に遷移するpathを設定
    end
end

⑨ログアウト機能の実装。app/controllers/application_controller.rbに以下を記述。

class ApplicationController < ActionController::Base
    before_action :authenticate_user!
    
    def after_sign_in_path_for(resource)
        my_memos_path # ログイン後に遷移するpathを設定
    end

    def after_sign_out_path_for(resource) #←追加
        my_memos_path # ログイン後に遷移するpathを設定
    end
end

※pathに関してはroutes.rb内にて確認

Rails.application.routes.draw do
  devise_for :users
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
  resources :my_memos, only: [:index]
end

上記resources :my_memos, only: [:index]のmy_memosの部分になる。

⑩config/routes.rbに以下を記述。

Rails.application.routes.draw do
  devise_for :users

  devise_scope :user do #そのままだとGETになっているのでdestroyに変更する記述を追加。
    get '/users/sign_out' => 'devise/sessions#destroy'
  end
  
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
  resources :my_memos, only: [:index, :new, :create, :edit, :update, :destroy, :show]
end

devise_scopeとはdeviseに新しくルーティングを追加したい場合に使う。(これを使わないとエラーが発生）

⑪index.html.erbにログアウトボタンを記述

<h1>メモアプリ</h1>
<% if user_signed_in? %>
    <%= link_to "ログアウト", destroy_user_session_path, method: :delete %>
<% else %>
    <%= link_to "サインアップ", new_user_registration_path %>
    <%= link_to "ログイン", new_user_session_path %>
<% end %>
<div class="button"><%= link_to "新規メモ追加", new_my_memo_path %></div>
<ul>
    <% @my_memos.each do |memo| %>
        <li>
            <h2><%= link_to memo.title , my_memo_path(memo)%></h2>
            <small><%= memo.created_at %></small>
        </li>
    <% end %>
</ul>

以上でログインおよびログアウトの実装はできたが、みんな同じメモが表示されるためUserIDごとに表示させるように次回実装していく。

U-Yuri’s 備忘録

プログラミングを勉強しています。アウトプットに活用しているブログです。

①Railsで作ったメモアプリにログイン機能を実装【devise】