Ruby on RailsでWebサイト公開！に挑戦中

レンタルサーバーでＷｅｂサイトを公開すべく、Ruby on Railaの勉強をする日々を語ります。

2014年12月のINDEX

AngularJSで$resourceサービスを使ってサーバーデータ取得（2014.12.29）
Rails4とAngularJSでルート設定（2014.12.26）
Bootstrap3を使ってフッターパーシャルを作成（2014.12.24）
Bootstrap3とAngularJSを使ってナビゲーションメニューを作成（2014.12.22）
passengerを動作するユーザーを変更（2014.12.18）
クッキーを使って他ユーザーの情報を設定できないように設定（2014.12.16）
クッキーとbeforeフィルターを使って未ログインユーザーはログイン画面へ（2014.12.12）
Rails4でクッキーの削除とログアウト処理（2014.12.10）
Rails4でクッキーの有効期限や暗号化の設定（2014.12.08）
ヘルパーを使ってビューからメソッドを実行（2014.12.04）
base64トークンをクッキーに設定してユーザ認証（2014.12.02）

≪ 2014年11月 | ARCHIVE-SELECT | 2015年01月 ≫

| PAGE-SELECT |

2014年12月29日

AngularJSで$resourceサービスを使ってサーバーデータ取得

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSを使う形に変更しています。今回は、サーバーで定義したユーザー情報をAngularJSの$resourceサービスを使って取得して、表示できるようにしました。

加筆･修正した記事はこちら。

≫ Read More

１）Railsモデル作成、マイグレーション、テストデータ作成

①モデル作成

$ rails generate model User name:string email:string

②マイグレーション実行

$ rake db:migrate

③rails コンソールでテストデータ登録

$ rails c

User.create(name: "試験ユーザー１", email: "test1@example.com")
User.create(name: "試験ユーザー２", email: "test2@example.com")
User.create(name: "試験ユーザー３", email: "test3@example.com")

２）Railsコントローラを設定

①コントローラ作成

$ rails generate controller Users

②usrsコントローラのindexアクションを定義

AngularJSの$resourceサービスを使ってアクセスするのでjson形式で返します。
$ vi app/controllers/users_controller.rb


  def index
    @users = User.all
    render json: @users
  end

３）Railsのリソースルートを設定

AngularJSのルーティング設定と重複を避けるため、Railsのコントローラにアクセスする場合は"app"のプレフィックスをつけるようにします。

"localhost:3000/user"の場合は、AngularJSのルーティング
"localhost:3000/app/user"の場合は、Railsのルーティング

$ vi config/routes.rb


  scope '/app' do
    resources :users
  end

４）AngularJSでResourceサービスを導入

①Resourceをインクルード

$ vi app/assets/javascripts/application.js

下記追加
//= require angular-resource

②モジュールの依存性にngResource追加

$ vi app/assets/javascripts/mymodule.js.erb

myModule = angular.module('myModule', ['ui.bootstrap','ngRoute','ngResource']);

５）AngularJSのルート設定を追加

①Railsのルート設定確認

indexページのルートを確認します。重複しないように事前に確認します。

$ rake routes
users GET /app/users(.:format) users#index

②AngularJSのルート設定追加

$ vi app/assets/javascripts/mymodule.js.erb

.when("/users", {
templateUrl: "<%= asset_path('users/index.html.erb') %>"
})

６）AngularJSでユーザーインデックス用コントローラを定義

AngularJSのIndex用のコントローラから$resourceサービスを使ってRailsのコントローラにアクセスし、データベースからデータをJSON形式で取得します。

$ vi app/assets/javascripts/mymodule.js.erb


myModule.controller("UsersIndexCtrl", function($scope,$resource) {
  var rtn = $resource('/app/users');
  $scope.users = rtn.query();
});

７）AngularJSのパーシャルビューを定義

$ vi app/assets/templates/users/index.html.erb


<div ng-controller="UsersIndexCtrl">
<h1>ユーザー一覧</h1>
<table class="table table-bordered">
  <thead>
    <td>名前</td>
    <td>メールアドレス</td>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td>
        {{user.name}}
      </td>
      <td>
        {{user.email}}
      </td>
    </tr>
  </tbody>
