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つのカラムを追加。
|
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ファイルに、
|
1 2 |
gem 'omniauth' gem 'omniauth-facebook' |
の2行を追記してください。
追加後はおきまりの、
|
1 |
$ bundle install |
Step2. AppIDとSecretIDを追加
config/insitializers/devise.rb
に下記のコードを追記。
|
1 2 3 |
Devise.setup do |config| config.omniauth :facebook, 'App ID', 'App Secret' end |
ここでは、先ほど設定したFacebookアプリの、
- AppID
- SecretID
の2つを付け足しましょう。
Step3. deviseにメソッド追加
deviseの機能を拡張させます。
app/model/user.rbのファイルの末尾に「:omniauthable」を追加。
|
1 2 |
devise :database_authenticatable, :registerable, :recoverable, :rememberable, :trackable, :validatable, :omniauthable |
Step4. Userモデルにfindメソッド実装
つぎに、app/model/user.rbのUserモデルのファイルに、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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
というファイルを作ります。このファイルはこんな感じで編集。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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の後ろに、コールバック用の記述を追記します。
|
1 2 3 4 5 |
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
おそらく、ブロガー。現在ホテル暮らしで全国フラフラしています。
ネット広告代理店に1年3ヶ月勤め上げ、独立をして丸4年が経ちました。今年でフリーランス 5年目。
質問・ご意見・相談があればLINEで受け付けていますのでお気軽にどうぞ 。
ありがとうございました！！そのとおりにやったら実装できました！
おお！良かったです！！
質問よろしいでしょうか？
記事通りに実装してみましたが、Facebook連携の画面が表示されませんでした。しかし、データは登録されログインできていました。
原因が分かれば教えていただけませんか？
もしかしたらFacebook側の仕様が変わったのかもしれませんね！
詳しい原因はわからんです！
そうですか…
返信ありがとうございました！
他のgemの使い方は、ありますか？
例えば、Facebookの共通ボタンや「いいね」などの付け方など。
お願いします。
なるほど・・・！
ちょっと最近Railsサボっていたのでまたやらないとですね。
学びがあったら記事にします！
質問失礼します。
現在記事通りに実装しています。
config/insitializers/devise.rbにidとsecret_idを書いているのですが、環境変数にしなくても大丈夫なんでしょうか？
よろしくお願いします。