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
});
Related
I'm trying to use a paper-button to trigger a Facebook login (via the paper-buttons on-tap function and the Facebook Javascript SDK).
However, the on-tap method must be throwing away the 'click event', which means Chrome's popup blocker jumps in and blocks the Facebook login popup. If the popup is triggered from a 'user event' the popup is allowed to proceed.
Any ideas for telling the browser that the popup has indeed come from a user event?
UPDATE:
It appears to work as intended if I use on-click.
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 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'm making a Facebook page app, and I need to get some extra permissions from my users, this prompts a pop up window which a lot of people have blocked, I remember seeing a lot of apps directing to a grant permission page with a callback url to handle this.
Is this depricted ? If not how can I use the embedded page rather the a pop up?
I'm sorry if this sounds like a lazy question, but it's been so long since I've been involved with Facebook and their API seems like a massive moving target, any tips would be greatly appreciated.
Thank you.
Try this little function in straight Javascript.
<script>
function addPermissions(permissions){
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:permissions});
}
</script>
<a onclick="addPermissions("email, publish_stream,...");">Click me</a>
If you don't pop the window at page load and do it in response to a link/button click the popup blocker shouldn't block it, aka the User actually requested the Pop to work. (I've had it working this way)
You can alternatively create the relevant authorisation URL and just send the user there.
Initially you send them there via dialog or redirect.
You can just send them there again requesting the additional permissions aka Scope.
Details:
https://developers.facebook.com/docs/authentication/
The URL for the dialog can either pop into a new window or redirect to it.
A new window normally pops from using the Javascript API.
I believe the popup method is deprecated. The standard method is to redirect to the facebook oauth dialog with a callback. There is an alternative popup method for iframe apps that isn't really a popup that would be blocked, it's more of an ajax popup.
The information you need as far as usage of the dialog I had mentioned is located at
http://developers.facebook.com/docs/reference/dialogs/oauth/
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.