[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實作登入


###參考網站

1 回復
  1. 王睿麒
    王睿麒 says:

    感謝你,我看了很多篇都有從 auth 中提取 email ,但是我始終提取不出來。看到你這篇發現到你沒有提取 email ,於是我才開始想可能權限上我沒有取到 email 因此才想到用 uid 代替來解決!再次感謝你!

    回覆

發表評論

Want to join the discussion?
Feel free to contribute!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *