0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Deviseを用いた簡単なログイン機能実装方法

Last updated at Posted at 2019-06-17

devise 機能とは?

devise とは、Railsに入っているgemの一種で、新規登録やログイン機能を簡単に実装してくれます!

では、早速始めていきましょう!
まずは、 Gemfileにこのように記述してください。

1.deviseのダウンロード

```` gem 'devise' ```` その後に、
$ bundle install

すると、deviseが使えるようになります。

その後に、

$rails generate devise:install
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:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

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

       rails g devise:views

このように順番に設定するように手順が出てきます。
順を追って、設定していきますが、今回はメールの設定は行わないために、2から行っていきます。

2.ルーティングの設定

まずは、2番ですが、これはconfig/root.rbで最初に飛ぶページのルーティングを設定してください。

config/root.rb
root 'home#top'

でこのような場合、homeコントローラーとtopページを作成する必要がありますが、特に指定はないため、
好きなように設定してみてください。

3、Flashメッセージの設定

layouts/application.html
<!DOCTYPE html>
<html>
  <head>
    <title>DeviseFunction</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>
    <%= yield %>
  </body>
</html>

このように、bodyのすぐ下にFlashメッセージを書き込んでください。

 <body>
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>

こんな感じです。

4.viewの作成

$ rails g devise:views
Running via Spring preloader in process 4789
      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

このように、多くのviewファイルが生成されます。
viewファイルの中に、deviseのファイルがあり、これでデザインを触れるようになりました。

5.Userモデルの作成

$ rails g devise User
invoke  active_record
      create    db/migrate/20190617072331_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

そうすると、このようにUserモデルが自動的の作成してくれます。

6.Userテーブルをの作成

さっきのUserモデルを作成した時に、マイグレーションファイルも一緒の生成されました。

マイグレーションファイルとは、テーブルの設計図になります。それを元にテーブルが作られます。

$ rails db:migrate

このコマンドを打つと、

== 20190617072331 DeviseCreateUsers: migrating ================================
-- create_table(:users)
   -> 0.0027s
-- add_index(:users, :email, {:unique=>true})
   -> 0.0065s
-- add_index(:users, :reset_password_token, {:unique=>true})
   -> 0.0018s
== 20190617072331 DeviseCreateUsers: migrated (0.0124s) =======================

マイグレーションが実行され、テーブルが作られます。

これで、一通り、作り終えました。

7.確認

早速立ち上げて確認しましょう。 rails sで立ち上げて、

http://localhost:3000/users/sign_up
を開くと、
スクリーンショット 2019-06-17 16.39.46.png

このように、サインアップの画面が表示されてれいます。
http://localhost:3000/users/sign_in
今度はこのリンクを開いてみると、
スクリーンショット 2019-06-17 16.40.11.png

このようにログイン画面が表示されていれば成功です。

以上が
deviseの実装方法でした。
細かい設定を知りたい方は、deviseの公式文を見て参考にしてください。

公式ドキュメントはこちらです。
https://github.com/plataformatec/devise

まとめ

今回はdeviseというgemを使ってログイン機能と登録機能を実装していきました。 素早く、設定できてとても便利なので、ぜひ使ってみてください。
0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?