作って学ぶRuby on Rails Vol.27ログイン機能を実装しよう!その2


作って学ぶRuby on Rails Vol.27ログイン機能を実装しよう!その2
目次
  1. Google認証の実装
  2. ログイン機能gem‘devise’gem‘omniauth’gem‘omniauth-google-oauth2’
  3. Use this hook to configure devise mailer, warden hooks and so forth.

Google認証の実装

では前項

  • devise- omniauth- omniauth-google-oauth2

上記3つです。devise+omniauthで認証機能を実装し、omniauth-google-oauth2でGoogleの認証機構を利用可能にします。

他にも、omniauth-twitterやomniauth-facebookといった、認証機構ごとの認証gemが用意されています。

上記の3つのgemをGemfileに記述します。

#ログイン機能gem‘devise’gem‘omniauth’gem‘omniauth-google-oauth2’

下記のコマンドを実行して下さい。


$ bundle install

gemのinstallができたら、下記のコマンドを実行して下さい。deviseの初期化を行います。


$ rails generate devise:install

実行すると、下の図のように2つのファイルが作成されたことが分かります。

作成された2つのファイルはdeviseの設定ファイルになります。

Ruby_on_Rails_login-実装-1

下記のコマンドは、deviseで用意された機能で、Modelとマイグレーションファイルを生成します。


$ rails generate devise social_account

上記コマンドを実行しすると、

db/migrate/yyyyMMddHHmmss_devise_create_social_accounts.rb

app/models/social_account.rb

の2つのファイルが生成され、下記のようにconfig/routes.rbにも1行追記されます。


Rails.application.routes.draw do
  devise_for :social_accounts
  root "top#index"
  get "top/profile"
   resources :users
end

deviseの機能で作成するSocialAccountというModelに、omniauthを使用するためのカラムを追加します。

下記コマンドでマイグレーションファイルを作成します。


$ rails generate migration add_omniauth_to_social_accounts

上記コマンドで生成されたマイグレーションファイルに、下記のハイライト部分を追記します。追加する項目は、user_id,provider,uid,name,tokenの5つです。それぞれをどのように利用するかはここでは割愛いたします。


class AddOmniauthToSocialAccounts < ActiveRecord::Migration
  def change
  add_column :social_accounts, :user_id, :integer
  add_column :social_accounts, :provider, :string
  add_column :social_accounts, :uid, :string
  add_column :social_accounts, :name, :string
  add_column :social_accounts, :token, :string
  end
end

追記が完了したら、下記のコマンドでテーブルを作成しましょう。


$ rake db:migrate

Ruby_on_Rails_login-実装-2

上の図のようになればテーブルが作成されました。

続いて、app/models/social_account.rbに少し追記を行います。

deviseはデフォルトの状態ではomniauthが有効になっていないので、deviseメソッドの末尾に:omniauthableと追記し、有効化します。


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

上記コードが初期状態です。下記の一文を追記して下さい。


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

次に、config/secrets.ymlというファイルを開いてください。

このファイルに、本項で初めに登録したGoogleの認証情報のクライアントID、クライアントシークレットを追記して下さい。今回はdevelopmentとproductionの2箇所に記述するので、適用されるのは開発環境と本番環境の範囲内になります。

本来は、セキュリティ上、本番環境では別のGoogle認証情報を記述するのが妥当ですが、ここでは一旦同じ認証情報を利用します。

GitやHerokuのカリキュラム実施後に余力があれば、本番環境は異なる認証情報をセットして下さい。

また、本カリキュラムではテスト環境は利用しないため、test:の箇所には記述いたしません。


development:
  secret_key_base: XXXXXXXXXXXXXXXXX
  google_client_id: Google認証情報のクライアントID
  google_client_secret: Google認証情報のクライアントシークレット

 test:
  secret_key_base: XXXXXXXXXXXXXXXXX

 production:
  secret_key_base: XXXXXXXXXXXXXXXXX
  google_client_id: Google認証情報のクライアントID
  google_client_secret: Google認証情報のクライアントシークレット

■ config/secrets.ymlについてこのファイルは本カリキュラムでは初めて開きますが、外部には公開したくないような情報をymlの書式で記述できます。また、記述した内容を参照するには、Rails.application.secrets.xxxの形で使用します。また、ymlファイルはインデント(半角スペース2つ)で情報の整理を行うため、インデントは大変重要です。インデントが足りない、または多い場合は正常に読み込むことができなくなります。

config/secrets.ymlへの追記後、config/initializers/devise.rbを開いて下さい。このファイルは、本項でdevise:installコマンドを実行した際に生成されたファイルです。


# Use this hook to configure devise mailer, warden hooks and so forth.
 # Many of these configuration options can be set straight in your model.
 Devise.setup do |config|
  # The secret key used by Devise. Devise uses this key to generate
  # random tokens. Changing this key will render invalid all existing
  # confirmation, reset password and unlock tokens in the database.
  # Devise will use the <code>secret_key_base</code> on Rails 4+ applications as its <code>secret_key</code>
  # by default. You can change it below and use your own secret key.
  # config.secret_key = 'xxxxx'

 ----中略------------------------------------------------------------------------------

  # When using OmniAuth, Devise cannot automatically set OmniAuth path,
  # so you need to do it manually. For the users scope, it would be:
  # config.omniauth_path_prefix = '/my_engine/users/auth'

  config.omniauth :google_oauth2, Rails.application.secrets.google_client_id, Rails.application.secrets.google_client_secret
end

上記ファイルは内容がとても長くコメントアウトだらけなので中略していますが、最後の行のハイライト部を追記して下さい。これは、googleOAuthを利用する際のomniauthの設定になります。第2、第3引数ではconfig/secrets.ymlへ記述した内容を取得しています。

続いて、本カリキュラムの最初に作成した、app/views/top/index.htmlを開いてください。(config/routes.rbではrootと指定しています)

下記コードのハイライト部分を記述して下さい。


<h1>Top#index</h1>
<p>Find me in app/views/top/index.html.erb</p>

 <%= link_to 'Google認証', social_account_omniauth_authorize_path(:google_oauth2) %></pre>
<pre>

これは、Google認証を行うためのリンクです。

ここまでで、設定が完了したので、サーバーを一度再起動してブラウザで確認してみましょう。

※サーバーを再起動しないと設定が読み込まれません。

Ruby_on_Rails_login-実装-3

ここまでの設定を正しく行っている場合は、上の図のように画面上にGoogle認証ボタンが表示されているはずですので、Google認証ボタンを押下して下さい。

表示された画面に合わせて、下記の表の通りに進めて下さい。

Ruby_on_Rails_login-実装-4Ruby_on_Rails_login-実装-5

上記の表の右側の画面が表示されれば、正しく設定されています。しかし、RubyonRails側に要求されたActionが存在しないというエラーが出てしまいました。次回はこのエラーを修正していきたいと思います。

NEXTLESSONログイン機能を実装しよう!その3ログイン機能を実装しよう!その3

PREVLESSONログイン機能を実装しよう!その1ログイン機能を実装しよう!その1

目次-Ruby&RubyonRailsテキスト目次目次-Ruby&RubyonRailsテキスト目次


関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp