• WebCamp_インタビュー
    【WebCamp受講生インタビュー】起業準備中にCEOが気がついたプログラミングスキルの重要性とは?
    2017.12.25
  • WebCamp_インタビュー
    “未経験”でもたった1ヶ月で営業からエンジニアとして転職!『WebCamp』受講者インタビュー
    2017.10.04
  • WebCamp_インタビュー
    「自信の持てるスキルを得たい!」内定辞退した女子大生がプログラミングを学習したワケ。
    2018.04.28
  • WebCampPro_インタビュー
    未経験でも寿司職人からWebデザイナーになった!ホスピタリティでスクールを支える宮脇トレーナー
    2017.05.26
  • WebCampPro_インタビュー
    未経験から上京し、エンジニアとしてチームラボグループに転職!【WebCampPro卒業生インタビュー】
    2018.03.10
  • WebCamp_インタビュー
    【WebCamp卒業生インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!
    2018.01.15
  • WebCamp_インタビュー
    「1カ月頑張ればこの先が見えてくる」地元メディアを立ち上げたママさん
    2017.07.20
  • WebCamp_インタビュー
    【卒業生インタビュー】台湾で月間100万UUの訪日旅行メディアを手掛けるCEOが、プログラミングを学んで得たものとは?
    2018.01.15
  • WebCampPro_インタビュー
    未経験31歳からエンジニア転職を実現【実際に聞いてみた】
    2017.04.01
  • WebCamp_インタビュー
    時間や場所にとらわれず自由に働くために必要なスキルとは?【WebCamp卒業生インタビュー】
    2018.01.26
  • WebCampPro_インタビュー
    自分で稼ぐ力をつけるため、新卒5年目の営業マンがエンジニアに転職!【WebCampPro転職者インタビュー】
    2018.02.02

◆当サイトで人気のプログラミング教室のおすすめランキングはこちら!
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。

Web Camp【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
1ヶ月通い放題・メンター常駐の教室環境でWebサービス等作りたい方
TechAcademyオンラインで開講しているプログラミングスクール
オンラインでどこでも学べる!/教室に行くのが忙しい人でも安心!
Tech Camp教養としてのITスキルを学べるスクール
Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方!
WebCampPro転職保証付き!エンジニアとして転職したい人におすすめ!
未経験からプロのエンジニアを3ヶ月で目指すプログラミングスクールです。
11月生募集中!当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
10月生は満員となっております。11月生募集に向け、お早めの申込みをオススメします。
プログラミング未経験でもエンジニア転職を絶対成功させたい
スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください!

はじめに

Ruby on RailsでWebアプリケーションを作ったは良いものの、いざ公開するところまできて困るのが、「誰でもアクセスできてしまう」という点です。

ユーザー登録をして、アクセス制限をかけてしまえば良いのですが、この実装が意外と面倒で、自作だと手間がかかります。また、本当に安全なのかどうかも怪しいものです。

そんなときに、deviseを使えば、安全な認証処理を簡単に実装することができるのです。

今回は、Webアプリケーションに認証機能を追加することができるdeviseについて、詳しく解説いたします。

Railsのdeviseってなんだ?

冒頭で説明したとおり、deviseはWebアプリケーションに認証機能を追加することができるgem(ライブラリ)です。

具体的には、以下のような機能を提供してくれます。

・ユーサーの登録処理
・ユーザーの仮登録(本登録のためのメール送付)
・ログイン処理
・認証機能(ログイン済みかどうかの確認)
・パスワードの変更
・パスワードの再発行
・認証関連の各種画面

以上のように、ログイン関連の必要な機能は概ね提供してくれています。もちろん、必要ならカスタマイズすることも可能です。

認証機能って?

念のため、認証機能をもう少し詳しく説明しておきます。すでに知っている人は、読み飛ばしてください。

認証機能は、アクセスした人の正当性を確認する機能のことです。特に、Webサービス全般では、IDやメールアドレスと対になっているパスワードで、アクセスした人の正当性を証明する機能が一般的です。

実社会のもっとも有名な例を挙げれば、銀行の口座番号(キャッシュカード)をいれて、暗証番号を入力することでATMが使えるというのが、この認証機能による処理に当たります。

ただし、認証機能は、正当性を確認する認証処理だけでは動けません。IDやメールアドレスとパスワード、その他の情報を新しく記録する登録処理や、それらを変更する処理、一時的な利用停止、そして削除処理がなければ、運用できないのです。

