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(); 
    } 
});