RailsアプリでFacebook認証のログイン機能の実装方法
どうも、Linです。背もたれ、拡大します。
Railsアプリを作成したらやってみたいこと。
それは、
Facebookログイン認証機能を実装すること
ではないでしょうか。
SNS認証サービスに対応しておけば、登録の手間が省けるのでユーザー数の増加につながるはずです。
今日は、Facebook認証をなんとかできるようになったので、その方法を忘れないうちにまとめておこうと思います。
記事執筆にあたり、こちらの神記事を参考にさせていただきました。
RailsアプリにFacebook認証機能をつける前の3つの事前準備
RailsアプリにFacebook認証機能を実装する前に、次の3つの準備をしておく必要があります。
その1. deviseによるログイン機能を実装したアプリ作成
RailsアプリでFacebookログイン機能をつけるためには、
deviseによるログイン機能を実装したアプリ
を作成しておく必要があります。
適当なサンプルアプリをこちらの記事を見ながら作ってみてください。
その2. 「uid」と「provider」をカラムに追加
Userテーブルに、
- uid（任意のid）
- provider（facebookやTwitter）
の2つのカラムを追加。
$ 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'
の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つを付け足しましょう。
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ログイン機能を実装させる方法でした。
- gem追加
- Userテーブル追加
- deviseメソッド追加
- findメソッド追加
- コールバック処理
- ルーティング設定
の6ステップを踏めば、FBログイン機能が完成するはずです。
それでは〜
Lin
おそらく、ブロガー。
今年でフリーランス 6年目。
