【OAuth】Ruby on Rails:deviseでfacebook認証を実装するやり方

スポンサーリンク
Pocket
LINEで送る

Railsで会員登録を実装するのに便利なdeviseにfacebook認証を実装する方法です。

既にメールアドレスでの登録が実装できている場合です。

 

1.Facebook側の設定

以下のリンク先にアクセスし、新しいアプリを作成します。

https://developers.facebook.com/

 

fireshot-capture-68-facebook%e9%96%8b%e7%99%ba%e8%80%85-%e9%96%8b%e7%99%ba%e8%80%85%e5%90%91%e3%81%91facebook-https___developers-facebook-com_

表示名と連絡先メールアドレスを入力し、カテゴリを選択しアプリIDを作成してくださいをクリック

※表示名はなんでもいいですが、自分がわかりやすいようなもの

 

作成ができたら、Facebookログインを選択します

fireshot-capture-69-test-%e2%80%95-%e8%a3%bd%e5%93%81%e3%82%92%e8%bf%bd%e5%8a%a0-_-https___developers-facebook-com_apps_1274327209296950_add_

 

次に「有効なOAuthリダイレクトURI」Facebookログインを導入するサイトのURLを入力をします。

「アプリレビュー」→「アプリ名を公開しますか」を「はい」に設定。

これでfacebook側の設定は完了です。

 

アプリ側の設定

gemをインストール

Gemfileに以下を追加

gem 'omniauth-facebook'

 

インストールします

bundle install

 

 

oauth用のコントローラを使えるようにします。

routes.rbに以下を追記します

devise_for :users, controllers: {
  :omniauth_callbacks => 'users/omniauth_callbacks'
 }

これでoauthのコントローラが使えるようになります。

 

facebook認証用のカラム

facebook認証用のカラムを作成します。

ここで作成するカラムはgithubやtwitterなど他の認証でも使用できるカラムです

スポンサーリンク

マイグレーションファイルを作成

rails g migration AddColumnsToUsers uid:string provider:string

 

 

実行します

rake db:migrate

 

これでカラムが追加されます

各カラムの説明

・provider: facebookやtwitterなど認証先のサービス名がinsertされます

・uid: 認証に使うサイトのユーザーinsertされます

 

仕組みはfacebookログインを使うとfacebookのアカウントに関するデータが取得できます。

ユーザーテーブルに格納されているレコードでproviderがfacebookでfacebookIDが取得できたIDと一致した場合ログインし、データが存在しない場合は新しく作成されます。

 

deviseの設定ファイルを編集

作成したfacebookアプリで表示されているアプリIDとapp sercretを追加

require "omniauth-facebook"

Devise.setup do |config|

 config.omniauth( :facebook,
  "アプリID",
  "app sercret",
  {:scope => 'email, public_profile'} )

end

 

Userモデルを編集

:omniauthableを追加

 devise :database_authenticatable, :registerable,
 :recoverable, :rememberable, :trackable, :validatable, :lockable, :omniauthable

 

 

facebookログインで取得できたIDがUserテーブルにあるか確認し、あればユーザーデータを返す。なければ、新しく作成するメソッドを作成します。

 

def self.find_for_omiauth(auth)
  user = User.where(provider: auth.provider, uid: auth.uid).first

  unless user
    user = User.new
    user.provider = auth.provider
    user.uid = auth.uid
    user.email = auth.info.email
    user.password = Devise.friendly_token[0,20]
    user.save
  end

  return user
 end

 

コールバッグを実装

users/omniauth_callbacks_controller.rbを編集します。なければ作成してください。

 

def facebook
  # raise request.env['omniauth.auth'].to_yaml #ここで取得できるデータを確認できます。
  callback_from("facebook")
 end

def callback_from(provider)
  provider = provider.to_s

  @user = User.find_for_omiauth(request.env['omniauth.auth'])

  if @user.persisted?
    flash[:notice] = I18n.t('devise.omniauth_callbacks.success', kind: provider.capitalize)
    sign_in_and_redirect @user, event: :authentication
  else
    flash[:notice] = "ログインできません"
    session["devise.#{provider}_data"] = request.env['omniauth.auth']
    redirect_to mypage_index_path
  end
 end

 

認証ボタンを作成

<%- if devise_mapping.omniauthable? %>
  <%- resource_class.omniauth_providers.each do |provider| %>
    <% link_to "#{OmniAuth::Utils.camelize(provider)}でログインする", omniauth_authorize_path(resource_name, provider) %>
  <% end %>
<% end %>

 

これでfacebook認証が実装できました。