deviseについて
deviseを使えば、Ruby on Railsにユーザー機能を付け加えることが出来ます。
今回は、以前作りかけていたアプリケーションに、deviseを使ってユーザー機能を付けていきたいと思います。
まずは、Gemfileに以下の記述をします。
gem 'devise'
その後、bundle installをします。
Using devise 4.7.1
と出てきたので、おそらくすでにdeviseのgemのインストールは完了しています。
次に、rails g devise:installを実行します。
そうすると初期設定のファイルが生成されます。
create config/initializers/devise.rb
create config/locales/devise.en.yml
セットアップの説明も表示されます(3,4をピックアップします)。
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>
これは、フラッシュメッセージを表示させるための記述です。
application.html.erbの<body>の中に記述します。
4. You can copy Devise views (for customization) to your app by running:
rails g devise:views
rails g devise:viewsは実行しておきます。
実行すると色んなビューファイルが生成されます。
それらは全て、deviseフォルダに入っています。
次に、rails g devise userを実行します。
create db/migrate/20200105055453_devise_create_users.rb
create app/models/user.rb
route devise_for :users
マイグレーションファイルとモデルが生成され、ルーティングが追加されました。
しかし、ここでブラウザをリロードして動作確認をしてみるとエラーが起こります。
devise_forが認識されていないようなので、ctrl + Cでサーバーをストップさせ、もう一度rails sをします。
そうすると、先ほどのエラーは解決しました。
しかし、別のエラーが発生。
マイグレーションファイルを保留していることが原因のエラーです。
これは、「rails db:migrateをしなさい」という意味です。
そのため、rails db:migrateをして、usersテーブルを作成します
(先ほどのエラーは解決しました)。
次に、ヘッダーに新規登録画面へのリンクを付けたいと思います。
rails routesをすると、
new_user_registration GET /users/sign_up(.:format) devise/registrations#new
新規登録画面へのパスが出てきました。
application.html.erbの<header>内に以下の記述をします。
<%= link_to "signup", new_user_registration_path %>
このようなリンクが出来ました！
クリックすると、
deviseによって作成された新規登録画面へ飛びます。
test@gmailというメールアドレスとパスワードを入力して、Sign upボタンを押すと、usersテーブルにデータが保存されました。
次に、ログイン機能(sign_in)を実装します。
<%= link_to "login", new_user_session_path %>
新規登録の下にこの1行を追記します。
パスは、rails routesで調べました。
new_user_session GET /users/sign_in(.:format) devise/sessions#new
ログインページへのリンクが出来ました。
クリックします。
ログインページに飛びました。
先ほど新規作成したユーザーでログインしてみます。
このフラッシュメッセージが出たので、ログインが出来たということです。
ログアウトページへのリンクを指定するときは、
<%= link_to "logout", destroy_user_session_path
, method: :delete %>
このように、メソッドを指定します。
ビューにクラス名を当てて、user.scssなどのファイルを作成して編集をすれば、カスタマイズすることも可能です。
以上。