そして、deviseは、それらすべての機能を提供してくれる便利なgemなのです。

“未経験”でもたった1ヶ月で営業からエンジニアとして転職!『WebCamp』受講者インタビュー
2017-10-04 10:26
今回の記事では、未経験からWebCampを1ヶ月受講し、その後エンジニアとして転職をした喜田さんにお話を伺いました。 <プロフィール> 喜田 大介 さん (28歳) 大学時代はプ...

deviseを使ってみよう

では、実際にdeviseを使って、その真価を確認していきましょう。

ただし、deviseは標準では搭載されていませんので、インストールしていく必要があります。

まずは、deviseのインストールを行って、その後に動作確認していきましょう。

なお、動作確認用のアプリケーションは別途準備しておいてください。既存のアプリケーションを使っても、新規でアプリケーションを生成しても構いません。

インストール

まず、動作確認用アプリケーションのGemfileに以下の1文を追加します。

gem 'devise'

その後、動作確認用アプリケーションのフォルダにて、以下のコマンドを入力することで、deviseをインストールします。

bundle install

これだけで、deviseのインストールは完了ですが、念のため、きちんと取り込まれているかを確認しましょう。

Gemfileと同じところにある「Gemfile.lock」というファイル内に「devise」の記載があれば、問題ありません。

なお、Gemfileは、サーバー起動時に取り込まれますので、すでにサーバーを実行している場合は、サーバーを再起動してください。

deviseの設定

deviseのインストールは完了しましたので、アプリケーションへ組み込んでいきます。そのためには、以下のコマンドを実行します。

rails g devise:install

※gはgenerateコマンドの略称です。

このコマンドによって、deviseの実行に必要なファイルを生成します。しかし、それだけではまだdeviseの機能を使うことはできません。コマンドを実行した際に表示される、以下のメッセージに従って、初期設定を行わなければいけないのです。

===============================================================================

Some setup you must do manually if you haven't yet:

  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.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root to: "home#index"

  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>

  4. You can copy Devise views (for customization) to your app by running:

       rails g devise:views

===============================================================================

簡単に訳すと、それぞれ以下のような指示が書かれています。

1.deviseがメール送付する場合の送付元(WebアプリケーションのURL)の指定
2.ログアウト時のリダイレクト(転送)先URLの指定
3.ログインやログアウトなどの処理結果を表示するメッセージ領域の作成
4.deviseで使用する表示画面用テンプレートの作成(作成しなくても良いが、カスタマイズする場合は作成する必要がある)

では、具体的に作成していきましょう。

コツコツ独学×スクールで実践。未経験からエンジニアに転職!【WebCamp卒業生インタビュー】
2018-03-22 23:28
今回の記事では、独学でPHPを1年半学習し、その後WebCampを受講して未経験からエンジニアへと転職された佐々木さんにお話を伺いました。 <プロフィール> 佐々木 祐樹 さん(2...

1.メール送付元URLの設定

表示されているとおり、「config/environments/development.rb」ファイルにWebアプリケーションのURLを指定した以下の文を追記します。

Rails.application.configure do
    :
   省略
    :
  config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }  # この行を追加
    :
end

(config/environments/development.rb)
※hostとportを、WebアプリケーションへアクセスするときのURLに合わせてください。

なお、hostとportを分けて記載せず、「{ host:'localhost:3000' }」という記載方法法でも問題ありません。

2.リダイレクト先URLの設定

ログインされていない場合のリダイレクト先のURLを設定します。つまり、1.で設定したURLに最初にアクセスしたときに表示される画面のURLを設定するわけです。

この設定がなければ、ログインされていない場合やログアウト後の遷移先がありませんので、エラー表示になってしまいます。

遷移先のURL(画面)がなければ、先に作っておきましょう。

ここでは、以下のコマンドでAccessesコントローラーとhelloアクション、goodbyeアクションを生成しました。

$ rails g controller Accesses hello goodbye
      create  app/controllers/accesses_controller.rb
       route  get 'accesses/hello'
get 'accesses/goodbye'
      invoke  erb
      create    app/views/accesses
      create    app/views/accesses/hello.html.erb
      create    app/views/accesses/goodbye.html.erb
      invoke  test_unit
      create    test/controllers/accesses_controller_test.rb
      invoke  helper
      create    app/helpers/accesses_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/accesses.coffee
      invoke    scss
      create      app/assets/stylesheets/accesses.scss

※アクションに合わせた画面のひな型とそれらの画面で必要なファイルが自動で生成されています。

