Facebook Javascript SDK和OmniAuth

Question

我已成功將OmniAuth Facebook登錄流程集成到服務器端的我的Rails應用程序中。不過，我也試圖在客戶端使用Facebook Javascript SDK來解決這個問題，並且遇到了一些問題。

編輯：這個問題似乎只能是發生在Chrome，而不是在Safari或Firefox

會話控制器 - 這適用於服務器端的流量

def create 

     auth = request.env['omniauth.auth'] 
     #if an authorization does not exisit, it will create a new authorization record. it will also create a new user record if a user is not currently logged in 
     unless @auth = Authorization.find_from_hash(auth) 
     # Create a new user or add an auth to existing user, depending on 
     # whether there is already a user signed in. 
     @auth = Authorization.create_from_hash(auth, current_user) 

     #add the friends array to user record. as of now only doing this on the initial user create 
     @friends = [] 
     FbGraph::User.me(@auth.user.authorization.facebook_token).fetch.friends.each do |t| 
      @friends << t.identifier 
     end 
     u = @auth.user 
     u.facebook_friends = @friends 
     u.save 

     end 

     #store a new auth token if needed (if the new token in the hash does not match the one stored in the database for authorization) 
     Authorization.check_if_new_auth_token_is_needed(auth) 

     # Log the authorizing user in. 
     self.current_user = @auth.user 

     redirect_to root_url 

    end 

如果我只是打了/ AUTH/Facebook的路徑，用戶將在

路線

match '/auth/:provider/callback', :to => 'sessions#create' 

記錄

現在在主頁視圖我想現在運行客戶端流量登錄

首頁查看

<script> 
$(function() { 
    $('a').click(function(e) { 
    e.preventDefault(); 
    FB.login(function(response) { 
     if (response.authResponse) { 
     $('#connect').html('Connected! Hitting OmniAuth callback (GET /auth/facebook/callback)...'); 
     // since we have cookies enabled, this request will allow omniauth to parse 
     // out the auth code from the signed request in the fbsr_XXX cookie 
     $.getJSON('/auth/facebook/callback', function(json) { 
      $('#connect').html('Connected! Callback complete.'); 
      $('#results').html(JSON.stringify(json)); 
     }); 
     } 
    }, { scope: 'email,publish_stream' }); 
    }); 
}); 
</script> 
<p id="connect"> 
      <a href="#">Connect to FB</a> 
     </p> 

     <p id="results" /> 

我得到下面的錯誤在我的日誌

{「error」：{「message」：「缺少授權 代碼」，「type」：「OAuthException」，「code」：1}}

基本上，Omniauth並沒有從FB.login操作中獲取facebook簽名的請求（因爲https://github.com/mkdynamic/omniauth-facebook/blob/master/example/config.ru表示應該這樣做）。

任何想法，我如何得到這個工作正常或我可能做錯了嗎？

Answer 1

我意識到這個問題已經有一年了，但我現在兩次遇到這個問題，所以希望這可以幫助某人。

有與此相關的問題的兩種github上線程： https://github.com/mkdynamic/omniauth-facebook/issues/73 和 https://github.com/intridea/omniauth-oauth2/issues/31

問題的來源是omniauth-的oauth2寶石內的callback_phase方法：

if !options.provider_ignores_state && (request.params['state'].to_s.empty? || request.params['state'] != session.delete('omniauth.state')) 
    raise CallbackError.new(nil, :csrf_detected) 
end 

request.params ['state']和session ['omniauth.state']都是零，因此條件失敗並引發CallbackError異常。

一種解決方案是設置provider_ignores_state爲true規避條件：

config.omniauth :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_APP_SECRET'], { 
    strategy_class: OmniAuth::Strategies::Facebook, 
    provider_ignores_state: true, 
} 

正如線程指出，上述這不是一個永久性的解決方案，因爲它可以讓你打開CSRF攻擊。

另一件需要注意的事情是，Chrome瀏覽器在向本地主機寫入cookie方面存在問題。嘗試使用lvh.me作爲你的域名（它解析爲127.0.0.1）。

更多的代碼打補丁的問題通常不是一個偉大的路徑，但如果沒有這些解決方案的工作，那麼你總是可以創建自己的處理程序，並分析了Facebook的cookie：

def handle_facebook_connect 
    @provider = 'facebook' 
    @oauth = Koala::Facebook::OAuth.new(ENV["FACEBOOK_ID"], ENV["FACEBOOK_SECRET"]) 
    auth = @oauth.get_user_info_from_cookies(cookies) 

    # Get an extended access token 
    new_auth = @oauth.exchange_access_token_info(auth['access_token']) 
    auth['access_token'] = new_auth["access_token"] 

    # Use the auth object to setup or recover your user. The following is 
    # and example of how you might handle the response 
    if authentication = Authentication.where(:uid => auth['user_id'], :provider => @provider).first 
     user = authentication.user 
     sign_in(user, :event => :authentication) 
    end 

    # Redirect or respond with json 
    respond_to do |format| 
     format.html { redirect_to user } 
     format.json { render json: user } 
    end 
end 

，那麼你就當您收到連接的響應時，需要重定向到'handle_facebook_connect'方法：

FB.Event.subscribe('auth.authResponseChange', function(response) { 
    if(response.status === 'connected'){ 
    if(response.authResponse){ 

     // Redirect to our new handler 
     window.location = '/handle_facebook_connect'; 

     // Or make an ajax request as in the code in the original question: 
     // $.getJSON('/handle_facebook_connect', function(json) { 
     // $('#connect').html('Connected! Callback complete.'); 
     // $('#results').html(JSON.stringify(json)); 
     // }); 

    } 
    } else if (response.status === 'not_authorized'){ 
    Facebook.message(Facebook.authorize_message); 
    } else { 
    FB.login(); 
    } 
});