グロースエンジニアのブログ

Ruby on Rails エンジニアです!開発に当たって勉強したことをまとめていこうと思います!

【Rails5】devise でログイン機能を実装する

devise を使ってログイン機能を実装してきます。

2016年7月30日時点で Rails5 対応しているのかちょっとわからなかったのですが、実装できたのでメモしておきます。

その他、devise 関連記事を書いているので参考にどうぞ。

【Rails5】devise を日本語化する

【Rails5】devise でログイン後、ログアウト後のページを設定する

【Rails5】devise でログイン後ページをユーザー意図に合わせて変更する

devise をインストール

Gemfile に以下を追加して、ターミナルから bundle install を実行します。

gem 'devise'

次にターミナルから rails generate devise:install を実行するとインストール手順が表示されます。

➜  app git:(master) rails generate devise:install
Running via Spring preloader in process 33841
      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:
     <%= notice %>
     <%= alert %>

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

       rails g devise:views

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

この手順通りにやっていきます。

1. 開発環境でのメール設定

config/environments/development.rb ファイル内に以下を追記します。

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

2. route を追加

config/routes.rb に root to: 'home#index' を追加します。

3. ログイン関連の flash メッセージの表示

app/views/layouts/application.html.erb に flash メッセージ用のタグを追加

<%= notice %>
<%= alert %>

4. ログイン関係の view を作成

ターミナルから以下を実行することでログイン関連のviewのベースを作成します。

➜  app git:(master) rails g devise:views
Running via Spring preloader in process 34244
      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/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb

ログインユーザー用のUserモデルの作成

ターミナルから rails g devise User を実行し、ログインしたユーザーを登録するモデルを作成します。

ログイン後のページを作る

テスト用に以下のようなログイン後のページを作成します。

# app/controllers/mypages_controller.rb
class MypagesController < ApplicationController
  before_action :authenticate_user!

  def show
  end
end


# app/views/mypages/show.html.erb
mypage#show


# config/routes.rb
Rails.application.routes.draw do
  devise_for :users
  root to: 'home#index'

  resource :mypage
end

サーバーを再起動し、http://localhost:3000/mypage にアクセスするとログインページが表示されると思います。

これは、 before_action :authenticate_user! がログインしているかをチェックしており、していなければログインページにリダイレクトされます。

ログイン、ログアウトのリンクを追加する

ログインしていない状態で、ログインが必要なページに直接アクセスするとログインフォームにリダイレクトされます。

ただ、ログインフォームへのリンクとログアウトするリンクが必要となります。

そのためのリンクが以下です。

<% if user_signed_in? %>
  <%= link_to('Logout', destroy_user_session_path, :method => :delete) %>
<% else %>
  <%= link_to('Login', new_user_session_path) %>
<% end %>

これをリンクを追加したい場所に追加すれば大丈夫です。

以上、devise の実装でした。

次は devise を日本語化していきたいと思います。

その他、devise 関連記事はこちら

【Rails5】devise を日本語化する

【Rails5】devise でログイン後、ログアウト後のページを設定する

【Rails5】devise でログイン後ページをユーザー意図に合わせて変更する