I am trying to do a JavaScript login from my iPhone 4 running Chrome for iOS version 26.0.1410.53 but I'm getting an error as seen below.
Here's the live URL to replicate on iPhone - http://mni.me/master
Click on "Get your own homepage like this"
Click on "Login with Facebook"
Here's my JavaScript
FB.getLoginStatus(function(r) {
if (r.status !== 'connected') {
FB.login(function (response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
} else {
console.log("User alredy connected with FB app. Checking if user is in DB");
var url = 'api/isUser.php?fid='+r.authResponse.userID;
isUser(url);
}
});
It's working fine on Chrome for Desktop, but I'm getting this error on iPhone...
What is the problem and how can I fix it?
It's been around since Chrome 19.
Check here https://developers.facebook.com/bugs/325086340912814/ for more details.
I'm not sure if there will be a workaround or fix soon.This issue was logged about 10 months ago.
https://code.google.com/p/chromium/issues/detail?id=136610
I've been struggling with this for awhile.
This may not be a perfect solution but I was able to get around this by getting the login url using the PHP SDK (https://developers.facebook.com/docs/reference/php/facebook-getLoginUrl/) and linking that to the Facebook button. It works on Chrome mobile.
I'm not sure if there's an equivalent to the getLoginUrl for the JS SDK.
Related
I'm creating a Login Function using Facebook's SDK. I'm re-using code from a previous project that had a Login button which redirected to a Login Box on the Facebook Domain (i.e. the Login box was not a popup, but redirected the user).
In the previous project when the user would come back to the site after accepting the app, there was a PHP script which created a $_Session:
$user = $facebook->getUser();
if (isset($user)){
$_SESSION['LoggedIn'] = $user;
}
I could then use the 'LoggedIn' session to check if the user was logged in or not, and modify the page based on that (e.g. replace content on the page).
Here's my question - I am now using the JS code that Facebook provides for a popup Login box. I'm guessing after the user Accepted the app from the Login Popup I need to start the session from within JavaScript? The problem is I can't figure out how....
$(".facebookButton").click(function(){
FB.login(function(response) {
if (response.authResponse) {
//User accepted the app -I need to start the SESSION here?
} else {
//User hasn't accepted the app.
}
});
});
Basically what I'm trying to achieve is for the site to know whether the user is logged in or not, even after they've refreshed the page. Thanks for the help!
When the user logs in using the JavaScript SDK, a cookie is immediately dropped on your site with their auth details. The dropped cookie can also be ready by the PHP SDK so all you need to really do is refresh the page for the PHP SDK to detect the user:
$(".facebookButton").click(function(){
FB.login(function(response) {
if (response.authResponse) {
// reload page
location.reload();
} else {
// User hasn't accepted the app.
}
});
});
I created an Android App with PhoneGap:Build and the FB Connect Plugin. The app works fine and the FB Plugin, too. Just one tiny thing isn't working yet. I won't to post something after submiting a button which works, too. At the first time the user has to login and grant permissions to the FB App and them the post is published. That's the way it should be. And the next time the user submits the post should be published without the whole permission thing but this isn't working!? FB shows a message like "You already granted permission ... to the app." and the user has to push the Ok-button before the post is published???
Because I still haven't found an answer for my question, maybe I just do something wrong in my FB Javascript call? Here is the current code:
FB.login(function(response) {
if (response.authResponse) {
var data = {
...
}
FB.api('/me/feed', 'post', data, function(response) {
// Callback
if (!response || response.error) {
// ERROR
}
});
} else {
// ERROR
}
}, {scope: 'publish_stream'});
Well, to better understanding here a picture of the screen that apears every post:
http://i.stack.imgur.com/bZrde.png
Thx,
Daniel
I think the solution to this problem is to not include the login request every time you want to post something. You can check login status, and/or permissions, without performing a login. Then, if the user is not logged in, do the login first, and come back to the new post action.
I've been building out a social gifting platform, and have had an application running for a few months now at: http://egift.me/promos/venue/facebookconnect
There is a simple user flow for the app. Click the Login/Connect facebook button, login &/or authorize the application, and you're redirected to a 'thank you/confirmation' style page.
If I step through this on a standard browser, I have no problems. If I step through this on mobile, I ultimately get the lovely "The page you requested was not found" page.
I don't have a Mobile Web url configured, I'm simply using Website with Facebook Login. Even when I have tried adding a mobile web url (it's the same base URL, I'm using View Switching to serve up a desktop vs mobile optimized view), I get the same issue.
Anyone have any idea what's going on? Is there any additional information I can provide?
[UPDATE]
This works (be sure to change your scope):
//instead of onClick could just as easily use something like jQuery event binding
<button onClick="loginUser();">Login</button>
<script type="text/javascript">
function loginUser() {
FB.login(function (response) { }, { scope: 'YOUR_SCOPE_HERE' });
}
FB.getLoginStatus(function (response) {
FB.Event.subscribe('auth.authResponseChange', handleResponse);
});
handleResponse = function (response) {
document.body.className = response.authResponse ? 'connected' : 'not_connected';
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
} else if (response.status === 'not_authorized') {
// the user is logged in to FB, but has not yet authenticated your app
} else {
// the user is not logged in to FB
}
};
</script>
For mobile web apps, I'd recommend to use FB.login via the SDK itself rather than through the use of the login button. If nothing else it gives you greater programmatic control of the user flow & experience.
The canonical "simplest ever social app" snippet is:
FB.login(function(response) {
if (response.authResponse) {
console.log('Fetching user info');
FB.api('/me', function(response) {
console.log('Hello ' + response.name + '!');
});
} else {
console.log('User cancelled login or did not fully authorize');
}
});
Also you're including the JS SDK for the plugin anyway, so there's no payload overhead. More details on FB.login here: https://developers.facebook.com/docs/reference/javascript/FB.login/
For our mobile web application using the Facebook Javascript SDK, we want to check the user's login status, and then display the Facebook login dialog if necessary. The following code is run within a click handler for a given button in our web app:
$('#button').click(function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// do something with the logged in and authorized user
} else if (response.status === 'not authorized') {
// logged in but has not authorized our app
} else {
// not logged in
FB.login();
}
});
});
Ensuring that the user is not logged into Facebook, this works fine and displays the login dialog for desktop web browsers when the button is pressed, but not for the mobile web (at least not for Android on a variety of browsers, I don't have access to an iPhone currently). Nothing appears on the mobile web app, and when I disable the popup blocker, then I get a prompt asking if I want to allow this popup, which works.
Does anyone know why the behavior is different and/or what the known/standard workarounds are? Thanks!
Your code will not work in all desktop browsers. Some browsers (mobile and desktop) block popups unless they are initiated by a user click. For example,
$('#mybutton').click(function() {
FB.login();
});
will work because the FB.login() function is only being called in response to the user's click. So to fix your code, replace the FB.login() call with some code that displays a 'login' button and text encouraging the user to click that button.
I am creating a mobile web app, and the friend request dialog works perfectly for me. But when my friend tries to do the app request, the dialog page starts, but gets stuck on loading and never works. Updated info - This only happens on mobile - tested the iphone and safari (with iphone user agent)...when tested in a website browser it works good for my friend.
Here is the code I used, and I am not getting any errors - it just hangs:
function sendRequest() {
FB.ui({
method: 'apprequests',
message: 'invites you to share real-time availability',
},
function(response) {
console.log('sendRequest response: ', response);
});
}
Has anyone else seen this issue? Appreciate any help!
Thanks,
Renee
From the above code, it appears you're missing the init(), login(), getLoginStatus() calls for the second user. It works with you because you may have already granted access to your app.
See:
https://developers.facebook.com/docs/reference/javascript/
and
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/