Facebook Javascript SDK and OmniAuth - ruby-on-rails

Question

I have successfully integrated the OmniAuth Facebook login flow into my rails application on the server side. However, I am also trying to get this to work using the Facebook Javascript SDK on the client side and am running into some issues.
EDIT: THIS ISSUE ONLY SEEMS TO BE HAPPENING IN CHROME AND NOT IN SAFARI OR FIREFOX
Sessions Controller - This works on the server side flow
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
If I simply hit the /auth/facebook path, the user will be logged in
Routes
match '/auth/:provider/callback', :to => 'sessions#create'
Now on the homepage view I am trying to now run a client side flow login
Homepage View
<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">
Connect to FB
</p>
<p id="results" />
I'm getting the following error in my log
{"error":{"message":"Missing authorization
code","type":"OAuthException","code":1}}
Basically, Omniauth is not picking up on the facebook signed request from the FB.login action (as https://github.com/mkdynamic/omniauth-facebook/blob/master/example/config.ru says it's supposed to).
Any ideas on how I can get this to work properly or what I may be doing incorrectly?

Answer 1

I realize this question is a year old, but I've run into this problem twice now so hopefully this helps someone.
There are two github threads related to this problem:
https://github.com/mkdynamic/omniauth-facebook/issues/73
and
https://github.com/intridea/omniauth-oauth2/issues/31
The source of the problem is the callback_phase method inside the omniauth-oauth2 gem:
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'] and session['omniauth.state'] are both nil so the condition fails and a CallbackError exception is raised.
One solution is to set provider_ignores_state to true which circumvents the condition:
config.omniauth :facebook, ENV['FACEBOOK_APP_ID'], ENV['FACEBOOK_APP_SECRET'], {
strategy_class: OmniAuth::Strategies::Facebook,
provider_ignores_state: true,
}
As pointed out in the threads above it's not a permanent solution since it can leave you open to csrf attacks.
One other thing to note is that Chrome has issues writing cookies to localhost. Try using lvh.me as your domain (it resolves to 127.0.0.1).
More code to patch the problem isn't usually a great path, but if neither of those solutions work then you can always create your own handler and parse the Facebook cookies:
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
Then you'll need to redirect to the 'handle_facebook_connect' method when you receive a connected response:
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();
}
});