0
0

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 3 years have passed since last update.

Rails入門(ユーザ認証機能)[devise]

Last updated at Posted at 2021-03-23

これを見てくれている方はrails触るのが初めての人が多いとおもいます。
私がわかる範囲でしたら質問答えれる様にはします。ぜひコメントお願いします。
早速ですが作っていきましょう。
deviseとは
会員登録など難しいところ簡単に作ってくれるGemです。
#アプリ作成

ターミナル
$ rails new アプリ名
$ cd アプリ名

railsのアプリを作成後
アプリへ移動

ターミナル
$ rails s

railsを起動しlocalhost:3000へアクセスする。
railsの初期画面が表示されていたら成功です。
control + cでseverを止めます。次は、Gemの追加します。
#Gemの追加

Gemfile
gem 'devise'

Gemfileに記述できたらbundle installしましょう

ターミナル
$ rails g devise:install
$ rails g devise User #モデル名

ルーティングにdevise_for :users自動生成されていることも確認しましょう。
作成されたマイグレーションファイルに名前を保存できるように変更します

db/migrate/ooooo_deise_create_users.rb
def change
  #省略


   t.string :name
end

rails db:migrate実行し、データベースに反映させます。

models/user.rb
class User < ApplicationRecord
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
end
controllers/application_controller.rb

class ApplicationController < ActionController::Base
  before_action :authenticate_user!, except: [:top, :about] 
  #topとabout以外はログインしないと表示されない様にする

  before_action :configure_permitted_parameters, if: :devise_controller?
  #deviseが機能する前に、configure_permitted_parametersが実行されます。

  def after_sign_in_path_for(resource)
    posts_path #ログイン後のページ遷移先
  end

  protected

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name, :email])
    #新規登録(sign_up)の際に、name,emailのデータ操作が許可されます。
  end

ターミナルで$ rails g devise:views入力する

  • 新規登録時に名前とメールアドレスとパスワードを入力してログイン可能になる。
  • ログインページはメールアドレスとパスワードを入力してログインできるようになる。

簡単にレイアウト修正する。form_forが非推奨のためform_withに変更する

#レイアウトの修正
##新規登録ページ

views/devise/registrations/new.html.erb
<h2>新規登録</h2>
 <%= form_with model: @user, url: user_registration_path, id: 'new_user', class: 'new_user', local: true do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

   <div class="field">
    <%= f.label :"名前" %><br />
    <%= f.text_field :name, autofocus: true %>
   </div>

   <div class="field">
    <%= f.label :"メールアドレス(@は必要です)" %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
   </div>

   <div class="field">
    <%= f.label :"パスワード" %>
    <% if @minimum_password_length %>
    <em>(<%= @minimum_password_length %> 文字以上)</em>
    <% end %><br />
    <%= f.password_field :password, autocomplete: "new-password" %>
   </div>

   <div class="field">
    <%= f.label :"確認用パスワード" %><br />
    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
   </div>

   <div class="actions">
    <%= f.submit "登録" %>
    </div>
 <% end %>

##ログインページ

views/devise/sessions/new.html.erb
<h2>ログイン</h2>
  <%= form_with model: @user, url: user_session_path, local: true do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>

   <div class="fiel">
     <%= f.label :"メールアドレス(@必要です)" %><br />
     <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
   </div>

   <div class="field">
     <%= f.label :"パスワード" %><br />
     <%= f.password_field :password, autocomplete: "current-password" %>
   </div>

   <% if devise_mapping.rememberable? %>
    <div class="field">
     <%= f.check_box :remember_me %>
     <%= f.label :remember_me %>
    </div>
   <% end %>

   <div class="actions">
     <%= f.submit "ログイン" %>
   </div>
 <% end %>
 <%= render "devise/shared/links" %>

#ログインアウト機能

views/layouts/apliction.erb
<ul>
 <% if user_signed_in? %>
  <li><%= link_to 'ログアウト', destroy_user_session_path, method: :delete %></li>
 <% else %>
  <li><%= link_to '新規登録', new_user_registration_path %></li>
  <li><%= link_to 'ログイン', new_user_session_path %></li>
 <% end %>
</ul>

<% if user_signed_in? %>について

  • ユーザーがログインしていたらログアウトを表示する
  • ユーザーがログインしていなかったら新規登録、ログインを表示する

実際にrails sで確認し、出来ていた完了になります。お疲れ様でした。

0
0
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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?