Rails5.2 bootstrapとclearanceで認証機能をサクッと実装

updated on 2019-07-25

認証(クリアランス) と bootstrap

前提 jqueryを入れている(bootstrapはjqueryが必要)

1.gemのインストール

Gemfile
...
gem 'clearance'
gem 'bootstrap-sass'
gem 'sass-rails'

bundle install

2. bootstrapのcssを読み込む

#assets/stylesheets/application.scss
...
@import 'bootstrap-sprockets';
@import 'bootstrap';

bootstrapのjsを読み込む

#assetes/javascripts/application.js
...
//= require bootstrap-sprockets

以上でbootstrapは終了

3.クリアランスの設定ファイルをインストールする(deviseの導入と同じ要領)

rails generate clearance:install

端末に以下のログが確認できるはず

create  config/initializers/clearance.rb
      insert  app/controllers/application_controller.rb
      create  app/models/user.rb
      create  db/migrate/20161231132513_create_users.rb

*******************************************************************************

Next steps:

1. Configure the mailer to create full URLs in emails:

    # config/environments/{development,test}.rb
    config.action_mailer.default_url_options = { host: 'localhost:3000' }

    In production it should be your app's domain name.

2. Display user session and flashes. For example, in your application layout:

    <% if signed_in? %>
      Signed in as: <%= current_user.email %>
      <%= button_to 'Sign out', sign_out_path, method: :delete %>
    <% else %>
      <%= link_to 'Sign in', sign_in_path %>
    <% end %>

    <div id="flash">
      <% flash.each do |key, value| %>
        <div class="flash <%= key %>"><%= value %></div>
      <% end %>
    </div>

3. Migrate:

    rake db:migrate

*******************************************************************************

4. step1. environmentの　development.rb / test.rb にて email中にURLを生成するために必要なメイラーの設定を行う(production.rbでは自分のドメインの記載が必要になる)

#config/environments/development.rb
...
  config.action_mailer.default_url_options = { host: 'localhost:3000' }
  # config.action_mailer.default_url_options = { host: 'localhost', port: 3000 } でも良い
...

step2. アプリケーションのレイアウトに, セッションとフラッシュの表示機能を実装する

<% if signed_in? %> Signed in as: <%= current_user.email %> <%= button_to 'Sign out', sign_out_path, method: :delete %> <% else %> <%= link_to 'Sign in', sign_in_path %> <% end %> <div id="flash"> <% flash.each do |key, value| %> <div class="flash <%= key %>"><%= value %></div> <% end %> </div>

セッション表示の例 (bootstrapを使って好きに作ってよし!!)

#views/layouts/_navigation.html.erb

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">ようこそブログへ!!</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
          <li><%= link_to 'Home', root_path %></li>
                <% if signed_in? %>
                <li><%= link_to '新規投稿', new_article_path %></li>
                <li>Signed in as: <%= current_user.email %></li>
                <li><%= link_to 'ログアウト', sign_out_path, method: :delete %></li>
              <% else %>
                <li><%= link_to 'ログイン', sign_in_path %></li>
              <% end %>
    </ul>
    </div>
  </div>
</nav>

フラッシュの例

#views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>マイブログ</title>
    <%= csrf_meta_tags %>

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

  <body>
    <%= render "layouts/navigation" %>
    <div id="flash">
      <% flash.each do |key, value| %>
        <div class="flash <%= key %>"><%= value %></div>
      <% end %>
    </div>
    <div class="container-fluid">
      <%= yield %>
    </div>
  </body>
</html>

step3 rails generate clearance:install を行ってuserモデルが生成されたので、マイグレーションファイルを生成する

rake db:migrate

以上でクリアランスの設定終了

認証のviewをいじったり、認証のルートを変えたり、ボットを入れたりしたい場合はこちらで詳しい内容をご確認ください