</table>
</div>

８）ユーザー一覧へのリンクを追加

動作確認のため、ナビゲーションメニュー内にユーザー一覧へのリンクを追加します。

$ vi app/views/layouts/_header.html.erb

<li><%= link_to "Index", "/users" %></li>

９）ブラウザリロード対策

トップページからユーザー一覧への遷移では問題なく表示出来ましたが、ブラウザリロードなどで"http://localhost:3000/users"に直接アクセスすると"No route"のエラーとなってしまうため、とりあえず下記ルート設定を追加しました。

$ vi config/routes.rb

get 'users', to: 'layouts#index'

▲ Close

≫ EDIT

2014年12月26日

Rails4とAngularJSでルート設定

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSを使う形に変更しています。今回は、AngularJSの機能を使って静的ページのルーティングの設定を行いました。

加筆･修正した記事はこちら。

≫ Read More

home、about、help、contactなどの静的ページを作成し、Railsのルート設定を行っていましたが、AngularJSのルーティング設定を行いました。それに伴い、それぞれのビューもRailsのビューからAngularJSのパーシャルビューを使う形に変更しました。

１）AnguraJSのrouteの導入

①angular-routeをインクルード

$ vi app/assets/javascripts/application.js

//= require angular-route

②ngRouteを依存性の設定に追加

$ vi app/assets/javascripts/mymodule.js

myModule = angular.module('myModule', ['ui.bootstrap','ngRoute']);

２）ルートプロバイダ、パーシャルテンプレートの設定


$ vi app/assets/javascripts/mymodule.js.erb

myModule = angular.module('myModule', ['ui.bootstrap','ngRoute']);

myModule.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when("/static_pages/help", {
     templateUrl: "<%= asset_path('static_pages/help.html.erb') %>"
     })
    .when("/static_pages/about", {
     templateUrl: "<%= asset_path('static_pages/about.html.erb') %>"
     })
    .when("/static_pages/contact", {
     templateUrl: "<%= asset_path('static_pages/contact.html.erb') %>"
     })
    .otherwise({
     templateUrl: "<%= asset_path('static_pages/home.html.erb') %>"
     });
});

３）パーシャルテンプレートファイルを作成

$ vi app/assets/templates/static_pages/home.html.erb

<h2>ホーム</h2>

同様に、aboutとhelp、contactも作成

$ vi app/assets/templates/static_pages/about.html.erb
$ vi app/assets/templates/static_pages/help.html.erb
$ vi app/assets/templates/static_pages/contact.html.erb

４）レイアウトテンプレートファイルを作成

Railsのビューではなく、AngularJSのルーティング、パーシャルレイアウトを使用するので<%= yield %>の部分を<div ng-view></div>に変更します。

$ vi app/views/layouts/application.html.erb


<!DOCTYPE html>
<html ng-app="myModule">
<head>
  <title>Ruby on Rails with AngularJS | <%= yield(:title) %></title>
  <%= stylesheet_link_tag    "application", media: "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>
 <%= render 'layouts/header' %>
 <div ng-view></div>
 <%= render 'layouts/footer' %>
</body>
</html>

５）Railsのルート設定の変更

static_pagesというRailsのコントローラを作成し、ビュー、ルート設定を行っていましたが、AngularJSの機能を使用するので、ルート設定を変更しました。

①Railsのレイアウトファイルをrootにする

layoutsディレクトリ内のapplication.html.erbがrootになるようにするためLayoutsコントローラを作成し、下記のように設定しました。


$ vi app/controllers/layouts_controller.rb

def index
  render "layouts/application"
end

$ vi config/routes
  root 'layouts#index'

②デフォルトルートの設定

rootからhttp://localhost:3000/static_pages/helpなどに遷移した後、ブラウザをリロードするとno routeのエラーとなってしまうのを防ぐため、下記設定を追加してみました。


$ vi config/routes
  get 'static_pages/*other', to: 'layouts#index'

