rail 5.0.2
deviseでログイン機能を作っている。
やること
facebookのアカウントを使って、アプリにログインできる機能を作る。ログイン機能をdeviseで作っている前提でやる。
ログイン機能でdeviseのやり方
https://github.com/plataformatec/devise
gem 'omniauth-facebook'
この gemを追加する
$rails g migration AddOmniauthToUsers provider:string uid:string
$rake db:migrate
config.omniauth :facebook, "APP_ID", "APP_SECRET", scope: 'email', info_fields: 'email,name'
上の"APP_ID", "APP_SECRET"は、 facebookacebookdevelopersから取得する。これは、facebookacebookdeveloperのところで、説明するから後で書く。
class User < ApplicationRecord
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :trackable, :validatable, :omniauthable
.......
....
..
end
devise:のところに、:omniauthableを追加する。
devise_for :users, :controllers => { :omniauth_callbacks => "users/omniauth_callbacks" }
routesに追加する。
app/controllers/users/omniauth_callbacks_controller.rbを作る。
userフォルダーを作り、コントローラーを作る。
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
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にログインしてください
新しいアプリを作るボタン押す。
トップページの右上にマイアプリのボタンがあるので、おしてください。そうすると、新しいアプリの追加がでてくるので、それをおしてください
新しいアプリの設定
次の画面が出てきます。
表示名は、各自のアプリの名前をつけてください。
メールアドレスは、各自のメールアドレスが出てくる。
カテゴリは、アプリの種類なので、各自のあぷりの種類をえらんでください
そしたら、 アプリIDを作成してくださいのボタンをおしてください
確認のために、上の英文字を打ってください
プロダクト画面
この画面が出ます。左上のダッシュボードをおしてください
プラットフォーム選択する
そしたら、プラットフォーム作成の青いボタンををおしてください
これは、アプリがどんな種類のか登録です。 右の ウェブサイトを押してください
詳細な登録
一番下にURLを登録するボタンがあります。ここは、http://localhost:3000/と打ってください。
これで登録は終わりです。
有効なOAuthリダイレクトURIにもhttp://localhost:3000/をやってください
次にこのダッシュボード画面に戻ってください。右上の自分のアプリのボタンをおして、アプリ名前を選択したら、戻れます。
赤い文字で、隠してありますが、上のアプリIDとapp secretを確認してください。
app secretは、facebookのパスワードを入力しないと表示しないです。
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 %>
<%= link_to "Sign in with Facebook", user_facebook_omniauth_authorize_path %>
同様にログインページにも同じリンクを貼ります。
これで終わりです。
感想
facebookつけるのは、意外と簡単だった。自分は、他のアプリにfacebookを使って登録をすることが多いので、いいと思った。
参考資料
https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview