Question

I have a web site already integrated with Facebook login, using server-side authentication.

I have an issue to turn it into an application running under Facebook.

The problem is that Facebook does not show the authentication page at all

Therefore, I am not even getting to the server authentication process for real.

Right now, the application is running on my local machine.

My app is defined as Facebook Application: (adding blank before localhost for site security purpose only)

• Canvas URL: http ://localhost:4300/fbopt/
• Secure canvas URL: https ://localhost:4303/fbopt/”

[same problem happens when running in a Sandbox, without Secure URL]

I have a “fan page” with “Go to App” button there.
Pressing a button leads me to the URL:
https://apps.facebook.com/%5Bappid%5D/?fb_source=timeline

The browser starts loading the page with the frames.
The lower frames makes the POST request to the URL I provided.

My application redirects the page to the following URL:

https://www.facebook.com/dialog/oauth?client_id=%5Bappid%5D&redirect_uri=https://localhost:4303/fbopt/hook&scope=email,user_location,user_birthday

I would expect Facebook to show up the application authentication form, with the permissions required.

Unfortunately, this does not happen. An empty page is shown within the frame, HTML is empty!

I see (from the Chrome network debugger) that the URL is indeed accessed, but the response is with HTTP 200 status (not error), but no response data. Instead, getting

X-Frame-Options: DENY

response header – rendering denied within frame! Why?

When loading the URL above “manually” outside the Facebook frames structure, I do get the authentication screen with the right permissions.

I wonder what is missing to get it work with canvas.

Any hint on what I should add, or how to debug such a problem – will be appreciated.

Thanks ,
Max

Answer 1

Looks like me fundamental problem was that I was trying to redirect the whole page, instead of making a frame redirection.

Started here:
Blank Canvas => 'Refused to display document because display forbidden by X-Frame-Options.'

Went here:
https://developers.facebook.com/docs/howtos/login/login-for-canvas/

It says:

Because your application is being loaded in an iframe, returning a 302 to redirect the user to the Login Dialog will be unsuccessful. Instead you must redirect by setting the Javascript window.top.location property, which causes the parent window to redirect to the Login Dialog URL

This was probably my major mistake.

Max