Node Passport-facebook login in Facebook Page Tab application

Question

Node Passport-facebook login in Facebook Page Tab application

I'm developing a web application in NodeJS and AngularJS, that is a PageTab application to facebook.

For the login I'm using the library Passport-facebook.

My middleware is:

passport.authenticate('facebook', {
        display: 'popup',
        scope: ['read_stream', 'publish_actions', 'email', 'user_photos']
    })

The application works if i'm outside the tab of facebook, but when I try into facebook tab, I get an error:

[Error] Refused to display'Http....'in a frame because it set 'X-Frame-Options' to 'DENY'. (login, line 0)
[Error] SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

Because facebook permission dialog can't be launched from an iFrame

What can I do to fix, keeping the session management with passport strategy?

node.js
facebook
facebook-graph-api
passport.js
passport-facebook

Answer 1

At the end what I did:

When user is not logged in, instead of res.redirect("/auth/facebook"); I did res.render("authorize");
in the authorize.html page I have window.top.location = window.location + "auth/facebook";
an instead of Passport.authenticate("facebook", { successRedirect: "/", failureRedirect: "/login" } ) I did Passport.authenticate("facebook", { successRedirect: appHomePage, failureRedirect: appHomePage } ) with appHomePage set to the absolute URL of the facebook app (e.g. https://apps.facebook.com/8480657996/

Note that it is useful to use environment vars to aviod hard coding the app home page in your app