これでリロードしてもrootにアクセスされ、no routeのエラーが発生しなくなりました。とりあえずこの設定で様子を見ようと思います。

▲ Close

≫ EDIT

2014年12月24日

Bootstrap3を使ってフッターパーシャルを作成

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSを使う形に変更しています。今回はBootstrap3の設定を使ってフッターパーシャルを作成しました。今回は特にAngularJSの機能は使用しませんでした。

加筆･修正した記事はこちら。

≫ EDIT

2014年12月22日

Bootstrap3とAngularJSを使ってナビゲーションメニューを作成

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSを使う形に変更しようと思っています。今回はナビゲーションメニューを作成しました。

加筆･修正した記事はこちら。

≫ Read More

（１）インストール、初期設定

１）sample_ngという名前のアプリを作成

$ cd ~/rails_projects
$ rails new sample_ng

２）Gemfileを修正

・多くの機能がAngularJSと重複するようなので、ここではTurbolinksを無効にします。

・
$ cd sample_ng
$ vi Gemfile

ruby '2.0.0'
gem 'therubyracer', platforms: :ruby
#gem 'turbolinks', '1.1.1'

gem 'bootstrap-sass', '3.2.0.2'
gem 'autoprefixer-rails'
gem 'angularjs-rails'
gem 'angular-ui-bootstrap-rails'

※'bootstrap-sass'のバージョンが、3.1.1.1の場合に下記エラーが発生したため、上記のようにバージョンを指定しました。

Sass::SyntaxError: File to import not found or unreadable: bootstrap-sprockets.
３）バンドルインストール

$ bundle install

４）AngularJSをインクルード

$ vi app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-ui-bootstrap-tpls

５）Bootstrap3をスタイルシートファイルでインポート

$ vi app/assets/stylesheets/custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

（２）AngularJSのモジュール、コントローラ作成

１）モジュール作成

①スクリプトのファイル作成

$ vi app/assets/javascripts/mymodule.js

ファイルの先頭に'myModule'という名前でモジュール作成するため下記記述追加

myModule = angular.module('myModule', ['ui.bootstrap'])

②ビューにモジュールの設定

application.html.erbのhtmlタグに①で記述したモジュール名を記載

$ vi app/views/layouts/application.html.erb

<html ng-app="myModule">

③AngularJSスクリプトのインクルードの設定

application.jsに①で作成したJavaScriptファイルをインクルードする設定追加

$ vi app/assets/javascripts/application.js
//= require mymodule

（３）ナビゲーションメニュー作成

１）Bootstrap3のFixed navbarを導入

Bootstrap3のサンプルで提供されているFixed navbarを流用してナビゲーションメニューを作成します。

①Bootstrap3.2のソースをダウンロード

②docs\examples\navbar-fixed-topフォルダ内のindex.htmlのヘッダーメニュー部をコピーし、ヘッダーパーシャルに貼り付け。


$ vi app/views/layouts/_header.html.erb

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

③navbar-fixed-topのCSS設定

docs\examples\navbar-fixed-topフォルダ内のnavbar-fixed-top.css内の下記設定をコピー


$ vi app/assets/stylesheets/custom.css.scss
body {
  min-height: 2000px;
  padding-top: 70px;
}

２）ナビゲーションメニューを作成

①ヘッダーパーシャルを修整

Railsのヘルパーを使ってリンク部を書き換えます。

$ vi app/views/layouts/_header.html.erb


<ul class="nav navbar-nav">
  <li><%= link_to "Home",'#', id: "logo", class: "active"%></li>
  <li><%= link_to "Help",    '#' %></li>
  <li><%= link_to "Sign in", '#' %></li>
  <li class="dropdown">
　　　　　　：

②レイアウトファイルを設定

app/views/layouts/application.html.erbにパーシャルを埋め込む

$ vi app/views/layouts/application.html.erb


<!DOCTYPE html>
<html ng-app="myModule">
<head>
  <title>Ruby on Rails with AngularJS | <%= yield(:title) %></title>
  <%= stylesheet_link_tag    "application", media: "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>
 <%= render 'layouts/header' %>
 <%= yield %>

