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'} );
Related
I started using a custom facebook login button by calling FB.login and it works ok when tested it with a browser already logged into facebook (it asks for the permissions) except that the popup does not close after its work is done, I end up with a blank popup with this url https://www.facebook.com/dialog/oauth/extended
This is happening on firefox and chrome, didn't try others yet.
When tested with a browser not already logged into facebook I get the same sort of problem after the sign in page - blank popup and no prompts for permissions.
Is there an event I have to catch that the SDK would catch for me if I did not use a custom button?
Is there a good guide to using a custom button for facebook login or is it not allowed? I'm guessin the lack of the usual facebook elements ( fb:login-button... div class="fb-login-button") on my page are throwing off the SDK. Do I need to skip the SDK just to have a custom button?
Thanks.
ok, sorry. I was looking deep into facebook apis when the problem was that in my button's onclick I forgot to return false, so the button click reloaded the page and that broke stuff I guess by invalidating various facebook api internal references. Just changing onclick function to return false fixed my problem. see code for new line:
$("#linkfacebook").click(function() {
FB.login(function(response) {}, {scope: 'publish_stream,manage_pages'});
return false; // this is the new line that fixed the problem
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
blank white screen after FB login via web app?
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!
This should work:
function loginUser(){
FB.login(function(response) { }, {scope:'email', redirect_uri:'http://your-redirect-url'});
}
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 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
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.