Im having an issue where the Javascript SDK opens multiple dialogs to log in.
if i log in and then out it works fine, but the next time i log in it will open 2 popups. next time it will open 3 and so on.
The Page is using PHP, Javascript/Jquery
The code is a tweaked version of this tutorial
http://thinkdiff.net/facebook/new-javascript-sdk-oauth-2-0-based-fbconnect-tutorial/
Here is my Code:
<div id="fb-root"></div>
<script type="text/javascript">
var button;
window.fbAsyncInit = function() {
FB.init({ appId: '<?php echo $facebook->getAppID() ?>',
status: true,
cookie: false,
xfbml: true,
oauth: true});
function updateButton(response) {
if (response.authResponse) {
$('#loged').hide();
$('#logged').show();
//user is already logged in and connected
FB.api('/me', function(info) {
login(response, info);
});
$("#logged").click(function() {
FB.logout(function(response) {
logout(response);
});
});
} else {
//user is not connected to your app or logged out
$('#logged').hide();
$('#loged').show();
$("#loged").click(function() {
showLoader(true);
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(info) {
login(response, info);
});
} else {
//user cancelled login or did not grant authorization
showLoader(false);
}
}, {scope:'email,user_likes'});
})
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
(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);
}());
function login(response, info){
if (response.authResponse) {
$('#loged').hide();
$('#logged').show();
showLoader(false);
}
}
function logout(response){
showLoader(false);
}
//shows ajax loader
function showLoader(status){
if (status)
document.getElementById('loader').style.display = 'block';
else
document.getElementById('loader').style.display = 'none';
}
</script>
<img id="loged" src="img/in.png"/>
<img id="logged" hidden="hidden" src="img/out.png"/>
<div id="loader" style="display:none">
<img src="img/ajax-loader.gif" alt="loading" />
</div>
<br />
<div id="user-info"></div>
<br />
<div id="debug"></div>
if i log in and then out it works fine, but the next time i log in it will open 2 popups. next time it will open 3 and so on.
Are you staying on the same page – without reloading it in between?
That would explain what you’re describing, because then every time your function updateButton is called and goes into the else branch, it will add a new additional click event handler to #loged, so they would start “accumulating”, and therefor FB.login will be called multiple times – because each single click will trigger multiple handlers (that all do the same stuff).
Related
i'm new on Javscript SDK, still learning and trying to create a mobile web application and all what i'm trying to do is check for the user logged in status. If the user is not logged in or not authorize the app show the standard normal login button with no extra permissions. But when i test it, if i don't login and opens the web application page, before clicking the login button a login dialog automatically popups two/three times. After i cancel or close the dialog, when i click the Login button, nothing happens. I'm testing from desktop computer using mozilla user-agent trick. I will be very thankful if someone can review my code and guide me to the right direction. Thanks.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'app_id', status: true, cookie: true, xfbml: true});
FB.getLoginStatus(fbLoginStatus);
FB.Event.subscribe('auth.statusChange', fbLoginStatus);
};
(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>
<script>
function fbLoginStatus(response) {
if (response && response.status === 'connected') {
document.getElementById('loginButton').style.display = 'none';
greetUser();
} else {
showLoginButton();
}
}
function authUser() {
FB.login(fbLoginStatus);
}
function showLoginButton() {
document.getElementById('logbutton').innerHTML = (
'<input id="loginButton" type="button" value="Login!" onclick="'+authUser()+'" />'
);
}
</script>
<div id="logbutton"></div>
function showLoginButton() {
document.getElementById('logbutton').innerHTML = (
'<input … onclick="'+authUser()+'" />'
);
}
You are actually calling the function authUser here (because that’s what functioname() does).
What you want instead is
'<input … onclick="authUser()" />'
I'm trying to develop a Windows 8 app and I want to integrate Facebook in it.
I know this can be done without their SDK, but I've seen it can also be done with it and I'd love to go for the SDK.
I have the all.js file downloaded and referenced.
I included the initialization code in default.html:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function () {
// init the FB JS SDK
FB.init({
appId: '*******', // App ID from the app dashboard
status: true, // Check Facebook Login status
xfbml: true // Look for social plugins on the page
});
// Additional initialization code such as adding Event Listeners goes here
};
</script>
I'm trying to login using FB.login() when a button is pressed, but it's not working because
FB.getLoginStatus(function (response) {
console.log("entered")
if (response.status === 'connected') {
console.log("connected");
} else {
console.log("connecting");
FB.login(function (response) {
if (response.authResponse) {
console.log("connected");
} else {
console.log("canceled");
}
});
}
});
However, nothing happens when I click the button I attached this function to.
What can it be?
Any help is appreciated,
thanks!
<!DOCTYPE html>
<html>
<head>
<title>Facebook Login Example</title>
<meta charset="UTF-8">
</head>
<body>
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
alert("hh");
// Logged into your app and Facebook.
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
// This function is called when someone finishes with the Login
// Button. See the onlogin handler attached to it in the sample
// code below.
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : '197393374008468',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.7' // use version 2.2
});
// Now that we've initialized the SDK, we call
// FB.getLoginStatus(). This function gets the state of the
// person visiting this page and can return one of three states to
// the callback you provide. They can be:
//
// 1. Logged into your app ('connected')
// 2. Logged into Facebook, but not your app ('not_authorized')
// 3. Not logged into Facebook and can't tell if they are logged into
// your app or not.
//
// These three cases are handled in the callback function.
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
// Load the SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
</script>
<!--
Below we include the Login Button social plugin. This button uses
the SDK to present a graphical Login button that triggers
the FB.login() function when clicked.
-->
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
<div id="status">
</div>
</body>
</html>
My App on Facebook uses the JavaScript SDK. When a user navigates to my app page and goes to my app, a popup asks them to authorize the app. This works well.
However, if they authorize the app, then return to it later, another pop-up (which i believe to be another authorization window) will quickly open then close.
What is my code is doing this? Code is below.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '221953271200525', // App ID
channelURL : '//www.vidjahgames.com/fall/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
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.');
}
}, {scope: 'email'});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
FB.login makes the popup appear, so you should first know if the user is logged in and if not make the login popup appear:
FB.getLoginStatus(function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
FB.api('/me', function(response) {
_userName = response.name;
alert("hello"+_userName);
}.bind(this));
} else {
FB.login(function(response) {
// the rest of your code here...
}
}
});
So I've set up a basic login/authentication flow on the home page of my site. After the authentication dialog, I want to redirect them to another page on my site. I've tried several variations of the existing code, changing the site url under basic settings in the developer app, trying different oauth flows, and still, it simply redirects to the same homepage they logged in on. I know this sounds tremendously easy but there are so many different authentication flows and implementations that it's a bit confusing.
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXX', // App ID
channelURL : '//localhost/dataweavr/channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
And then some more fun...
<div id="fb-root"></div>
<div id="user-info"></div>
<button id="fb-auth">Login</button>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: 'XXXXXXXXXXXXXXXXXXXXXX',
status: true,
cookie: true,
xfbml: true,
oauth: true});
function updateButton(response) {
var button = document.getElementById('fb-auth');
if (response.authResponse) {
//user is already logged in and connected
var userInfo = document.getElementById('user-info');
FB.api('/me', function(response) {
userInfo.innerHTML = '<img src="https://graph.facebook.com/'
+ response.id + '/picture">' + response.name;
button.innerHTML = 'Logout';
});
button.onclick = function() {
FB.logout(function(response) {
var userInfo = document.getElementById('user-info');
userInfo.innerHTML="";
});
};
} else {
//user is not connected to your app or logged out
button.innerHTML = 'Login';
button.onclick = function() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
var userInfo = document.getElementById('user-info');
userInfo.innerHTML =
'<img src="https://graph.facebook.com/'
+ response.id + '/picture" style="margin-right:5px"/>'
+ response.name;
});
} else {
//user cancelled login or did not grant authorization
}
}, {scope:'email,user_birthday'});
}
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
(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>
And another unrelated issue. Why do I only have a normal button popup? How can I get the SDK to render a Facebook login button rather than just a simple login button?
You should be able to redirect the user after the login response. Under these lines:
FB.login(function(response) {
if (response.authResponse) {
Add something like this:
window.top.location = "http://page_to_redirect";
The button thing, hmm... well, you are writing a simple login button in the html, if you want a login button, change this:
Login
To this:
<fb:login-button></fb:login-button>
Hope it helps.
I'm using facebook open graph, new api, and i can do this:
<fb:login-button show-faces="true" max-rows="9" perms="email" autologoutlink="true" onlogin="window.location = 'http://www.example.com/facebook/facebook_test/'"></fb:login-button>
but when i read the doc if i need more options in http://developers.facebook.com/docs/reference/javascript/FB.login says i can:
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:'read_stream,publish_stream,offline_access'});
but if i need another image for fb button, and if i need another things, i can't find how do that, of in what part of html i can call FB.login, is between tags 'script'?
You need to use Javascript SDK for this. Just wrap that FB.login into some function and call it wherever you want. For example if you want to call it on image click:
<html>
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
//initializing API
window.fbAsyncInit = function() {
FB.init({appId: 'your app id', status: true, cookie: true,
xfbml: true});
};
(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>
<!-- custom login button -->
<img src="images/my_login.png">
<script>
//your fb login function
function fblogin() {
FB.login(function(response) {
//...
}, {scope:'read_stream,publish_stream,offline_access'});
}
</script>
</body>
</html>