Facebook Canvas Authentication Redirect Issue with Omniauth-facebook (redirect outside iframe)

Question

I'm a newbie about Facebook authentication and stuck with the redirect issue. I implemented my app with Rails 3.2.6 and use omniauth-facebook 1.4.0 to integrate with Facebook. "Sing in with Facebook" on my website works, however, the canvas authentication doesn't work as expected.

EXPECTATION:

1. A user finds my web app on Facebook and accept the Login Dialog to start my app.
2. The user is redirected to my app on the canvas page in Facebook, not outside of the facebook canvas iframe.

ACTUAL RESULT:

User authentication works but then my app page is redirected outside the iframe.

Facebook application settings

Facebook application setting is as following. The canvas URL is set as "/auth/facebook/" to authenticate the user immediately. (I added space to avoid liking to invalid domain)

Website with Facebook Login Site URL: http: //localhost:3000/

Canvas URL: http: //localhost:3000/auth/facebook/

omniauth.rb

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :facebook, FB_APP_ID, FB_APP_SECRET, {:image_size => 'large', :iframe => true, :client_options => {:ssl => {:ca_file => Rails.root.join('lib/assets/cacert.pem').to_s}}}
end

sessions_controller.rb

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

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

Thanks in advance!

Answer 1

The easy way to fix this is to detect if the user is within a frame and then bounce them to Facebook if they are not. I do this in my Facebook Apps using the following JavaScript:

<script type="text/javascript">
if ( top === self ) {
    window.top.location = '{fb_canvas_url}';
}
</script>