After your get your response from getLoginStatus, is the idea to then call FB.login? Currently when I do that, the code stops.
Here's the code for when they hit the FB button to login, which correctly gives me the response...
function facebookConnectBtnLogin()
{
FB.getLoginStatus(function(response)
{
CL();
if (response.status === 'connected') {
logFacebookUserIn(response);
} else if (response.status === 'not_authorized') {
// alert('not_authorized...');
facebookLoginInit();
} else {
//alert('not logged into Facebook...');
facebookLoginInit();
}
},true);
}
And the code that deals with FB.login, which alerts 'here4', but not 'here5'...
function facebookLoginInit()
{
alert('here4');
FB.login
(
function(response)
{
alert('here5');
CL();
if(response.authResponse)
{
alert('here6'); logFacebookUserIn(response);
} else alert('not connected');
},
{ scope: "email" }
);
}
Do I have the right idea?
Thanks for your time and help.
You should never call FB.login in an asynchronous callback function, ONLY on direct user interaction (mouse click). Browsers block the FB.login popup if you don´t call it on user interaction.
With FB.getLoginStatus you just check if the user is authorized, if not: present a Login Button where the user can click to login. It´s not a good idea to show the login dialog right when the user enters your App anyway, tell him what the App is about first.
Related
Here is a function which is call when user click a button to attend a event on facebook, these following code get the login information from user and add there particular event to the user fb event to attending the event.
These code is giving me the syntax error, i does not Know what is the error. Please help its needy.
function gogingtoevent() {
FB.login(function(response) {
if (response.status == 'connected') {
FB.api('/816891388384961/attending',
function (response) {
if (response && !response.error) {
alert('Attending');
}else{
alert (JSON.stringify(response));
}
});
}else{
alert('Not Responding');
}
});
}
You need to do a POST request to this edge, and you need the rsvp_event permission.
It's all in the docs:
https://developers.facebook.com/docs/graph-api/reference/v2.3/event/attending#publish
https://developers.facebook.com/docs/facebook-login/permissions/v2.3#adding
I am using a Facebook app to authenticate my users, but if the user is not logged in to Facebook (I am checking it with FB.getLoginStatus()) I show him a button to log in with. The problem is that the pop-up gets blocked all the time. I have no idea why, since I am registering the Facebook log in action on ng-click.
<button type="button" ng-click="login()">Log in via Facebook</button>
...
$scope.login = function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
$scope.userId = response.authResponse.userID
loginSuccess()
} else
FB.login(function(response) {
if (response.authResponse) {
$scope.userId = response.authResponse.userID
loginSuccess()
} else {
alert('You need to log in and authorize the app, otherwise you won\'t be able to take the quiz!')
}
})
})
}
Any help?
FB.getLoginStatus should be used on page load to check if the user is authorized and to refresh the User Token. You can use it right after FB.init and store the User ID if he is logged in.
FB.login must be used directly on user interaction, you are using it in the asynchronous (!) callback function of FB.getLoginStatus and not directly when the user clicks on the button.
Example: http://www.devils-heaven.com/facebook-javascript-sdk-login/
Site could be found at http://trade.edicy.co/
Currently, it has the most basic implementation of the FB log-in button that automatically turns into a log out button after authentication. Now I want the background to change color once the user logs-in and revert back after the user logs-out.
Also is it possible to move the position and size of the Facebook picture far from the log-in button after log-in?
Thanks in advance.
You can capture the auth.statusChange event via the FB.Event.subscribe function of the JS SDK. See https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/#login-logout for a description. Additionally, you can have a look at https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
For example
var loginCallback= function(response) {
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
document.body.style.background = "red";
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
document.body.style.background = "green";
}
}
// In your onload handler add this call
FB.Event.subscribe('auth.statusChange', loginCallback);
I'm trying to use Facebook to log in an Ember application. The login action is working, but I can't find how to check if the user has already logged in when the app is initialized.
I'm calling the auth.authResponseChange event but it blocks the app and it never starts.
App.ApplicationController = Ember.Controller.extend({
fbUser: false,
init: function() {
this.checkFBUser()
},
checkFBUser: function() {
FB.Event.subscribe('auth.authResponseChange', function(response) {
// this is never triggered and the app does not init
console.log(response)
if (response.status === 'connected') {
console.log('Logged in')
}
else {
FB.login()
}
})
},
// this works
actions: {
loginFacebook: function() {
var self = this
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
self.set('fbUser', response)
})
}
})
}
}
})
How am I supposed to do this?
I haven't worked with FB lately, but I'm pretty sure the AuthResponeChange event is for being notified of a change in the AuthResponse status; in this instance you'll probably want to take a look at FB.getLoginStatus instead.
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
checkFBUser: function()
{
FB.getLoginStatus(function(response) {
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
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
I've found the source of the problem and a solution. I'm not sure this is the best solution so I'm open to other suggestions but if this can help other people, here is the thing:
The issue was that the Facebook library was not loaded yet, so the FB variable was undefined. For some reason if you try to do something with an undefined variable in Ember the app just won't work without even a warning. So the solution is to wait:
App.deferReadiness()
function checkFB() {
if (typeof FB !== 'undefined') {
APp.advanceReadiness()
}
else {
setTimeout(checkFB, 10);
}
}
setTimeout(checkFB, 10);
10 milliseconds is pretty short so the app is still initialized very quick, and in my tests the app starts after ~20 milliseconds. This still feels a bit hacky but in place of a better solution this will do for now.
As Aaron said you need to use fb.getLoginStatus to check if a user is already logged in. To make sure Facebook is loaded before you to make any calls you can use an initializer and defer the app until the SDK has loaded.
http://nerdyworm.com/blog/2013/04/03/ember-initializers/
Ember.Application.initializer({
name: 'init_fb',
initialize: function (container) {
window.App.deferReadiness();
Ember.$.getScript( '//connect.facebook.net/en_UK/all.js', function( ) {
FB.init( {
appId : 'xxxxxxxxxxxxx',
xfbml : true,
version : 'v2.0',
} );
window.App.advanceReadiness();
} );
}
});
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.