I have a mobile web site built using jQuery Mobile. I often run it in full screen/mobile web app mode on my iPhone (I have added the web app to my iPhone home screen).
On one of the pages, the user is required to log in to Facebook using the Facebook Connect JavaScript API. If the user is not already logged in, this is done by clicking a login button. The event handler for this button looks like this:
("#fbLogin").click(function () {
FB.login(handleStatusChange(response),
{ scope: "publish_stream",
connect_display: "touch" });
});
In the above code I have inserted some line breaks for better readability, but the values are like in the example. The callback function (handleStatusChange) takes care of the response from the login request.
When I click this, the Facebook login page is opened in my web app window. If I haven't already accepted the Facebook App, I have to give it permissions as well. All this seems to work fine. But after I have given permissions/logged in I'm left hanging on a totally blank screen.
I have also tried another approach to logging in, by putting this inside the login button event handler:
window.location = "https://www.facebook.com/login.php
?api_key=MY_API_KEY
&cancel_url=http%3A%2F%2Fwww.mywebsiteurl.com%3A8081
&fbconnect=1
&next=http%3A%2F%2Fwww.mywebsiteurl.com%3A8081
&return_session=1
&session_version=3
&v=1.0
&req_perms=publish_stream
&connect_display=touch";
Again, line breaks have been inserted for better readability. When used it's just one long string.
The URL used in the cancel_url and next parameters is the one I have registered with the Facebook Application. If I try using a different URL (like http://www.google.com) I get an error so the this seems to be correct. As you can see I use a different port on my development server (port 8081). Could this be a problem?
The result is similar to the previous example. I get the login/permissions pages but I'm left with a blank screen after everything is done. I tried this after reading this post on the old Facebook Developer forum.
If I, on the other hand, try running this in Safari (not as a full page iPhone web app) the login works great.
Is there anything else I can try? Does anyone have a JavaScript API Facebook Connect login working while running in full screen/web app mode on an iPhone?
Thanks in advance!
Not sure if this helps you, but I found that adding the iOS Safari link fix, also allowed Facebook login to work in my fullscreen web app without opening up the page i "regular" Safari:
// Make links work in iOS fullscreen web app
function disableSafariLinks() {
$("a").click(function (event) {
event.preventDefault();
window.location = $(this).attr("href");
});
}
See also iPhone Safari Web App opens links in new window
Related
I have a site, which works both as a standalone and as embedded into Facebook. Generally it works ok, but I want a content on some of its pages vary depending on is it embedded or not. I mean is it browsed via Facebook right now. How can I do this?
Using a server-side language, you could see if there is a signed_request POST parameter passed to your app on the initial load into the iframe (if so, you’re most likely inside facebook.com with your page), and then save that info into your session, so that you still know where you are once the user starts navigation inside your app in the iframe.
If by 'embedded' you mean functioning as a Canvas App in Facebook, then how about a simple:
if (window.location.indexOf("facebook.com") !== -1){
//Not embedded
} else {
//Embedded in Facebook as a canvas app.
}
Would that do the trick for you?
I am building a web app that can open full-screen on iPhone and am following the code for Facebook mobile web, which can be found at: https://developers.facebook.com/docs/guides/mobile/web/
When I try to login using the Facebook login page, I get a blank white screen after I click the "login" button. The user IS logged in though.. I know this because if I close and reopen the web app, I check the login status and try to get some user info, and it works fine.
I have seen others with the same here: blank white screen after FB login via web app?
It seems that somebody has identified a workaround, but I cannot get it to work. The code I am using is:
function loginUser() {
FB.login(function(response) { }, {scope:'email'});
}
Others have indicated that I need to utilize the workaround here:
login({scope:'email', redirect_uri:'where_to_go_when_login_ends'})
Does anyone know how to merge these pieces of code to get it to work?
Thanks!
The problem lies in the fact that the login window normally opens as a pop-up window. However, in (iOS) web apps this is not properly supported for some reason.
By providing a normal link instead of FB's own login btn script, the login process stays within the same window (including the redirect process!)
I hope this helps anyone...
LOGIN!
Try this, it worked for me :
FB.login(function(response) {
//deal with response
}, {scope:'permissions', redirect_uri:'url to redirect to'} );
I am hosting a Facebook app on Google app engine, I need to make sure the user is logged into facebook before anything.
What I can currently do is display facebook's log in button using fbxml, but I prefer the user would be redirected to Facebook's log in page if he wasn't logged in, then back to my app's main page, this way I can make sure that the user is logged in before doing anything.
I am new to Facebook apps, I read here that I can redirect the user to
https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=YOUR_URL
in order to authenticate him. But using GAE's self.redirect(url) doesn't work, the page stays the same. I was hoping I could do something like this in my handler:
if u'signed_request' in self.request.POST:
facebook.load_signed_request(self.request.get('signed_request'))
if not facebook.user_id:
self.redirect("https://www.facebook.com/dialog/oauth?"+
"client_id={0}&redirect_uri={1}"
.format(FACEBOOK_APP_ID, EXTERNAL_HREF))
return
but as i said earlier this doesn't work.
I'm assuming by 'Facebook App' you mean a Canvas App - so something that will live at https://apps.facebook.com/YOUR_NAMESPACE from a user perspective?
If so, you'll need to add the redirect via Javascript using window.top, as your app is loaded in an iframe. See https://developers.facebook.com/docs/appsonfacebook/tutorial/ and search for 'top', then view the example toward the end of the page.
There are also good examples on the Php Sdk that facebook provides. I like the with_js_sdk.php example. It runs seamlessly and is good to follow.
https://github.com/facebook/php-sdk
http://developers.facebook.com/docs/reference/php/
I am working on web application with .net 3.5 using C# facebook SDK. Loading page inside Page Tab iframe with some information, and input button, on click of button i am doing auth.Authorize() with some permissions, FB Permission window opens fine, but once user click on allow button it is redirecting to application canvas page instead of Page tab.
Is there anything i am missing?
Regards
Imran
Answer is to set auth.ReturnUrlPath which will bring user back to selected tab in facebook page. If your application is being added to multiple pages, then you can find out current pageid from "signed request" and set correct ReturnUrlPath, and attach ?sk=app_YOUR_APP_ID as querystring to ReturnUrlPath so current tab will be selected. your return path will look something similar to : http://www.facebook.com/profile.php?id=YOUR_PAGE_ID&sk=app_YOUR_APP_ID (make sure you handle both http and https)
This worked for me, hopefully will work for someone too.
-Ims
Facebook C# SDK doesnt support tabs.
Only canvas apps are supported.
I am in the conversion process of facebook app from fbml to iframe.
Now i am testing using few iframe pages.
$user = $facebook->require_login();
It gives the current user logged in. Once it get the variable from the facebook.com it saves in cookie by the PHP API provided by facebook).
I logged out using another tab of facebook and i tryed using my app without refreshing the whole site (by just using the links inside my app). It still gives the $user variable.
It indicates that user has logged in instead of user logged out.
Please help me out. I want my app secured.
It looks my iframe app accessible when we select "open this frame in new window".
I need a solution for this too.
Thanks in advance.
You are logged in as far as you are logged in facebook. You will have to create custom PHP's session handling. However, if you want to remove the user from application's cookies, you can do this:
//this will clear cookies for your application and redirect them to a login prompt
$facebook->set_user(null, null);
$facebook->redirect($appcallbackurl);
You can use the JavaScript SDK to subscribe to the logout event via FB.Event.subscribe and reload the page if that happens:
FB.Event.subscribe('auth.logout', function(response) {
setTimeout('window.location.reload()', 0);
});
(Wrapping in setTimeout() is required as a work-around for Firefox.)
To prevent users from using "open this frame in new window," you can check if the page is loaded in an iframe with if(window == window.top) or if the signed_request is available. If not, redirect to the tab URL.