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で最初に飛ぶページのルーティングを設定してください。
root 'home#top'
でこのような場合、homeコントローラーとtopページを作成する必要がありますが、特に指定はないため、
好きなように設定してみてください。
3、Flashメッセージの設定
<!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
を開くと、
このように、サインアップの画面が表示されてれいます。
http://localhost:3000/users/sign_in
今度はこのリンクを開いてみると、
このようにログイン画面が表示されていれば成功です。
以上が
deviseの実装方法でした。
細かい設定を知りたい方は、deviseの公式文を見て参考にしてください。
公式ドキュメントはこちらです。
https://github.com/plataformatec/devise