Edited at

rails gem omniauthableを使って、facebookでログインできる機能を作る

More than 1 year has passed since last update.


環境

rail 5.0.2

deviseでログイン機能を作っている。

やること

  facebookのアカウントを使って、アプリにログインできる機能を作る。ログイン機能をdeviseで作っている前提でやる。

ログイン機能でdeviseのやり方

https://github.com/plataformatec/devise


Gemfile

 gem 'omniauth-facebook'


この gemを追加する


ターミナル

$rails g migration AddOmniauthToUsers provider:string uid:string

$rake db:migrate


config/initializers/devise.rb


config.omniauth :facebook, "APP_ID", "APP_SECRET", scope: 'email', info_fields: 'email,name'


上の"APP_ID", "APP_SECRET"は、 facebookacebookdevelopersから取得する。これは、facebookacebookdeveloperのところで、説明するから後で書く。


app/models/user.rb


class User < ApplicationRecord

devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :trackable, :validatable, :omniauthable

.......
....
..

end


devise:のところに、:omniauthableを追加する。


config/routes

devise_for :users, :controllers => { :omniauth_callbacks => "users/omniauth_callbacks" }


routesに追加する。

app/controllers/users/omniauth_callbacks_controller.rbを作る。

userフォルダーを作り、コントローラーを作る。


app/controllers/users/omniauth_callbacks_controller.rb

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController

def facebook
# You need to implement the method below in your model (e.g. app/models/user.rb)
@user = User.from_omniauth(request.env["omniauth.auth"])

if @user.persisted?
sign_in_and_redirect @user, :event => :authentication #this will throw if @user is not activated
set_flash_message(:notice, :success, :kind => "Facebook") if is_navigational_format?
else
session["devise.facebook_data"] = request.env["omniauth.auth"]
redirect_to new_user_registration_url
end
end

def failure
redirect_to root_path
end
end



app/models/user.rb


class User < ApplicationRecord

devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :trackable, :validatable, :omniauthable

def self.from_omniauth(auth)
where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
user.email = auth.info.email
user.password = Devise.friendly_token[0,20]
user.name = auth.info.name # assuming the user model has a name
user.image = auth.info.image # assuming the user model has an image
# If you are using confirmable and the provider(s) you use validate emails,
# uncomment the line below to skip the confirmation emails.
# user.skip_confirmation!
end
end



facebookdevelopersの説明

facebookでログインするために、facebookdevelopersを使う。

facebookdevelopersのリンク

 googleでfacebookdevelopersと調べてください

次にfacebookで各自のアカウントで、 facebookにログインしてください


新しいアプリを作るボタン押す。

トップページの右上にマイアプリのボタンがあるので、おしてください。そうすると、新しいアプリの追加がでてくるので、それをおしてください

screenshot.png


新しいアプリの設定

次の画面が出てきます。

screenshot 2.png

表示名は、各自のアプリの名前をつけてください。

メールアドレスは、各自のメールアドレスが出てくる。

カテゴリは、アプリの種類なので、各自のあぷりの種類をえらんでください

そしたら、 アプリIDを作成してくださいのボタンをおしてください

確認のために、上の英文字を打ってください


 プロダクト画面

screenshot 3.png

この画面が出ます。左上のダッシュボードをおしてください


プラットフォーム選択する

screenshot 4.png

そしたら、プラットフォーム作成の青いボタンををおしてください

screenshot.png

これは、アプリがどんな種類のか登録です。 右の ウェブサイトを押してください


詳細な登録

screenshot 2.png

screenshot.png

一番下にURLを登録するボタンがあります。ここは、http://localhost:3000/と打ってください。

これで登録は終わりです。

有効なOAuthリダイレクトURIにもhttp://localhost:3000/をやってください

screenshot 4.png

次にこのダッシュボード画面に戻ってください。右上の自分のアプリのボタンをおして、アプリ名前を選択したら、戻れます。

赤い文字で、隠してありますが、上のアプリIDとapp secretを確認してください。

app secretは、facebookのパスワードを入力しないと表示しないです。


config/initializers/devise.rb


config.omniauth :facebook, "APP_ID", "APP_SECRET", scope: 'email', info_fields: 'email,name'


アプリIDとapp secretをに記入します。


facebookボタンのリンクをはる

<%= link_to "Sign in with Facebook", user_facebook_omniauth_authorize_path %>


app/views/devise/registrations/new.html.erb


<%= link_to "Sign in with Facebook", user_facebook_omniauth_authorize_path %>


同様にログインページにも同じリンクを貼ります。

これで終わりです。

感想

 facebookつけるのは、意外と簡単だった。自分は、他のアプリにfacebookを使って登録をすることが多いので、いいと思った。

参考資料

https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview