【開発メモ】RailsアプリでFacebookログインの認証機能を実装させる方法

RailsアプリでFacebook認証のログイン機能の実装方法

どうも、Linです。背もたれ、拡大します。

Railsアプリを作成したらやってみたいこと。

それは、

Facebookログイン認証機能を実装すること

ではないでしょうか。

SNS認証サービスに対応しておけば、登録の手間が省けるのでユーザー数の増加につながるはずです。

今日は、Facebook認証をなんとかできるようになったので、その方法を忘れないうちにまとめておこうと思います。

記事執筆にあたり、こちらの神記事を参考にさせていただきました。

Qiita

Devise+OmniAuthでユーザ認証を実装する手順 - Qiita

http://qiita.com/kami_zh/items/94aec2d94a2b4e9a1d0b

Ruby on Railsアプリケーションに、以下の認証方法を実装する。今回は1→2の順序で実装する。1. メールアドレス2. OAuth（Facebook/Twitter）## 動作環境- Ruby on Rails...

RailsアプリにFacebook認証機能をつける前の3つの事前準備

RailsアプリにFacebook認証機能を実装する前に、次の3つの準備をしておく必要があります。

その1. deviseによるログイン機能を実装したアプリ作成

RailsアプリでFacebookログイン機能をつけるためには、

deviseによるログイン機能を実装したアプリ

を作成しておく必要があります。

適当なサンプルアプリをこちらの記事を見ながら作ってみてください。

FREE SWORDER

【Railsのアプリ開発】初心者でもわかる！deviseでログイン機能を実装する使い方

https://freesworder.net/rails-devise/

忘れないうちにRailsのdeviseの使い方をメモしておこうどうも、Linです。ピンクグレープ、3年飲んでます。ウェブアプリを簡単に開発できるRails。最近、Unityの勉強でサボっていましたが、もうちょっとRailsアプリも勉強せねばとトレーニングを再開しました。R...

その2. 「uid」と「provider」をカラムに追加

Userテーブルに、

uid（任意のid）
provider（facebookやTwitter）

の2つのカラムを追加。

$ rails g migration AddColumnsToUsers uid:string provider:string

1	$ rails g migration AddColumnsToUsers uid:string provider:string

その3. Facebookアプリ作成

あとは、Facebook側の設定です。

こちらのFacebook Developerから、「Add a New App」を選択。

続いて、

メールアドレス
アプリ名（適当でいい）

を記入。

左メニューの「Basic」を選択。

セッティングベーシック画面から、一番下の、

Add Platform

を選択。

そこから、

ウェブサイトを選び、

URL記入欄に、

http://localhost:3000/

をいれてみましょう。

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

RailsアプリにFacebookログイン機能を実装する5つのステップ

さて、いよいよRailsアプリにFacebookログイン機能を実装する方法です。

Step1. Gem追加

Facebookログインを使うために必要なgemファイルに、

gem 'omniauth'
gem 'omniauth-facebook'

1 2	gem 'omniauth' gem 'omniauth-facebook'

の2行を追記してください。

追加後はおきまりの、

$ bundle install

1	$ bundle install

Step2. AppIDとSecretIDを追加

config/insitializers/devise.rb

に下記のコードを追記。

Devise.setup do |config|
  config.omniauth :facebook, 'App ID', 'App Secret'
end

Devise.setup do |config|

config.omniauth :facebook, 'App ID', 'App Secret'

end

ここでは、先ほど設定したFacebookアプリの、

AppID
SecretID

の2つを付け足しましょう。

Step3. deviseにメソッド追加

deviseの機能を拡張させます。

app/model/user.rbのファイルの末尾に「:omniauthable」を追加。

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

1 2	devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable, :omniauthable

Step4. Userモデルにfindメソッド実装

つぎに、app/model/user.rbのUserモデルのファイルに、

class User < ActiveRecord::Base
  # ...

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

    unless user
      user = User.create(
        uid:      auth.uid,
        provider: auth.provider,
        email:    auth.info.email,
        password: Devise.friendly_token[0, 20]
      )
    end

    user
  end

