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

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

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

1 1.Facebook側の設定
2 アプリ側の設定

1.Facebook側の設定

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

https://developers.facebook.com/

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

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

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

次に「有効な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認証が実装できました。