</body>
</html>

（４）静的ページ用のコントローラ、ビューを作成

１）"StaticPages"という名前のコントローラと"home"、"help"という名前のアクションを作成

$ rails generate controller StaticPages home help

２）ルート設定を追加、確認


$ vi config/routes.rb
SampleNg::Application.routes.draw do
  root  'static_pages#home'
  get "static_pages/help"

$ rake routes
           Prefix Verb URI Pattern                  Controller#Action
             root GET  /                            static_pages#home
static_pages_help GET  /static_pages/help(.:format) static_pages#help

３）ナビゲーションメニューのリンクを変更

$ vi app/views/layouts/_header.html.erb


<ul class="nav navbar-nav">
  <li><%= link_to "Home", root_path, id: "logo", class: "active"%></li>
  <li><%= link_to "Help", static_pages_help_path %></li>

（５）ブートストラップのナビゲーションメニューをAngularJSの機能を使って書換え

ブートストラップ3のFixed navbarでは、折り畳み（Collapse）とドロップダウンメニューでJavaScriptを使用しています。

ドロップダウンメニューは変更しなくても動作しましたが、、折り畳み（Collapse）は二つの方法で記述方法が異なっていて修整する必要がありました。

１）ヘッダーパーシャルを修整

$ vi app/views/layouts/_header.html.erb

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
　↓
<button type="button" class="navbar-toggle" data-toggle="collapse" ng-click="isCollapsed = !isCollapsed">

<div class="navbar-collapse collapse">
　↓
<div class="navbar-collapse" collapse="isCollapsed">

２）AngularJSスクリプトを修整

$ vi app/assets/javascripts/mymodule.js


myModule = angular.module('myModule', ['ui.bootstrap'])

function CollapseDemoCtrl($scope) {
  $scope.isCollapsed = true;
}
CollapseDemoCtrl.$inject = ['$scope'];
myModule.controller('CollapseDemoCtrl', CollapseDemoCtrl);

（６）動作確認

http://localhost:3000/にアクセスし、ヘッダーメニューが表示され、リンク、ドロップダウンメニュー、ブラウザ画面縮小時の折り畳みが正常に動作することを確認

▲ Close

≫ EDIT

2014年12月18日

passengerを動作するユーザーを変更

開発環境と本番環境を同じRVMユーザーを使って実行させていて運用上問題があったので、環境ごとにRVMユーザーを分ける事にしました。passengerを動作するユーザーも変更する事になり、新規にインストールし、Apacheの設定も変更しました。手順を備忘として残しました。

≫ Read More

環境は、CentOS6.5上で新規にユーザーを作成し、Ruby2とRails4の環境から新規に作成しました。

（１）シングルユーザーでRuby2.0.0インストール

１）ダウンロードし、インストールスクリプト実行

$ curl -L https://get.rvm.io | bash -s

２）下記コマンド実行

$ source /home/rails/.rvm/scripts/rvm

３）RVMに必要なツールインストール

$ rvm requirements

４）Ruby2.0.0のインストール

$ rvm install 2.0.0 --with-openssl-dir=$HOME/.rvm/usr

５）Rubyのバージョン確認

$ ruby -v

（２）gemsetsを新規作成

１）gemsets作成

"ruby2rails4"という名前のgemsetsを作成

$ rvm gemset create ruby2rails4
ruby-2.0.0-p598 - #gemset created /home/rails/.rvm/gems/ruby-2.0.0-p598@ruby2rails4
ruby-2.0.0-p598 - #generating ruby2rails4 wrappers........

２）使用するgemsetsを変更

$ rvm gemset use ruby2rails4
Using ruby-2.0.0-p598 with gemset ruby2rails4

３）変更されたか確認

$ rvm gemset list

gemsets for ruby-2.0.0-p598 (found in /home/rails/.rvm/gems/ruby-2.0.0-p598)
(default)
global
=> ruby2rails4

４）環境変数$GEM_HOMEが変更されているか確認

$ echo $GEM_HOME

/home/rails/.rvm/gems/ruby-2.0.0-p598@ruby2rails4

