I am building a mobile site where a user has to be able to login with his facebook account as described on http://developers.facebook.com/docs/guides/mobile/web/. It works on Iphone and Android devices but on Windows Phone it does not. This is what happens:
When I press the login button I get the facebook page where I have to give permission to use my facebook account.
After I give promission, it redirects to "https://www.facebook.com/dialog/permissions.request" and a blank page is shown. On Android the "window.FB.login" callback is called (see code below) where I can get the info and redirect the user but on Windows Phone it only shows that blank page. When I go to my facebook page, my site is registered in the app list. So the registration did work correctly.
The same thing happens when I try to login on the example page: http://www.facebookmobileweb.com/hello/.
Does anyone know how to make it work on Windows Phone? And is it even possilble? Because I found a lot of sites where this happens.
This is my code: (Once again this works on Android and Iphone devices).
var fbApi = {
init: function () {
$.getScript(document.location.protocol + '//connect.facebook.net/en_US/all.js', function () {
if (window.FB) {
window.FB.init({
appId: MY_APP_ID,
status: true,
cookie: true,
xfbml: false,
oauth: true,
});
}
});
},
login: function () {
/// <summary>
/// Login facebook button clicked
/// </summary>
log("login facebook button clicked");
if (window.FB) {
//Windows phone does not enter this method, Android and Iphone do
window.FB.login(function (response) {
if (response.status) {
log('it means the user has allowed to communicate with facebook');
fbAccessToken = response.authResponse.accessToken;
window.FB.api('/me', function (response) {
//get information of the facebook user.
loginService.subscribeSocialUser(response.id, response.first_name, response.last_name, fbAccessToken, "", "FaceBook", fbSucces, fbFail);
});
} else {
log('User cancelled login or did not fully authorize.');
}
},
{ scope: 'email'
});
}
}
};
I did it in an other way as described here: http://developers.facebook.com/docs/authentication/
Related
facebook: ~5.0.1andexpo: 33.0.0`
onFacebookSignIn = async () => {
try {
const {
type,
token,
} = await Facebook.logInWithReadPermissionsAsync(facbookAppId, {
permissions: ['public_profile', 'email'],
browser: 'browser'
});
if (type === 'success') {
const response = await fetch(`https://graph.facebook.com/me?access_token=${token}`);
Alert.alert('Logged in!', `Hi ${(await response.json()).name}!`);
} else {
console.log('cancel');
}
} catch ({ message }) {
alert(`Facebook Login Error: ${message}`);
}
}
**on click of a button it opens facebook login page login via my email and password works fine but in case of login via install facebook app, it takes me to next allow page but than next page show blank:(
i have spent couple of days on this on and off, thankyou.
screen**
Since Facebook actually opens and you are prompt with the login page then it is most probably that you make a mistake setting up your Facebook app on your Facebook developer account.
Follow this to set your Facebook app correctly
Make sure to set host.exp.Exponent for your app field iOS Bundle ID
Make sure to set rRW++LUjmZZ+58EbN5DVhGAnkX4= for your app field Android key hash
Please follow this since you are using expo SDK 33
FB.Login Popup Dialog http://s17.postimg.org/47zhfnt0d/8_1_2014_6_33_34_PM.jpg
FB.Login has 3 clickable buttons:
Cancel
Okay
"Close" button on top right(close popup window)
When user click both Cancel & Okay button, call back is triggered with authResponse which allows me to process whether the user authorize the app.
But if user click "Close" to close the popup, I receive authResponse only once. The second time user close FB.Login dialog pop up, callback function is not triggered.
Here's my code:
FB.login(facebook_login, { scope: 'email, publish_actions, user_birthday' });
function facebook_login(response) {
console.log('facebook_login'); //update
console.log(response); //update
if (response.status === 'connected') {
console.log('connected');
}
else if (response.status === 'not_authorized') {
FB.login(facebook_login, { scope: 'email, publish_actions, user_birthday' });
}
else {
// the user isn't logged in to Facebook.
FB.login(facebook_login, { scope: 'email, publish_actions, user_birthday' });
}
}
I intend to prompt user 3 times to authorize the app.
### Update ###
I actually records every response my callback function received. See above update, but closing the dialog popup only return response once, with "status = not_authorized".
Clicking Cancel will have the same status returned, but login popup will show again.
My Console Log:
(source: imghost.us)
Sorry to say it, but you shouldn't try to re do the auth if the user has cancelled - if you try to call FB.login again in the callback to FB.login then the user's pop up blocker will trigger and the dialog will fail. In Chrome, for example, they will see something like this:
Instead, you should display a message to the user telling them why they need to authenticate and with a button or link below for them to try again if they change their mind.
If you are calling FB.login in the callback, this is an asynchronous event and most browsers prevent popups from appearing in this type of situation. From the Facebook FB.login docs:
Calling FB.login results in the JS SDK attempting to open a popup
window. As such, this method should only be called after a user click
event, otherwise the popup window will be blocked by most browsers.
when you click on close button, you will get reponse.status='unknown'. so you will have to check this in your code. Use this code
FB.login(facebook_login, { scope: 'email, publish_actions, user_birthday' });
function facebook_login(response) {
if (response.status === 'connected') {
console.log('connected');
}
else if (response.status === 'not_authorized' || response.status=='unknown') {
FB.login(facebook_login, { scope: 'email, publish_actions, user_birthday' });
}
else {
// the user isn't logged in to Facebook.
FB.login(facebook_login, { scope: 'email, publish_actions, user_birthday' });
}
}
Note You should have to allow popup, because popup blocker of browser will not allow this. So please check this also.
This issue could occur ONLY IF the app is opened by browsing the app URL. If viewing the app in Facebook (eg: Clicking app links on the left sidebar in Facebook home page) the FB.Login popup dialog won't even have a "Close" button.
Furthermore, re-prompt authorization after user click Cancel is not allowed if the app is running in Facebook. User will be redirected to a help page as shown below if the app attempt to ask for authorization again after user clicked Cancel.
Something similar To achieve this
Prompt user to authorize the app only ONCE, then redirect them back to the fan page, or show user a message saying something like "Please authorize the app to continue." with a re-prompt button.
function facebook_login(response) {
console.log('facebook_login'); //update
console.log(response); //update
if (response.status === 'connected') {
console.log('connected');
}
else {
var dialog = $('<div>').attr({'class':'login-prompt', 'style':'text-align:center'});
var dialog_content = 'Please authorize the app to continue.<br/><input type="button" onclick="$(\'.login-prompt\').dialog(\'close\');FB.login(facebook_login, { scope: \'email, publish_actions, user_birthday\' });" value="OK" />'
dialog.html(dialog_content);
dialog.appendTo('.contentwrapper');
//initialize and show dialog
$('.login-prompt').dialog({ modal: true }).dialog('open');
}
}
So user will see something like below after they click Cancel
(source: imghost.us)
Note: This approach of re-prompt authorization also only allowed twice if app is opened in Facebook.
I have tried basic steps of Firebase Facebook authentication. So in my app the user can successfully log in using Firebase Facebook authentication. But I have a problem in logout.
I used logout button and bind click event on that, as shown below:
$(function(){
$('#lgout').click(function(){
auth.logout();
});
});
For login I use this code:
var chatRef = new Firebase('https://my-firebase-url');
var auth = new FirebaseSimpleLogin(chatRef, function(error, user) {
if (error) {
// an error occurred while attempting login
alert("please login first");
} else if (user) {
// user authenticated with Firebase
//alert('User ID: ' + user.id + ', Provider: ' + user.provider);
$.ajax({
type: "GET",
url: "https://graph.facebook.com/"+user.id,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$('#user').text("Welcome "+data.name);
}
});
} else {
// user is logged out
//auth.login('facebook');
}
});
auth.login('facebook');
In login also, I got one problem as you can see in else part I used auth.login('facebook'); that is not working showing error
auth is not defined. But if I used outside of else then it working fine.
Please help me to figure out this problem.
Separate from the issue regarding auth.logout(), you should never call auth.login('facebook'); from within this callback. Rather, it should be called after a user click event, as your browser will prevent the Facebook pop-up from launching.
From https://www.firebase.com/docs/security/simple-login-overview.html:
Third-party authentication methods use a browser pop-up window to
prompt the user to sign-in, approve the application, and return the
user's data to the requesting application. Most modern browsers will
block the opening of this pop-up window unless it was invoked by
direct user action.
For that reason, we recommend that you only invoke the "login()"
method for third-party authentication methods upon user click.
I have an app in a page tab that uses the facebook javascript sdk. When a new user comes to the app, I get the expected "Log in with facebook" pop-up. I also have some extended permissions that I've put in the scope parameter of FB.Login. After the users logs in with facebook I see the expected extended permissions pop-up. The only problem is if the user skips the extended permissions, the dialogue returns back an access_token, but it's not valid for the extended permissions. Code example below.
window.fbAsyncInit = function () {
FB.Canvas.setAutoGrow();
FB.init({
appId: facebookAppId,
status: true, // check login status
});
function updateFBInfo(response) {
console.log('updateResp:');
if (response.authResponse) {
//user is already logged in and connected
FB.api('/me', function (info) {
displayUserInfo(info, response);
});
}
else {
FB.login(function (loginResponse) {
if (loginResponse.authResponse) {
FB.api('/me', function (info) {
displayUserInfo(info, loginResponse);
});
}
}, { scope: 'email,manage_pages,offline_access,publish_stream' });
}
}
FB.getLoginStatus(updateFBInfo);
};
I guess my question is either, what am I missing (this has got to be something easy), or is there a way to check and see if the returned acces_token is actually valid?
You need to check explicitly for the permission before proceeding. If they haven't provided the necessarily permissions, you need to display FB.login() with the necessary scope again.
Here is the code for checking permissions:
FB.api('/me/permissions', function (response) {
var perms = response.data[0];
// Check for publish_stream permission in this case....
if (perms.publish_stream) {
// User has permission
} else {
// User DOESN'T have permission. Perhaps ask for them again with FB.login?
}
} );
edit: explanation:
When Facebook login button should appear and when not? On facebook tutorial page it is not accurately explained. There is written: "If the user is already logged in, no login button is shown". But for me, it is true only when user is logged in both in facebook profile and my facebook application connected to my website! It is not true, that button is removed when you are logged in just on facebook profile, as it is mentioned on the facebook tutorial. Am I right? –
could anybodey help?
thanks
tomas
//old message
I have Facebook login button on my website. Sometime visitors are logged in facebook byt are not logged into my website (my application on fb). In this case, Login buton is displayed but does nothing. As I know, Login button should not only log in facebook but also login to my application.
It works OK when user is logged out both from facebook and application (website) before clicked. But what if user is logged in just to facebook? Then my button does nothing.
You can render a button for connect session and another for those with out session.
Sample Usage: Using getLoginStatus() to determane if user is connected to app, and XFBML.parse to render the button. https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
I opted out of using channelURL but you can create your own and read about here. https://developers.facebook.com/docs/reference/javascript/
if user is connected and logged in, logout button appears.
if user is not connect but logged into facebook login button appears.
if no session or login login button appears.
Async JavaScript SDK
<div id="fb-root"></div>
<!-- build1 is where we render our button based on connected status. -->
<div id="build1"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YourAppId',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
//channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
if (window!=window.top) {
FB.Canvas.setAutoResize();
}
FB.getLoginStatus(function(response) {
if (response.authResponse) {
// logged in and connected user, someone you know
// render button
Cbuild1 = document.getElementById('build1');
Cbuild1.innerHTML = "";
Cbuild1.innerHTML = "<fb:login-button autologoutlink=\"true\"></fb:login-button>";
FB.XFBML.parse(Cbuild1);
} else {
// no user session available, someone you dont know
// render button
Cbuild1 = document.getElementById('build1');
Cbuild1.innerHTML = "";
Cbuild1.innerHTML = "<fb:login-button></fb:login-button>";
FB.XFBML.parse(Cbuild1);
}
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
functionality of loginStatus tested here https://shawnsspace.com/fb.test.connect.loginbutton.php
I have the same problem. I tried Shawn E Carter 's solution and still no improvements.
But i observed the new parameter for oauth in the FB.init call. If i set it on true it works as expected.