Facebook 로그인 기능, 있으면 편리하네요.
하지만 퀵 스타트 참조도 할 수 없다 ... 원격으로 버그 ... 등 API의 도입은 나름대로 뼈가 부러집니다.
다만, devise의 힘을 빌려, 조금 구조를 알면, 초보자라도 환경 불문하고, 3분으로 할 수 있습니다!

사전 준비

Facebook for developers에 등록

1. 먼저 계정을 등록하고 애플리케이션을 등록합니다.

대시보드 참조. 자신의 애플리케이션 등록을 확인.

2. 사이트 URL을 등록합니다.

로컬 환경에서 움직이고 싶다면 localhost, production 환경에서 움직이고 싶다면 URL을 그대로 붙여 넣습니다.
표시 이름, 앱 아이콘은 좋은 타이밍에.

3. 프로덕션 환경으로의 전환

원격으로 움직이고 싶다면 추가로 다음과 같이 등록 상태를 개발 환경에서 프로덕션 환경으로 변경해야합니다.

코드 설명

local, production 공통입니다.

devise 도입됨, 데이터베이스, 애플리케이션이 생성되었다고 가정합니다.

devise가 관리하는 모델, 테이블은 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에서 확인하십시오.

구현하고 싶습니다.

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

　

이상으로 완성입니다. 간단하지만 이것으로 Facebook 로그인이 가능합니다.　　

불명점이나, 추기하는 것이 좋은 부분이 있으면 코멘트 주시면 다행입니다.