５）デフォルト設定を変更

rvm use コマンドの--defaultオプションでrubyバージョンとgemsetsを設定します。

$ rvm use ruby-2.0.0-p598@ruby2rails4 --default
Using /home/rails/.rvm/gems/ruby-2.0.0-p598 with gemset ruby2rails4

（３）Rails4インストール

１）インストール前の確認

$ gem list

*** LOCAL GEMS ***

bigdecimal (1.2.0)
bundler (1.7.9)
bundler-unload (1.0.2)
executable-hooks (1.3.2)
gem-wrappers (1.2.7)
io-console (0.4.2)
json (1.7.7)
minitest (4.3.2)
psych (2.0.0)
rake (0.9.6)
rdoc (4.0.0)
rubygems-bundler (1.4.4)
rvm (1.11.3.9)
test-unit (2.0.0.0)

$ which gem
~/.rvm/rubies/ruby-2.0.0-p598/bin/gem

２）RubyGemsのバージョンをアップデート

$ gem update --system 2.0.3

３）riとrdocをインストールしないように設定

$ vi ~/.gemrc

install: --no-rdoc --no-ri
update: --no-rdoc --no-ri

４）Rails4.0をインストール

$ gem install rails --version 4.0.0

５）Railsインストール後の確認

$ gem list

*** LOCAL GEMS ***

actionmailer (4.0.0)
actionpack (4.0.0)
activemodel (4.0.0)
activerecord (4.0.0)
activerecord-deprecated_finders (1.0.3)
activesupport (4.0.0)
arel (4.0.2)
bigdecimal (1.2.0)
builder (3.1.4)
bundler (1.7.9)
bundler-unload (1.0.2)
erubis (2.7.0)
executable-hooks (1.3.2)
gem-wrappers (1.2.7)
hike (1.2.3)
i18n (0.6.11)
io-console (0.4.2)
json (1.7.7)
mail (2.5.4)
mime-types (1.25.1)
minitest (4.3.2)
multi_json (1.10.1)
polyglot (0.3.5)
psych (2.0.0)
rack (1.5.2)
rack-test (0.6.2)
rails (4.0.0)
railties (4.0.0)
rake (0.9.6)
rdoc (4.0.0)
rubygems-bundler (1.4.4)
rubygems-update (2.0.3)
rvm (1.11.3.9)
sprockets (2.12.3)
sprockets-rails (2.0.1)
test-unit (2.0.0.0)
thor (0.19.1)
thread_safe (0.3.4)
tilt (1.4.1)
treetop (1.4.15)
tzinfo (0.3.42)

（４）アプリをデプロイ、動作確認

１）アプリをデプロイ

２）bundle installを実行

３）Passengerをインストール

①"passenger"gemをインストール

$ gem install passenger

②passengerのインストローラを実行する

$ passenger-install-apache2-module

完了すると下記のようにデプロイの方法が表示される。


Please edit your Apache configuration file, and add these lines:

   LoadModule passenger_module /home/rails/.rvm/gems/ruby-2.0.0-p598@ruby2rails4/gems/passenger-4.0.55/buildout/apache2/mod_passenger.so
   <IfModule mod_passenger.c>
     PassengerRoot /home/rails/.rvm/gems/ruby-2.0.0-p598@ruby2rails4/gems/passenger-4.0.55
     PassengerDefaultRuby /home/rails/.rvm/gems/ruby-2.0.0-p598@ruby2rails4/wrappers/ruby
   </IfModule>

After you restart Apache, you are ready to deploy any number of web
applications on Apache, with a minimum amount of configuration!

--------------------------------------------

Deploying a web application: an example

Suppose you have a web application in /somewhere. Add a virtual host to your
Apache configuration file and set its DocumentRoot to /somewhere/public:

   <VirtualHost *:80>
      ServerName www.yourhost.com
      # !!! Be sure to point DocumentRoot to 'public'!
      DocumentRoot /somewhere/public
      <Directory /somewhere/public>
         # This relaxes Apache security settings.
         AllowOverride all
         # MultiViews must be turned off.
         Options -MultiViews
         # Uncomment this if you're on Apache >= 2.4:
         #Require all granted
      </Directory>
   </VirtualHost>

