When I ask for user authentication of my app, I use this dialog:
FB.login(function(response)
{
if (response.authResponse)
{ ...}
else
{...}
},
{scope: 'publish_stream' });
My question is if the dialog is supposed to ask the user to login first and then ask for app authorization? Can i make the authorizarion dialog not to ask for login first? Since the user is already logged in to facebook?
If the user has already logged in, FB will handle it and directly show the auth dialog instead of the login dialog
Related
I have a FB app which need to be integrated in a FB page tab. In app I want to provide a "Signup with FB login" option. This button when clicked should prompt the user to login into FB login dialog. On successful login it should prompt the user to authenticate and allow the app to use his details. Once the user allows the app to access the user details it should then post the details to my website in a new window.
This process works fine when I test the app independently. However when I add the app to the fb page, chrome blocks the Fb login dialog. Before opening the Fb login dialog I check if the user is already logged in FB and has accepted the app. For that I use FB.getLoginStatus(checkLoginStatus); I figured due to this check the context moves to script execution and hence Chrome blocks the login dialog.
Is there a work around for this issue? Help would be highly appreciated.
My code is as follows:
The facebook button is created using span and the id fbc-login-button is given to an a tag.
$("#fbc-login-button").click(function(){
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
if (response.authResponse) {
fbAppSignup(response);
}
}
else {
FB.login(function(response) {
if (response.authResponse) {
fbAppSignup(response);
}
},{scope: "email, user_friends",display:"popup"});
}
});
function fbAppSignup(response,myPopup){
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
FB.api("/me", function(response) {
$("#social_media_data").val(JSON.stringify(response));
$("#medium").val("facebook");
$("#accessToken").val(accessToken);
$("#socialClickSource").val("fbapp_facebook_signup");
$("#fbSignUp").submit();
return true;
});
}
The example in the Facebook docs is a bit misleading, you should never use FB.login in an asynchronous callback function - and that is exactly what you are doing right now, because FB.getLoginStatus is asynchronous. Always call FB.login on user interaction (mouse click) or it will get blocked by intelligent browsers.
FB.getLoginStatus: on page load, for refreshing the user session and
checking if the user is authorized already
FB.login: on user interaction
Other threads i´ve answered about that problem:
Facebook login popup blocked
FB.api response callback async popup blocked
Sign In with FB issue: FB popup window with the Login dialog is blocked by a web browser
I want to get the user name and creds from a Facebook user so he can authenticate as a user against my application. Right now, getLoginUrl returns a site at Facebook, which works. How do I avoid the user jumping from my site to Facebook? Can I show a custom form to get the username and password and send that to FB directly?
You have to use the FB.login function from the Javascript API for this,
function fbAuth() {
FB.login(function(response) {
if (response.authResponse) {
alert('User fully authorize the app.');
} else {
alert('User canceled login or did not fully authorize the app.');
}
}, { scope: 'email,friend_likes' });
}
then you can call it with an onclick event or any other method you want:
Login
Documentation: https://developers.facebook.com/docs/reference/javascript/FB.login/
I am trying to figure if there is any way to notify the parent page when user either closes or clicks on cancel button on Facebook permissions window during oauth flow. Its the window where user authorizes an app. The window with url: https://www.facebook.com/dialog/oauth?api_key=..... and with "Login with Facebook" and "Cancel" buttons. What I am trying to accomplish is-- If user cancels or closes the oauth permissions window, I would like to open Facebook simple sharing window where they can post status without authorizing the app.
I am using JS SDK for Facebook connect.
This code is taken from the documentation for the FB.login method:
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
As you can see, the if (response.authResponse) part checks rather the login process was finished successfully, that is, the user allowed the application and he is logged in to facebook.
If the user clicked "cancel" or closed the popup then there won't a authResponse parameter in the response.
Observe the url as user cancel the authorization the oauth url changes, it will now contain number of fields to describe user action
YOUR_REDIRECT_URI?
error_reason=user_denied
&error=access_denied
&error_description=The+user+denied+your+request.
&state=YOUR_STATE_VALUE
This will be the value after user cancel the authentication
error_reason=user_denied
&error=access_denied
&error_description=The user denied your request
After user cancel's the authentication dialog page will be redirected to the parent page where you can check these error parameters.
I've an application that only asks for "user_about_me". Now I want to ask for new permission (publish_stream) but the response object returns "connected" if the user ignores the new permission. Because I want to post to the user's wall I'll get an error when posting to the user's wall "The user hasn't authorized the application to perform this action".
How can I do this?
I'm using Javascript SDK.
Basically you have to handle all the possibilities for user permissions/authorization when a user logs in. Here is a simplified working example from some FB integration I have done:
FB.Event.subscribe('auth.login', function(response) {
if(response.status === 'connected'){
FB.api('/me/permissions', function(resp) {
if(resp.data[0].publish_stream){
//User has permissions and authorization
}
else{
//User has not enabled publish stream, ask them to enable permission
}
}
}
If they have the permissions, I show them their avatar/username and some other options. If not, I present a link that asks them for the required permissions when clicked.
I used the old rest api for showing the Permission Dialog in Facebook before.
Now, with the new graph API, what can I do? (I'm in IFrame Apps).
I know that I can cheat and popup the permission in a seperate window:
FB.login(function(response) {
if (response.session) {
if (response.perms) {
// user is logged in and granted some permissions.
// perms is a comma separated list of granted permissions
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
}, {perms:'offline_access'});
like that.. call the FB.login again (let say I want people to click on a different button and trigger the extended permisison dialog)
However,it looks ugly,and it doesn't look like a dialog.
Is there a way to generate the dialog? I try to figure out whether FB.ui can help but there is only little information about that.
In addition, I don't think the 'response' callback ever execute. Neither I click "Don't allow" or "allow", won't trigger any call back. any idea?
hihih..anyone can help me?
Finally. find out the solution from another website.
first. after FB.init( ... ); do that:
FB.provide("UIServer.Methods",
{ 'permissions.request' : { size : {width: 575, height: 300},
url: 'connect/uiserver.php',
transform : FB.UIServer.genericTransform }
} );
Then, whenever you need to call the permssion dialog, do that:
FB.ui({method: "permissions.request", "perms": 'email,offline_access'},
callBack);
It took me so long to figure out by looking at the FB object and find out there is UIServer with permissions.request then from that, I keep searching and find this solution. and FB.ui talks nothing about it.. and FB.provide is not documented. THANKS facebook.
You don't need to use javascript or any SDK for this although it would make it easier. You need only to redirect the user to a url like this:
https://graph.facebook.com/oauth/authorize?
client_id=...&
redirect_uri=http://www.example.com/callback&
scope=user_photos,user_videos,publish_stream
You should always redirect the user to the top window either with javascript or the link.
window.top.location = <login_url> or Login
If you are using the PHP SDK or the C# SDK you could have the sdk generate the url for you, but the process is the same.
Also, not that the redirect_uri has to be on the same domain as your iFrame application's url. This will cause Facebook to redirect your user outside of Facebook to your website, you then should redirect the user back to the app inside of facebook. For example:
User clicks login
user goes to Facebook login page
User clicks allow
Facebook redirects the user to http://www.example.com/callback
Your app redirects the user to http://apps.facebook.com/myapp/loggedin
One of the answers suggests a hack in which you call FB.provide() and then FB.ui() to pop up the extended permissions dialog. That solution doesn't work for me, but there is a documented solution now that does. Just call FB.login() to get the permissions you need.
FB.login(function(response){
if (response.authResponse) {
alert('success!');
} else {
alert('fail!');
}
},{scope: 'email'});
Even better, you can ask for extended permissions with the login button.