【開発メモ】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ログイン機能が完成するはずです。

もし、

「このステップを踏んでもできねえよ！！？」

と電柱を殴りそうになっている方には「teratail」がおすすめです。

エンジニア専門のQAサイトで、百戦錬磨のエンジニアの方々に相談できますからね。

よかったら使ってみてください。

それでは〜

Lin

飯橋凛（Ihashi Lin）

新卒で入ったネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。好きな映画は「メリーに首ったけ」
>>Twitterをフォローする

【開発メモ】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ログイン機能を実装しよう！

2件のコメント

コメントはこちらからお願いします！コメントをキャンセル

【開発メモ】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ログイン機能を実装しよう！

2件のコメント

コメントはこちらからお願いします！ コメントをキャンセル

もう1本読んでみる

コメントはこちらからお願いします！コメントをキャンセル