　
Facebookログイン機能、あったら便利ですよね。
でも、クイックスタート参照してもできない...リモートでバグる...などAPIの導入はそれなりに骨が折れます。
ただ、deviseの力を借り、少し仕組みがわかれば、初心者でも環境問わず、3分でできます！

事前準備

Facebook for developpersに登録

1.まずアカウント登録しアプリケーションを登録する。

ダッシュボードを参照。自分のアプリケーションの登録を確認。

2.サイトURLを登録する。

ローカル環境で動かしたければlocalhost、production環境で動かしたければURLをそのまま貼り付けます。
表示名、アプリアイコンは良きタイミングで。

3.本番環境への移行

リモートで動かしたいのであれば、追加で以下のように登録ステータスを開発環境から本番環境へ変更しなければなりません

コード記述

local、production共通です。
devise導入済み、データベース、アプリケーションは生成済みとします。
devise管理下のmodel,tableはuserと仮定します
デプロイ先はherokuと仮定します。
アプリIDとパスワードは環境変数に入れてあげましょう。

1.gemをインストールします。

Gemfile

gem 'omniauth'
gem 'omniauth-facebook'

2.usersテーブルに以下のカラムを追加します。

AddOmniauthToUser.rb

class AddOmniauthToUsers < ActiveRecord::Migration[5.0]
  def change
    # omniauthプロバイダー情報(今回はFacebook)
    add_column :users, :provider, :string
    # omniauthログイン用インデックス
    add_column :users, :uid, :string
  end
end

3.deviseの設定ファイルに以下の記述をご自身のAPIキーとともに追記してください。

devise.rb

require 'omniauth'
require 'omniauth-facebook'

config.omniauth :facebook,'アプリIDが入ります','app secretが入ります'

4.デバイスが自動生成してくれるモデルの設定を以下のように追記します。

user.rb

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

↓

user.rb

  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable,:omniauthable, omniauth_providers: [:facebook]

user.rb

#Facebookログインへの橋渡し
  def self.from_omniauth(auth)
    where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
      user.name = auth.info.name
      user.email = auth.info.email
      user.password = Devise.friendly_token[0,20]
      # imageカラムの場合この記述(筆者のUploderはキャリアウェーブ)
      user.remote_image_url = auth.info.image.gsub('http://','https://')
    end
  end

5.コマンドプロンプトからrails g devise:controllers usersでdevise内部のomniauth controllerを引っ張り出します。

facebookでのログイン方式を以下のように指定。

omniauth_callbacks_controller.rb

class Users::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

6.デバイスのコントローラーをカスタマイズしたので、deviseにそれを教えてあげましょう。

他のコントローラーを編集する場合にもこの作業は必要になります。

route.rb

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

7.assets/javascript配下にアプリIDとともに、以下のjsファイルを設置してあげましょう。

以下のjsファイルがFacebook SDKとあなたのアプリケーションをつなげます。

facebook.js

$(function(){
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'あなたのアプリケーションIDが入ります',
      cookie     : true,
      xfbml      : true,
      version    : 'v2.8'
    });
    FB.AppEvents.logPageView();
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

  function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}

});

##　8.実装したい箇所のビューファイルに以下の記述でボタンを設置します。

ルーティングのprefixはrails routesにてご確認ください。

実装したい.haml

= link_to "Facebookでログイン", user_facebook_omniauth_authorize_path, class: "login-button facebook" ,method: :post

事前準備

Facebook for developpersに登録

1.まずアカウント登録しアプリケーションを登録する。

2.サイトURLを登録する。

3.本番環境への移行

コード記述

1.gemをインストールします。

2.usersテーブルに以下のカラムを追加します。

3.deviseの設定ファイルに以下の記述をご自身のAPIキーとともに追記してください。

4.デバイスが自動生成してくれるモデルの設定を以下のように追記します。

5.コマンドプロンプトからrails g devise:controllers usersでdevise内部のomniauth controllerを引っ張り出します。

facebookでのログイン方式を以下のように指定。

6.デバイスのコントローラーをカスタマイズしたので、deviseにそれを教えてあげましょう。

他のコントローラーを編集する場合にもこの作業は必要になります。

7.assets/javascript配下にアプリIDとともに、以下のjsファイルを設置してあげましょう。

以下のjsファイルがFacebook SDKとあなたのアプリケーションをつなげます。

ルーティングのprefixはrails routesにてご確認ください。

以上で完成です。簡易的ですがこれでFacebookログインが可能となります。

不明点や、追記した方がいい部分があればコメントいただければ幸いです。