And that's it! You may also want to check the Users Guide for security and
optimization tips, troubleshooting and other useful information:

  /home/rails/.rvm/gems/ruby-2.0.0-p598@ruby2rails4/gems/passenger-4.0.55/doc/Users guide Apache.html
  https://www.phusionpassenger.com/documentation/Users%20guide%20Apache.html

Enjoy Phusion Passenger, a product of Phusion (www.phusion.nl) :-)
https://www.phusionpassenger.com

Phusion Passenger is a trademark of Hongli Lai & Ninh Bui.

４）Apacheの設定変更

上記３）でデプロイの方法が表示されるので、それを参考に設定。

アプリケーションの上位のディレクトリの権限がユーザーのホームディレクトリのように700になっていると権限エラーでアクセスできないので、セキュリティに注意しながら上位ディレクトリの権限を変更する。

▲ Close

≫ EDIT

2014年12月16日

クッキーを使って他ユーザーの情報を設定できないように設定

前回、ユーザー編集機能を作成し、ログインしていないユーザーは編集画面を表示できず、ログイン画面にリダイレクトするように設定しました。今回はさらにクッキーを使ってそのユーザー名を確認し、そのユーザーの情報のみ変更可とし、他人のユーザー情報を変更できないようにします。

≫ EDIT

2014年12月12日

クッキーとbeforeフィルターを使って未ログインユーザーはログイン画面へ

ユーザー編集機能を作成し、ログインしていないユーザーは編集画面を表示できず、ログイン画面にリダイレクトするように設定します。

≫ Read More

１）ルート設定確認

ユーザー編集のルートは下記のように設定しています。

$ rake routes
　　　：
edit_user GET /users/:id/edit(.:format) users#edit

２）ユーザーshowビューにの編集へのリンクを追加


$ vi app/views/users/show.html.erb

<% if signed_in? %>
  <%= @user.name %>さんログイン中
  <li><%= link_to "ユーザー情報編集", edit_user_path(@user) %></li>
  <%= link_to "ログアウト", logout_users_path, method: "delete" %>
<% end %>

３）Usersコントローラに"edit"アクション追加

ルート設定より、上記ユーザー編集リンクがクリックされるとUsersコントローラの"edit"アクションに制御が渡されます。

ユーザ編集リンクで渡されたユーザーのユーザーIDから該当ユーザーを検索し、@userインスタンス変数にセットします。

$ vi app/controllers/users_controller.rb


  def edit
    @user = User.find(params[:id])
  end

４）editビューを作成

Usersコントローラの"edit"アクションで定義した@userインスタンスを使ってユーザー編集フォームを作成します。

$ vi app/views/users/edit.html.erb


<h1>ユーザー情報編集</h1>

<div class="row">
  <%= form_for(@user) do |f| %>
    <%= f.label :名前 %>
    <%= f.text_field :name %>
    <%= f.label :メールアドレス %>
    <%= f.text_field :email %>
    <%= f.submit "保存", class: "btn btn-large btn-primary" %>
  <% end %>
</div>

５）Usersコントローラの"update"アクション修正

$ vi app/controllers/users_controller.rb


  def update
    @user = User.find(params[:id])
    if @user.update_attributes(user_params)
      redirect_to user_path
    else
      render 'edit'
    end
  end
  private
    def user_params
      params.require(:user).permit(:name, :email)
    end

６）ログイン中かチェック

クッキー内の情報を使ってユーザーがログイン中か確認するメソッドは、TestHelper内にsigned_in?メソッドとして定義中なので、Usersコントローラにインクルードします。


（TestHelper）
module TestHelper
  def signed_in?
    @user = User.find_by(remember_token: cookies[:remember_token])
    !@user.nil?
  end
end

（Usersコントローラ）
editアクションとupdateアクションに対し、ログイン済みかチェックするbeforeフィルターを定義

include TestHelper
before_action :signed_in_user, only: [:edit, :update]
  private
    def signed_in_user
      redirect_to login_users_path unless signed_in?
    end
