【開発メモ】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

飯橋凛（いいはしりん）

自称、学習系ブロガー。好きな映画は「メリーに首ったけ」。

学びを楽しくするために日々書いています。

このサイトでは、フリーランスで自由に生きるために役立つ情報を発信しています。

質問・ご意見・相談があればLINEまでどうぞ。

Pocket

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

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

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

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

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

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

その3. Facebookアプリ作成

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

Step1. Gem追加

Step2. AppIDとSecretIDを追加

Step3. deviseにメソッド追加

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

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

Step6. ルーティング設定

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

音生入力で楽にブログを書く技が満載！
ブログ音声入力術

8 件のコメント

コメントを残すコメントをキャンセル

電子書籍を出版しました

最新記事

カテゴリー

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

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

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

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

その3. Facebookアプリ作成

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

Step1. Gem追加

Step2. AppIDとSecretIDを追加

Step3. deviseにメソッド追加

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

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

Step6. ルーティング設定

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

おすすめ記事よかったらもう1記事どうぞ

【Unity基礎】transformを変更してオブジェクトを移動させる2…

【口コミ・評判】TECH::CAMPのiPhoneアプリ開発コースを4ヶ…

【超決定版】2ヶ月通ったのでTECH::CAMP渋谷教室を徹底解剖してみた。

Unityで作ったゲームにAdMob広告を実装する方法【バナー広告編】

【Railsのアプリ開発】初心者でもわかる！deviseでログイン機能を…

【入門書厳選2019】Unityを初心者でも0から勉強できる書籍・本おす…

【開発メモ】Ruby on Railsで作ったアプリをHerokuにデプ…

TECH::CAMP（テックキャンプ）終了から6ヶ月たった感想を書いてみた。

音生入力で楽にブログを書く技が満載！ ブログ音声入力術

8 件のコメント

コメントを残す コメントをキャンセル

電子書籍を出版しました

人気の投稿

最新記事

カテゴリー

音生入力で楽にブログを書く技が満載！
ブログ音声入力術

コメントを残すコメントをキャンセル