deviseはそのリダイレクト先に「root_url」を使用しますので、「config/routes.rb」にroot設定をしておかなければいけません。

Rails.application.routes.draw do
    :
   省略
    :
  root 'accesses#hello'  # この行を追加(ただし、すでにroot設定があれば、必須ではありません)
    :
end

(config/routes.rb)

3.メッセージ領域の作成

deviseは、ログインやログアウトの操作をした結果をユーザーへ分かりやすく伝えるため、メッセージを表示してくれます。そして、その表示領域については、Webアプリケーション制作者が任意の場所を設定できるようになっています。(逆に言うと、設定しなければ、表示されません)

今回は、分かりやすくするため、「app/views/layouts/application.html.erb」へFor example:で提示されている以下の2行を追記しましょう。

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

具体的には、以下のようにbodyタグの中のどこかへ追記してください(※ここでは、一番上に表示するように追記しています)。こうすることで、Webアプリケーションの画面上に、ログインやログアウトしたことを示すメッセージを表示できるようになります。

    :
   省略
    :
  <body>
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>

    <%= yield %>

  </body>
</html>

(app/views/layouts/application.html.erb)

devise用viewの作成

deviseが提供してくれる種々の画面は、何もしなくても表示されるように内部的な処理がされます。しかし、それらの画面もWebアプリケーションのテイストに合わせてカスタマイズしたい場合があるでしょう。そのため、devise用のviewファイルを生成して変更できるようにすることもできます。

今回はカスタマイズしませんが、devise用のviewファイルにどんなものがあるのかを確認するため、以下のコマンドを使ってviewを生成してみましょう。

rails g devise:views

(出力)

      invoke  Devise::Generators::SharedViewsGenerator
      create    app/views/devise/shared
      create    app/views/devise/shared/_links.html.erb
      invoke  form_for
      create    app/views/devise/confirmations
      create    app/views/devise/confirmations/new.html.erb
      create    app/views/devise/passwords
      create    app/views/devise/passwords/edit.html.erb
      create    app/views/devise/passwords/new.html.erb
      create    app/views/devise/registrations
      create    app/views/devise/registrations/edit.html.erb
      create    app/views/devise/registrations/new.html.erb
      create    app/views/devise/sessions
      create    app/views/devise/sessions/new.html.erb
      create    app/views/devise/unlocks
      create    app/views/devise/unlocks/new.html.erb
      invoke  erb
      create    app/views/devise/mailer
      create    app/views/devise/mailer/confirmation_instructions.html.erb
      create    app/views/devise/mailer/email_changed.html.erb
      create    app/views/devise/mailer/password_change.html.erb
      create    app/views/devise/mailer/reset_password_instructions.html.erb
      create    app/views/devise/mailer/unlock_instructions.html.erb

以上のように数多くの画面(erbファイル)を生成しています。

具体的には、以下のような画面や文章が生成されています。

shared/_links.html.erbリンク用

ファイル名 用途
confirmations/new.html.erb 「認証メール再送信」画面
passwords/edit.html.erb 「パスワード変更」画面
passwords/new.html.erb 「パスワードを忘れた場合のメール送信」画面
registrations/edit.html.erb 「ユーザー情報変更」画面
registrations/new.html.erb 「ユーザー登録」画面
sessions/new.html.erb 「ログイン」画面
unlocks/new.html.erb 「ロック解除メール再送信」画面
mailer/confirmation_instructions.html.erb 「アカウント認証」時のメール用メッセージ
mailer/password_change.html.erb 「パスワード変更完了」時のメール用メッセージ
mailer/reset_password_instructions.html.erb 「パスワードリセット」時のメール用メッセージ
mailer/unlock_instructions.html.erb 「ロック解除」時のメール用メッセージ

ここまでで、deviseの初期設定は完了となります。初めての場合は、ファイルを探したり、記載内容を理解したりと時間がかかったかもしれませんが、慣れてしまえば数分でできますので、非常に手軽です。

ただし、これだけでは、まだ認証機能を使えません。ユーザー情報を登録する準備をしたり、必要な機能を有効にしたりしなければいけません。

未経験から上京し、エンジニアとしてチームラボグループに転職!【WebCampPro卒業生インタビュー】
2018-03-10 14:42
今回の記事では、たまたま見たテレビ番組がきっかけでエンジニアに興味を持ち、WebCampProを受講して見事転職を決めた中村さんにインタビューしました。 <プロフィール> 中村 駿...

ユーザーモデルを生成する