end

これで、ログインしていないユーザーが編集用のURLにアクセスしても編集画面が表示されず、ログイン画面にリダイレクトされるようになります。

▲ Close

≫ EDIT

2014年12月10日

Rails4でクッキーの削除とログアウト処理

クッキーにトークンを設定してログイン処理を行ってきましたが、今回は、クッキーを削除してログアウトする処理を追加しました。

≫ EDIT

2014年12月08日

Rails4でクッキーの有効期限や暗号化の設定

Rails4でクッキーの有効期限や暗号化の設定をする方法を確認しました。

≫ EDIT

2014年12月04日

ヘルパーを使ってビューからメソッドを実行

ログイン中の場合（クッキーに有効なトークンが設定されている状態）は、再度ログイン画面を表示した際に、ログインフォームを表示せず、○○さんログイン中、と表示するように設定してみました。

≫ EDIT

2014年12月02日

base64トークンをクッキーに設定してユーザ認証

前回はクッキー内にユーザーIDを設定しましたが、クッキー情報を取得して悪用されないようにするため、ランダムのトークンを設定する方法を確認しました。

≫ Read More

（１）セッション維持の仕組み

①userテーブルに"remember_token"というカラムを追加し、ログイン認証後にランダムトークンを生成し、データベースに保持しておく。

②上記ランダムトークンをクッキーに設定する。

③同一セッションの後続のページでは、ブラウザのクッキーからこのトークンを取り出し、データベース上で保存されているトークンと照合させる事によってユーザーを特定する事ができる。

（２）設定手順

１）データベースにbase64トークンを保存するカラムを追加

①base64トークンを保存する"remember_token"という名前のカラムをusersテーブルに追加します。

$ rails generate migration add_remember_token_to_users

②"remember_token"を定義し、インデックスを追加


$ vi db/migrate/20141201113639_add_remember_token_to_users.rb

class AddRememberTokenToUsers < ActiveRecord::Migration
  def change
    add_column :users, :remember_token, :string
    add_index  :users, :remember_token
  end
end

③マイグレーション実行

$ bundle exec rake db:migrate

（２）ユーザーを一意に識別するbase64トークン（remember_token）を生成する処理をUserモデルに定義

①SecureRandomモジュールにあるurlsafe_base64メソッドを使って生成

・Userモデルにnew_remember_tokenメソッドを定義します。

・new_remember_tokenメソッドは、ユーザーのインスタンスに対して動作する必要がないのでインスタンスではなく、Userクラスに属します。（クラスメソッド）


$ vi app/models/user.rb

class User < ActiveRecord::Base
  def User.new_remember_token
    SecureRandom.urlsafe_base64
  end

②railsコンソールで動作確認

2.0.0-p247 :004 > token=User.new_remember_token
=> "_JBOA・・・"
2.0.0-p247 :005 > token=User.new_remember_token
=> "yHwuhZ・・・K"

（３）コントローラに設定追加

１）処理内容

①ユーザーログイン成功
②Userモデルの"new_remember_token"メソッドを使ってremember_tokenを生成
③remember_tokenをブラウザのパーマネントクッキーに保存
④remember_tokenをデータベースに保存

２）コントローラに設定追加

$ vi app/controllers/users_controller.rb


  def show
    @user = User.find_by(remember_token: cookies[:remember_token])
  end
  def auth
    user = User.find_by(email: user_params[:email].downcase)
    if user
      remember_token = User.new_remember_token
      cookies.permanent[:remember_token] = remember_token
      user.update_attribute(:remember_token, remember_token)
      redirect_to user
    end
  end

（４）動作確認

http://localhost:3000/users/login にアクセス

ログイン成功後、ユーザー表示ページに遷移しました。

fidder2でhttpパケットをモニタするとクッキー内に下記が設定されていました。
remember_token=5JxAlY・・・

今回の方法ではユーザーログイン後にSecureRandom.urlsafe_base64を使ってランダムなトークンを生成してクッキーに設定しているので、クッキー内の情報を読まれてもユーザーIDが分かってしまうことはありません。

▲ Close