We're hosting a PHP facebook canvas application (http://apps.facebook.com/myapp). One of the pages (http://apps.facebook.com/myapp/foobar) requires authentication from facebook so we can access some information about the user. This is achieved by using the PHP-SDK's $facebook->getLoginUrl() method to generate the url for authentication and works as expected.
We have since added the app to as a Tab (iFrame) to our Page (http://www.facebook.com/MyPage?sk=app_nnnnn). Now when we try to authenticate the user they are redirected to the app's url (http://apps.facebook.com/myapp/foobar) rather than having the /foobar page load in the Tab's iFrame as expected.
Is it possible to set the auth so that it doesn't bounce to the app's url but stays within the Tab using the PHP-SDK? If so, what is the workflow I should follow to achieve this?
I would simply add code to http://apps.facebook.com/myapp/foobar to check for authentication, and if it is, echo:
<script type="text/javascript">
top.location.href = 'http://www.facebook.com/MyPage?sk=whatever';
</script>
That should break out of the iframe and redirect you to where you want to go.
The way I have achieved this is to do the following:
On the /myapp/foobar page I check to see whether the user has been authenticated. If they haven't I set a session value and use the PHP-SDK's $facebook->getLoginUrl() to generate the auth url and send a response back containing just the javascript to redirect window.top.
Once they've authenticated they're redirected back to the main page. When this page loads it checks for the session value and, if set, removes it and issues a redirect header to /myapp/foobar.
It's a little convoluted but seems to be quite a stable solution.
Related
I am working on an Ionic 6 app that uses Auth0 for authentication. We are using the embedded login strategy and auth0-js as the client library to talk with auth0.
I've reached to the point where everything works nice if I serve the app on an emulator via ionic serve. I can login and logout effortlessly, and authjs' logout method, which I'm calling as follows:
public logout() {
store.dispatch('endSession');
this.endSession();
this.webAuth.logout({
returnTo: process.env.VUE_APP_LOGOUT_CALLBACK,
clientID: clientId,
});
}
Does redirect me to http://localhost:3000/login as intended (that's the value of VUE_APP_LOGOUT_CALLBACK).
However, when I compile the app and launch it on a mobile phone (I'm using android studio) I have the following problem:
My current problem
After calling WebAuth.logout, the app stops and a browser tab pointing to localhost:3000/login tries to open as if it was a website I'm navigating to. But the behavior I want is for the app to return to the login page, of course.
Other users seem to have found the same issue:
https://community.auth0.com/t/logout-on-ionic-3/20222/9
https://community.auth0.com/t/impossible-to-redirect-user-after-logout-ionic-angular/82205
But no one really solved the issues in those threads. I had no luck finding more resources related to this.
What I've tried
I've tried changing the redirect route to capacitor://localhost/login, hoping it's a way to tell the ionic shell to navigate inside the context of the app, but it didn't work.
I've tried to avoid passing redirectTo as an option to WebAuth.logout(). This makes the method to redirect to the first URL set up on the Auth0 dashboard allowed logout URL, as far as I know.
I've played with a lot of different URL's as returnTo, like / or /login, but it didn't work as I expected and the browser always tries to open such URL as a new website, instead of navigating in the context of the running app.
What would be the ideal outcome
I'd like the app to return to /login, which is the first view the user encounters when they launch the app on the phone.
If that's not possible, maybe it would be possible to just get Auth0 to not redirect at all, so I can perform the redirect by myself and send the user back to the login page.
Maybe there's a way to tell my app not to ever redirect to the redirectUri, even if there's no way for auth0 to avoid trying to redirect the app to another page? Auth0-js docs don't suggest any way to avoid the redirect, but maybe there's a way via ionic config or javascript to make sure the app won't ever redirect to a certain URL.
Thanks for your time!
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/[appid]/?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=[appid]&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
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
Do you have iframe in your app? Sending X-Frame-Options with content DENY is Facebook's way to fight with clickjacking. More info:
http://darklaunch.com/2010/11/09/facebook-s-anti-clickjacking-techniques
adding an iframe to facebook does not work anymore since ~2 weeks
I've had the same issue. 302 Redirect works because I use a lot of those but you cannot redirect to a facebook domain for any reason. If you want you can do a top redirect via javascript. What I did is I created an html that accepts a url and it loads it in top.location then redirects back to apps.facebook.com. With X-frame most probably because you have a AntiForgeryToken (if using .net) because this would insert xframe sameorigin in the header. You can disable this with
AntiForgeryConfig.SuppressXFrameOptionsHeader = true;
I have a facebook page tab iframe and would like to access the browser url in order to get the current facebook page url.
I know it's not possible to use a javascript that interacts with the parent frame because of browser security issues.
An approach that didn't work for all browsers was to read the HTTP_REFERER header from the request.
Is there a better way?
I hope this is impossible at all. Otherwise it will be a security issue, likely to be closed.
You should not write code depending on compromising other users.
It is not possible to get URL of a parent Frame due to cross-domain policy. And there is no way to get the information about page your application running on in client-side.
But on the server-side you can reconstruct the Page URL using details passed in signed_request. For Page Tab Applications it contains page:
A JSON object containing the page id string, the liked boolean (set to true if the user has liked the page, false if not) and the admin boolean (set to true if the user is an admin of the page, false if they're not).
Using that page id you can build the Page URL:
http://www.facebook.com/pages/-/PAGE_ID
If you want the link to your Page Tab with your application use:
http://www.facebook.com/pages/-/PAGE_ID?v=app_APPLICATION_ID
Beware, HTTP_REFERRER is provided by client and cannot be trusted, and it's may be cut by plugin/proxy/etc...
Notes:
Pages may have different URL in real life, but using this technique user will be landing the correct Page since Facebook will issue redirect to correct URL of a Page.
Sample URLs use HTTP scheme, feel free to use HTTPS if you need it.
In PHP for example you can detect the current scheme like this:
$scheme = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS']!=="off") ||
(isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &&
$_SERVER['HTTP_X_FORWARDED_PROTO']=="https")
) ? 'https' : 'http';
HTTP_REFERRER might not work as expected in my experience. If the tab app is designed for a specific page (which I suppose it kind of should), have you tried recreating it?
https://www.facebook.com/MYPAGENAME/app_MYAPPID
Where MYPAGENAME is your page name and MYAPPID is the app id, of course.
If the tab is applied to multiple pages though, I'm quite sure you'll get the relevant data to apply the above from https://graph.facebook.com/PAGEID, where PAGEID is the ID of the page which you get from the signed request.
how to redirect between pages..for eg.if i click on login link then it should be redirect on login page..
If your question is about:
Generating a url for page associated to your application, then I recommend checking out the Url view-helper.
Displaying a url, then I recommend checking out view-scripts and layouts.
Redirecting to a url - say, from within a controller, after successful login - then I recommend checking out the Redirector action helper.
I'm not really sure I understand your question....
If you want to create a link on a page to a controller / action, for example if your login script was in the controller users and the action was called login, you could put a link in the view script of a page by using the baseUrl:
Login
what is the link between backbutton and continueToOriginalDestination(). method.
how to keep url saved for continueToOriginalDestination() method while clcking browsers back button.
continueToOriginalDestination() is used when a request was (temporarily) redirected to an intercepting page, for example a login page. When a user requests a secured page but is not yet authenticated, the security framework that hooks into wicket (auth-roles, shiro, swarm/wasp) will present the user with a login page, and store the original URL. When the user has authenticated, you can call continueToOriginalDestination and Wicket will process the original request, displaying the requested secured page.
Not only security frameworks can use this, you can do it yourself by throwing a RestartResponseAtInterceptPage exception.
The back button has nothing to do with this, nor does it have any affect on the processing of the original destination page. Wicket keeps storing the original destination until a new one is set, or until continueToOriginalDestination has been called.
continueToOriginalDestination returns true when there was a page to go to, and false when the user landed on the intercept page directly (e.g. guessing the login page URL or clicking on a link pointing to the login page).