[rails4]使用Omniauth整合facebook及google註冊認證

最近將進行中的Ruby on rails專案嘗試加上oauth 2.0註冊認證，再整合目前最多人使用的facebook及google帳號，讓來客能便利的註冊會員。

簡單記錄下這次的操作記錄，還有不少待改進處。

####安裝流程
1. 創建一個新專案
2. 安裝所需要的gem
3. 創建User model
4. 創建Sessions controller
5. 創建及設定Omniauth initializer
6. 加入facebook javascript
7. 修改views增加登入及登出選項

####API申請位置
* Google：https://cloud.google.com/console
* Facebook：https://developers.facebook.com/apps/

####所需要的Gem
* gem ‘omniauth’
* gem ‘omniauth-facebook’
* gem ‘omniauth-google-oauth2’

##安裝過程：

###1.創建一個新專案

rails new oauth-demo

###2.修改Gemfile，加入omniauth、facebook、google相關gem

然後下bundle install指令，讓新增的gem能被專案所使用。

gem 'omniauth'
gem 'omniauth-facebook'
gem 'omniauth-google-oauth2'

###3.創建User model

rails g model user provider uid name oauth_token oauth_expires_at:datetime

rake db:migrate

修改User.rb

def self.from_omniauth(auth)
  where(auth.slice(:provider, :uid)).first_or_initialize.tap do |user|
    user.provider = auth.provider
    user.uid = auth.uid
    user.name = auth.info.name
    user.oauth_token = auth.credentials.token
    user.oauth_expires_at = Time.at(auth.credentials.expires_at)
    user.save!
  end
end

還需要修改application_controller.rb進行相關安全設定

helper_method :current_user

def current_user
  @current_user ||= User.find(session[:user_id]) if session[:user_id]
end

###4.創建Sessions controller

rails generate controller sessions

修改sessions_controller.rb

class SessionsController < ApplicationController
  def create
    user = User.from_omniauth(env["omniauth.auth"])
    session[:user_id] = user.id
    redirect_to root_url
  end

  def destroy
    session[:user_id] = nil
    redirect_to root_url
  end
end

###5.創建及設定Omniauth initializer
vi config/initializers/omniauth.rb

OmniAuth.config.logger = Rails.logger

Rails.application.config.middleware.use OmniAuth::Builder do
    
    provider :facebook, 'YOUR-APP-ID-HERE', 'YOUR-APP-SECRET-HERE'
    provider :google_oauth2, 'GOOGLE_KEY', 'GOOGLE_SECRET'

end

#####API申請位置
* Google：https://cloud.google.com/console
* Facebook：https://developers.facebook.com/apps/

###6. 加入facebook javascript

jQuery ->
  $('body').prepend('

  
')

  $.ajax
    url: "#{window.location.protocol}//connect.facebook.net/en_US/all.js"
    dataType: 'script'
    cache: true


window.fbAsyncInit = ->
  FB.init(appId: '<%= ENV["FACEBOOK_APP_ID"] %>', cookie: true)

  $('#sign_in').click (e) ->
    e.preventDefault()
    FB.login (response) ->
      window.location = '/auth/facebook/callback' if response.authResponse

  $('#sign_out').click (e) ->
    FB.getLoginStatus (response) ->
      FB.logout() if response.authResponse
    true

###7. 修改views增加登入及登出選項
新增路由
vi config/routes.rb

match 'auth/:provider/callback', to: 'sessions#create'
get 'auth/failure', to: redirect('/')
get 'signout', to: 'sessions#destroy', as: 'signout'

修改views，增加會員的相關選項

<% if current_user %>

Welcome <%= current_user.name %>!
<%= link_to "Sign out", signout_path, id: "sign_out" %>
<% else %>

  <%= link_to "Sign in with Facebook", "/auth/facebook", id: "sign_in" %>
  <%= link_to "Sign in with Google", "/auth/google_oauth2", id: "sign_in" %>

<% end %>

####過程遇到問題！
整個過程耗最久的是Client ID for web application的設定，

• Redirect URIs：http://localhost:3000/auth/google_oauth2/callback
• Javascript Origins：http://localhost:3000/
  注意：不是https://

將由這樣設定才勉強打通google驗證註冊這條路。

####待解決問題！
1. 已經註冊會員，尚無法進行權限控管。
2. 無法取得有哪些會員已註冊，他們的相關登入記錄。

備註：
後來我都使用devise和omniauth搭配，做法更加簡單。請看[Rails4] devise和google oauth實作登入

---

###參考網站

• http://railscasts.com/episodes/360-facebook-authentication
• http://railscasts.com/episodes/360-facebook-authentication
• https://github.com/zquestz/omniauth-google-oauth2