[Rails] Devise + OmniAuth-facebook(未完)

整合 Devise 實作 Facebook 登入機制

前言

本次製作的登入機制，是保留原始的登入及註冊方式，並可另外使用facebook做登入。

首次使用facebook登入時，不需要輸入密碼，直到後台有設定密碼之後，始可使用帳號密碼登入。

首次使用帳號密碼登入時，可於後台再設定綁定facebook帳號。

合併帳號機制，若擁有一般帳號、及使用facebook帳號註冊，需要可以設定合併。

準備工作

####(1) 安裝相關gem

# gemfile
gem 'devise'
gem 'omniauth-facebook'
gem 'figaro'

$ bundle install

####(2) Devise安裝

$ rails g devise:install
$ rails g devise User

調整migration將User加入name及image

# db/migrate/20170115001000_devise_create_users.rb
t.string :name,               null: false, default: ""
t.string :image,              null: false, default: ""

$ rake db:migrate
$ rails g devise:views

# development.rb
 config.action_mailer.default_url
 _options = { host: 'localhost', port: 3000 }

# application_controller.rb
before_action :authenticate_user!

####(3) 至 facebook developer 建立 app

1. 註冊好帳號

2. 建立一個專用的app
   • 登入後，點選網頁右上頭像，點選 “Add a new app”
   • 建立好後會直接進入該app的 control panel
   • 在Facebook Login點選Get Started
   • 然後請輸入允許使用的網站，這邊使用測試用的http://localhost:3000/，記得按下Save Changes
3. 回到 dashboard 找到 app id 及 secret備用

####(4) figaro 安裝

$ figaro install

將上個步驟建立的 app id 及 secret 填寫如下

# config/application.yml
facebook_app_id: "*********"
facebook_app_secret: "abcdefg3b896a0ffb85d3738c01f7000"

####(5) OmniAuth-facebook 安裝

設定帳號認證連結資訊

# config/initializers/devise.rb
config.mailer_sender = 'mailer@example.com'
config.omniauth :facebook, ENV['facebook_app_id'], ENV['facebook_app_secret'], scope: 'email', info_fields: 'email, name'

加入兩個欄位到User供辨識用

$ rails g migration AddOmniauthToUsers provider:string uid:string
$ rake db:migrate

須在devise.rb設定開啟omniauthable模組， 並設定provider是facebook

devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable,
         :omniauthable, :omniauth_providers => [:facebook]

加入omniauth的callback controller

# 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

再加入一個從facebook註冊或登入用的function

# user.rb
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

頁面實作

1. …未完待續

相關網站

1. devise https://github.com/plataformatec/devise
2. omniauth-facebook https://github.com/mkdynamic/omniauth-facebook
3. devise整合omniauth說明 https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview