↓↓クリックして頂けると励みになります。
Ruby on Railsでログインを実装する時、「device」を活用すると素早く実装することができます。
deviseはユーザーの登録、ログイン、ログアウト、パスワードリセットなどの認証機能があり、Gメールの設定をすることで、セキュリティが向上します。
バージョン4.8をGemFileに記述します。
Rails7.0を使用するときはバージョン4.9にしてください。
gem 'devise', '~> 4.8', '>= 4.8.1'
バンドルします。
コマンド
bundle
デバイスをインストールします。
コマンド
rails g devise:install
下記のようなインフォメーションがでますので、その流れですすめます。
=============================================================================== Depending on your application's configuration some manual setup may be required: 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. * Required for all applications. * 2. Ensure you have defined root_url to *something* in your config/routes.rb. For example: root to: "home#index" * Not required for API-only Applications * 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> * Not required for API-only Applications * 4. You can copy Devise views (for customization) to your app by running: rails g devise:views * Not required * ===============================================================================
まず、ユーザーテーブルを作ります。
コマンド
rails g devise user
ビューを作成します。
コマンド
rails g devise:views
マイグレーションを適用します。
コマンド
rails db:migrate
メールが送れるように設定します。
これは開発環境での設定になります。
「config\environments\development.rb」ファイルの末尾に以下の記述を追加します。
# デバイスのメール設定 config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
「app\views\layouts\application.html.erb」ファイルのbodyタグに以下の記述を追加します。
<p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p>
Webサーバーを起動して表示を確認してみます。
http://localhost:3000/users/sign_up
まだダサいですがサインアップは機能します。
ユーザ名を登録するフィールドを追加します。
コマンド
rails g migration AddFullnameToUser full_name:string
マイグレーションを適用します。
コマンド
rails db:migrate
許可パラメータに「full_name」を追加します。
これによって「permitted_parameters」で許可されたパラメータのみ変更が可能となります。
「app\controllers\application_controller.rb」ファイルを以下のように更新して下さい。
class ApplicationController < ActionController::Base before_action :configure_permitted_parameters, if: :devise_controller? protected def configure_permitted_parameters devise_parameter_sanitizer.permit(:sign_up, keys: [:full_name]) devise_parameter_sanitizer.permit(:account_update, keys: [:full_name]) end end
認証ビューを更新します。
記述更新 【app\views\devise\registrations\new.html.erb】
<div class="container px-4"> <div class="row gx-5"> <div class="col"> <div class="card w-100 mb-3"> <div class="card-body"> <h5 class="card-title text-danger h3"><strong>レポーター新規登録</strong></h5> <p class="card-text"><strong>魔法のペンを手に入れよう！</strong>言葉で世界を変える力があなたの手に。レポーターとしての才能を発揮し、魔法のペンを手に入れるために登録しましょう。</p> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <div class="mb-5 mt-5"> <label for="exampleInputEmail1" class="form-label">ペンネーム</label> <%= f.text_field :full_name, autofocus: true, placeholder: "ペンネーム", class: "form-control" %> <div id="emailHelp" class="form-text">あなたのペンネームは、世界中で広がる素晴らしいストーリーの始まりです。今すぐ登録し、その世界への扉を開きましょう。</div> </div> <div class="mb-5"> <label for="exampleInputEmail1" class="form-label">Eメールアドレス</label> <%= f.email_field :email, autofocus: true, placeholder: "Eメールアドレス", class: "form-control" %> <div id="emailHelp" class="form-text">あなたのメールは他の誰とも共有しません。</div> </div> <div class="mb-3"> <label for="exampleInputEmail1" class="form-label">パスワード</label> <%= f.password_field :password, autocomplete: "off", placeholder: "パスワード", class: "form-control" %> <div id="emailHelp" class="form-text">強力なセキュリティを確保するために、最低でも6文字以上のパスワードが必要です。</div> </div> <div class="mb-5"> <label for="exampleInputEmail1" class="form-label">パスワード確認</label> <%= f.password_field :password_confirmation, autocomplete: "off", placeholder: "パスワード確認", class: "form-control" %> <div id="emailHelp" class="form-text">パスワード確認： 確認のため、入力したパスワードをもう一度入力してください。同じパスワードを入力する必要があります。</div> </div> <%= f.submit "登録", class: "btn btn-danger w-100" %> <% end %> <%= render "devise/shared/links" %> </div> </div> <div class="card w-100 mb-5"> <div class="card-body"> <h5 class="card-title text-dark h6">下記サービスアカウントでの登録はこちら</h5> <p class="card-text"></p> <a href="#" class="btn btn-primary w-100">Google</a> </div> </div> </div> </div> </div>
このようにBootstrapを活用することで、見栄えも良くなります。
↓↓クリックして頂けると励みになります。