認証処理を行うためには、ユーザー情報の登録が必要です。そのため、ユーザー情報を登録するためのテーブルを、データベース上に作る必要があります。

また、そのテーブルへのデータ登録や変更、削除、認証処理を行うメソッドなどを利用するためのモデルを生成します。

自作でテーブルの作成やモデルを実装するのは手間がかかりますか、deviseであれば、以下のコマンド1行です。

ユーザーのマイグレーションとモデルを生成

rails g devise モデル名

モデル名は、ユーザー情報を扱う任意の名称で構いませんが、ここでは、hello_userというモデル名で生成していきます。
※モデル名は必ず小文字単数形の単語を使用してください

rails g devise hello_user

(出力)

      invoke  active_record
      create    db/migrate/20180909134145_devise_create_hello_users.rb
      create    app/models/hello_user.rb
      invoke    test_unit
      create      test/models/hello_user_test.rb
      create      test/fixtures/hello_users.yml
      insert    app/models/hello_user.rb
       route  devise_for :hello_users

ここで作られたのは、以下の2ファイルです。

db/migrate/20180909134145_devise_create_hello_users.rbテーブル登録用のマイグレーションファイル

ファイル名 用途
app/models/hello_user.rb ユーザー認証機能を実現するモデルファイル

なお、モデルファイルの内容を確認することで、実装されている機能が分かります。「app/models/hello_user.rb」の内容を確認してみましょう。

class HelloUser < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable
end

(app/models/hello_user.rb)

ここで定義されている「database_authenticatable」「registerable」「recoverable」「rememberable」「validatable」が、標準で実行できる機能です。ただし、それ以外にも追加することができる機能がありますので、一覧にしておきます。

ファイル名 用途 搭載
database_authenticatable パスワードの暗号化処理 標準(必須機能)
registerable ユーザー登録・ログイン処理 標準
recoverable パスワードリセット処理 標準
rememberable ログイン情報保持処理(Cookieに保存) 標準
validatable メールアドレス、パスワードの文法チェック処理 標準
trackable ユーザーの履歴保存処理
ログイン回数や、ログイン時間、接続元IPアドレスを記録する
追加機能
confirmable メールによる本登録処理
メールに記載されているURLをクリックして本登録を完了する処理。認証済みユーザーかどうかを検証する
追加機能
lockable ユーザーロック処理
一定回数サインインを失敗するとアカウントをロックする。ロック解除方法も設定可能
追加機能
timeoutable 接続のタイムアウト処理
一定期間アクセスのないユーザーのセッションを破棄する
追加機能
omniauthable intridea/omniauthサポート
TwitterやFacebookなどのSNS認証
追加機能

Webアプリケーションでどんな機能を必要としているかは様々ですので、用途に合わせて、これらの機能を追加、削除することが可能です。

なお、機能の追加や削除を行った場合、データベースに登録する情報も変更されますので、マイグレーションファイルの編集(コメントを外したりコメントアウトしたり)する必要がありますので、忘れないようにしましょう。

テーブルの作成

上記でマイグレーションを作りましたが、マイグレーションはあくまでもデータベースを操作する命令です。つまり、この時点ではまだテーブルは作られていません。

このままでは、ユーザーを登録することができないため、テーブルを生成するコマンドを実行しましょう。

rake db:migrate

以上で、準備完了です。

あとはユーザー登録やログイン、ログアウトできるようにリンクを配置することで、実装完了です。

先ほど、メッセージ表示を追加した「app/views/layouts/application.html.erb」を以下のように修正しましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>RailsTest</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

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

  <body>
    <header>
        <nav>
        <% if hello_user_signed_in? %>
            <strong><%= link_to current_hello_user.username, pages_show_path %></strong>
            <%= link_to 'edit profile', edit_hello_user_registration_path %>
            <%= link_to 'logout', destroy_hello_user_session_path, method: :delete %>
        <% else %>
            <%= link_to 'registration', new_hello_user_registration_path %>
            <%= link_to 'login', new_hello_user_session_path %>
            <% end %>
        </nav>
    </header>

    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>

    <%= yield %>

  </body>
</html>

変更箇所は、タグの先頭にある

タグの追加です。hello_user_signed_in?メソッドを使ってユーザーがログイン状態かどうかを判定し、ログイン状態であれば、「edit profile」と「logout」のリンク、ログインしていなければ、「registration」と「login」のリンクを表示します。

動作確認

これで、最低限の認証処理を実装できましたので、動作確認をしてみましょう。

