Rails
Facebook
devise
Facebookアプリ

RailsでDeviseを使う場合のFacebookログインの実装手順

Gemのバージョン確認

Rails 5.1.4
devise 4.3.0
omniauth 1.7.1
omniauth-facebook 4.0.0

:参考リンク
https://qiita.com/kami_zh/items/94aec2d94a2b4e9a1d0b

Facebookアプリ作成

まず、https://developers.facebook.com/apps からFacebookアプリを新規作成し、Facebook認証のための各種設定を行う。
今回はWebベースの認証のため、プラットフォームはウェブを指定。

開発用にゆる〜く設定

スクリーンショット 2017-10-08 8.30.12.png

スクリーンショット 2017-10-07 20.26.43.png

Rails側の手順

  1. Gemfileにomniauthのgemを追加
  2. bundle install
  3. Userテーブルにカラム(uid, provider, image)を追加
  4. devise.rbにFacebookアプリのAPP_IDとAPP_SECRETを追記
  5. facebook認証からコールバックを返すコントローラーを指定
  6. 指定したコールバック用のコントローラーに処理を追加
  7. user.rbに認証用のメソッドを追加
  8. Viewにlocalhost:3000/auth/facebookへのリンクを定義

gemの追加

Gemfile.rb
# ...略
gem 'omniauth'
gem 'omniauth-facebook'
# ...略
$ bundle install

devise.rbにFacebookアプリのAPP_IDとAPP_SECRETを追記

config/initializers/devise.rb
# ...略
config.omniauth :facebook, 'APP_ID', 'APP_SECRET', scope: 'email', fields: 'email, name'
# ...略
ターミナルのルートディレクトリで以下のコマンドを叩く

$ rails g migration AddFieldsToUser uid:string provider:string image:string
$ rails db:migrate

コールバックのルーティングを追加

config/routes.rb
# ...略

devise_for :users, controllers: {omniauth_callbacks: 'omniauth_callbacks'}

# ...略

omniauth_callbacks_controller.rbを新しく作成し、コールバック関数を追加

controllers/omniauth_callbacks_controller.rb
class OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def facebook
    @user = User.from_omniauth(request.env["omniauth.auth"])

    if @user.persisted?
      sign_in_and_redirect @user, :event => :authentication
      set_flash_message(:notice, :success, :kind => "Facebook") if is_navigational_format?
    else
      session["devise.facebook_data"] = request.env["omniauth.auth"]
      redirect_to new_user_registration_url
    end
  end

  def failure
    redirect_to root_path
  end
end
models/user.rb
# ...略

# omniauthableを追加
devise :database_authenticatable, :registerable, :omniauthable,
         :recoverable, :rememberable, :trackable, :validatable, :confirmable

  def self.from_omniauth(auth)
    @user = User.where(email: auth.info.email).first

    if @user.present?
      @user
    else
      User.find_or_create_by!(provider: auth.provider, uid: auth.uid) do |user|
        user.email = auth.info.email ||= 'change@me.com'
        user.password = Devise.friendly_token[0,20]
        user.fullname = auth.info.name
        user.image = auth.info.image
        user.uid = auth.uid
        user.provider = auth.provider

        # deviseでEmail確認でのアカウント有効化(confirmable)を使う場合、Facebookログインでは、Email確認フローをスキップ。
        user.skip_confirmation! 
      end
    end
  end

# ...略

Viewにlocalhost:3000/auth/facebookへのリンクを定義

login.html.erb
<%= link_to "Login with Facebook", user_facebook_omniauth_authorize_path %>