end

class User < ActiveRecord::Base

# ...

def self.find_for_oauth(auth)

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

unless user

user = User.create(

uid: auth.uid,

provider: auth.provider,

email: auth.info.email,

password: Devise.friendly_token[0, 20]

)

end

user

end

を追記。

Step5. コールバック処理の実装

続いて、コールバック処理です。

app/controller以下に、usersフォルダを作成しましょう。

そのusersフォルダに、

omniauth_callbacks_controller.rb

というファイルを作ります。このファイルはこんな感じで編集。

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def facebook
    callback_from :facebook
  end

  private

  def callback_from(provider)
    provider = provider.to_s

    @user = User.find_for_oauth(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
      session["devise.#{provider}_data"] = request.env['omniauth.auth']
      redirect_to new_user_registration_url
    end
  end
end

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController

def facebook

callback_from :facebook

end

private

def callback_from(provider)

provider = provider.to_s

@user = User.find_for_oauth(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

session["devise.#{provider}_data"] = request.env['omniauth.auth']

redirect_to new_user_registration_url

end

Step6. ルーティング設定

コールバック用のルーティングを設定。

config/route.rbのdevise_forの後ろに、コールバック用の記述を追記します。

Rails.application.routes.draw do
  devise_for :users, controllers: { omniauth_callbacks: 'users/omniauth_callbacks' }

  # ...
end

Rails.application.routes.draw do

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

# ...

end

これでFacebookログイン機能の実装は完了ですね。

http://localhost3000/users/sign_up

にアクセスしてみてください。

「Sign in with Facebook」をクリックしてみると、

お、よくあるFacebook連携の画面がポップアップしてきました。

これでログインできたんじゃないでしょうかね！

さあ、RailsアプリにFacebookログイン機能を実装しよう！

以上がRailsアプリにFacebookログイン機能を実装させる方法でした。

gem追加
Userテーブル追加
deviseメソッド追加
findメソッド追加
コールバック処理
ルーティング設定

の6ステップを踏めば、FBログイン機能が完成するはずです。

それでは〜

Lin

飯橋凛（Ihashi Lin）

自称、学習系ブロガー。自ら学び、学んだことをわかりやすく楽しくアウトプットすることを心がけています。

好きな映画は「メリーに首ったけ」

Pocket

8件のコメント

うぇーーい より:

2019年2月20日 9:12 PM

ありがとうございました！！そのとおりにやったら実装できました！

返信
1. 飯橋凛（Ihashi Lin） より:
  
  2019年2月22日 11:03 AM
  
  おお！良かったです！！
  
  返信
ワカワカ より:

2019年7月12日 4:53 PM

質問よろしいでしょうか？
記事通りに実装してみましたが、Facebook連携の画面が表示されませんでした。しかし、データは登録されログインできていました。
原因が分かれば教えていただけませんか？

返信
1. 飯橋凛（Ihashi Lin） より:
  
  2019年7月12日 7:36 PM
  
  もしかしたらFacebook側の仕様が変わったのかもしれませんね！
  詳しい原因はわからんです！
  
  返信
  1. ワカワカ より:
    
    2019年7月12日 7:52 PM
    
    そうですか…
    返信ありがとうございました！
    
    返信
キュッピー より:

2019年10月30日 7:56 AM

他のgemの使い方は、ありますか？
例えば、Facebookの共通ボタンや「いいね」などの付け方など。
お願いします。

返信
1. 飯橋凛（Ihashi Lin） より:
  
  2019年10月30日 1:30 PM
  
  なるほど・・・！
  ちょっと最近Railsサボっていたのでまたやらないとですね。
  学びがあったら記事にします！
  
  返信
ポン太 より:

2020年2月15日 11:51 PM

質問失礼します。
現在記事通りに実装しています。

config/insitializers/devise.rbにidとsecret_idを書いているのですが、環境変数にしなくても大丈夫なんでしょうか？

よろしくお願いします。

返信