改めてWebアプリケーションへアクセスしてみてください。(ローカル環境の場合は、「http://localhost:3000/」です)

以下のように、ヘッダに登録やログインへのリンクが表示された画面が表示されれば成功です。

「registration」のリンクをクリックして、登録画面へ遷移すると、次のようなシンプルな画面が表示されるでしょう。これは、deviseが自動生成した登録画面です。

ここで、必要な情報を入力すれば、ユーザー登録できますので、ログインしたり、ログアウトしたりするなどして、動かしてみてください。シンプルな画面ではありますが、動作していることを確認できることでしょう。

ここまで、一つ一つサイトの内容を確認してきたので、時間がかかったかもしれません。しかし、改めて一からやってみると、とても簡単にこれだけの機能を実装できることを実感できると思います。

まとめ

deviseの導入方法と基本的な機能について、紹介しました。

deviseで導入できる認証機能は、一般的なサイトなどで実装されている機能とそん色なく、実用的なものです。つまり、deviseを使うことで一般的な認証処理を効率的に実装できるということです。

認証処理というのは、Webサービスを運営する上でとても重要なものですが、数多くのサイトで同様の実装がされているものです。そんな一般的な部分だからこそ、deviseを使って効率化し、サービス部分にリソースを集中する方が良いでしょう。

ぜひ、deviseを利用して、効率的に安全な認証処理を実装していってください。


・deviseは、認証機能を追加できるgem
・deviseの導入には、「インストール」「初期設定」「ユーザーモデルの登録(マイグレーションとモデルの追加)」「データベースへのテーブル追加」が必要
・deviseには10の機能があるが、標準では4つのみ有効になっている
・deviseの機能を有効/無効にするには、マイグレーションとモデル、両方の修正が必要
・標準の画面表示はシンプルなので、カスタマイズするには、viewの生成が必要

WebCampOnline プログラミングコースについて

WebCampでは、「どこでも学べる」オンラインコースを開講しています。

初心者・未経験の方でもわずか1ヶ月でプログラミングの基礎を学び、アプリケーション開発をすることができます。

WebCampOnlineが選ばれる3つの理由

1.学習の仕方がわからなくても安心!初心者に寄り添った学習カリキュラム

これから学習を始める初心者の方や、独学で挫折してしまった方に向けて、アプリケーション作成をゴールとする一気通貫したカリキュラムを提供しています。2500名を輩出しているWebCampだからこその教室でのリアルな受講生の声を反映し、オンラインコースでも初心者に寄り添った学習体験をご提供いたします。

2.つまずいたらすぐ解決!プロのエンジニアに質問し放題

プログラミング学習で挫折する理由の多くは「つまずいた時に聞ける人がいない」ことです。オンラインコースでは、現役エンジニアやプロ講師に、すぐにチャットでの質問が可能です。つまずきをすぐに解消できるので、挫折せずに学習を継続することができます

3.1ヶ月間で終わらなくても大丈夫!カリキュラムは"卒業後"も"無料"で利用可能

受講したいけど、仕事が急に忙しくなるかもしれないから受講するか迷っている・・・そんな方も多いのではないでしょうか?ご安心ください。カリキュラムは期間終了後も「無料」で使うことができます。また、しっかり学習時間を確保した方も、振り返って学習することでプログラミングスキルがご自身に馴染んできます。

▼まずは無料でWebデザインのカリキュラムを体験しよう!

【インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!

ブラジルから帰国し技術をつけようとRubyエンジニアを目指してWebCampでRubyを学び、見事Webエンジニアとして転職を果たした田中さんにお話を伺いました。

Rubyの学習がしたい。基礎をしっかりと理解したい

転職のサポートがほしい

と考えている方はぜひお読み下さい。

【WebCamp卒業生インタビュー】1ヶ月でRubyをゼロから学び、Webエンジニアとして転職!
2018-01-15 13:23
今回の記事では、WebCampで1ヶ月間Rubyを学習し、Webエンジニアとして転職した卒業生の田中さんにお話を伺いました。 <プロフィール> 田中 デニス 昭彦さん(...
関連キーワード
Ruby on Railsの関連記事
  • 【Rails入門説明書】enumについて解説
  • 【Rails入門説明書】link_toについて解説
  • 【Rails入門説明書】Bootstrapについて解説
  • 【Rails入門説明書】scaffoldについて解説
  • 【Rails入門説明書】validationsについて解説
  • 【Rails入門説明書】routesについて解説
おすすめの記事