飯橋凛（いいはし りん）

【開発メモ】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アプリも勉強せねばとトレーニングを再開しました。Railsアプリ作成するときに結構使うのが、deviseというログイン機能を実装できるgemです。 これまで30回以上deviseのコマンドラインを打ち込んできましたが、その度に使い方を忘れてしまうのでそろそろメモしておこうと思い、記事にしてみました笑 deviseの使...

 

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

Userテーブルに、

  1. uid（任意のid）
  2. provider（facebookやTwitter）

の2つのカラムを追加。

$ rails g migration AddColumnsToUsers uid:string provider:string

 

 

その3. Facebookアプリ作成

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

 

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

 

rails facebook

 

続いて、

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

を記入。

 

rails facebook

 

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

 

rails facebook

 

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

Add Platform

を選択。

 

rails facebook

 

そこから、

ウェブサイトを選び、

 

rails facebook

 

URL記入欄に、

http://localhost:3000/

をいれてみましょう。

 

rails facebook

 

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

 

 

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

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

 

Step1. Gem追加

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

gem 'omniauth'
gem 'omniauth-facebook'

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

追加後はおきまりの、

$ bundle install

 

 

Step2. AppIDとSecretIDを追加

config/insitializers/devise.rb

に下記のコードを追記。

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

 

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

  • AppID
  • SecretID

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

 

rails facebook

 

Step3. deviseにメソッド追加

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

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

 

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

 

を追記。

 

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

 

 

Step6. ルーティング設定

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

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

 

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ログイン機能を実装させる方法でした。

  1. gem追加
  2. Userテーブル追加
  3. deviseメソッド追加
  4. findメソッド追加
  5. コールバック処理
  6. ルーティング設定

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

 

それでは〜

Lin

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




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

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍

チェックする



8 件のコメント

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

    返信する

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

    返信する

    • なるほど・・・！
      ちょっと最近Railsサボっていたのでまたやらないとですね。
      学びがあったら記事にします！

      返信する

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

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

    よろしくお願いします。

    返信する

    • コメントを残す

    メールアドレスが公開されることはありません。