I seem to have some issues with the proper order when javascript functions are complete.
I have a page that checks if a user is logged in to facebook or not. If someone is logged in it will logout that person, and redirect to a different page that contains a like button.
However, when I run the webpage without the redirect the user gets logged out properly. If the redirect is inplace, it no longer forces the logout.
You can test the code on this website: http://quiet-depths-9481.herokuapp.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html>
<head>
<script src="src/jquery.js"></script>
</head>
<body style="background-color:#ff6600">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
var loggedout = false;
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxxxx', // App ID
channelUrl : '', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
fbApiInit = true;
};
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1&appId=511896318825154";
ref.parentNode.insertBefore(js, ref);
}(document));
function fbEnsureInit(callback)
{
if(!window.fbApiInit) {
setTimeout(function() {fbEnsureInit(callback);}, 50);
} else {
if(callback) {
callback();
}
}
}
function fbEnsureLogout(callback)
{
if(!window.loggedout) {
setTimeout(function() {fbEnsureLogout(callback);}, 50);
} else {
if(callback) {
callback();
}
}
}
fbEnsureInit(function()
{
console.log("this will be run once FB is initialized");
checkLogout();
});
fbEnsureLogout(function()
{
console.log("this will run if logout is ensured");
window.location = "http://quiet-depths-9481.herokuapp.com/like.php"
document.write('<div class="fb-like" data-href="https://www.facebook.com/accentjobs" data-width="450" data-show-faces="true" data-stream="true" data-header="true"></div>');
});
function checkLogout()
{
console.log('checkLogout');
FB.getLoginStatus(function(response)
{
if (response.status === 'connected')
{
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
console.log('logged in & authenticated');
console.log('trying to logout now.');
FB.logout(function(response)
{
console.log('LOGGED OUT!');
loggedout = true;
});
}
else if (response.status === 'not_authorized')
{
console.log('logged in but no authentication');
console.log('trying to logout now.');
FB.logout(function(response)
{
console.log('LOGGED OUT!');
loggedout = true;
});
}
else
{
console.log('Not logged in to facebook!');
loggedout = true;
}
});
}
</script>
I believe you shouldn't be able to logout facebook users without their authentication with your app. You can read this directly in the console, facebook's all.js returns
FB.logout() called without an access token.
This means, you have to call their api (FB.login or FB.getLoginStatus). Either way, you won't get the access token without proper user authorization with your app/site.
You'll have to make users login with your app and then sign them out. This probably works for you, because you're app owner so basically you're connected via your app.
Related
Below I am trying to check the session of facebook on page load. And want to show different content on page as per login status. What's wrong?
I want first two check the user connection status. Then only appropriate content to be shown on the page.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
</head>
<body>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '1781292862', // App ID from the app dashboard
// channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms
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
};
window.onload(){
FB.init({
appId : '178812862', // Your FB app ID from www.facebook.com/developers/
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("yes");
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
} else {
// the user isn't logged in to Facebook.
}
});
</script>
</body>
</html>
First, you'll want to use response.status instead of response.session. And since the status is going to be string either way ("connected", "not_authorized", or "unknown"), you'll want to set up your if statements accordingly. The following example is from https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
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.
}
});
Let me know if that makes sense, or if you have any questions :)
Update
Your script is still missing the little closure that loads the facebook sdk into your document (which is why you're getting the error that FB is not defined). Try replacing your whole script block with the following:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 1343434343, // Your FB app ID from www.facebook.com/developers/
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("yes");
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
} else {
// the user isn't logged in to Facebook.
}
});
};
// 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 = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
(^That last part is what loads the facebook sdk.) Try it out and let me know how it goes :)
Try this
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
id= response.id;
if(id==undefined)
{
alert('I am logged out');
}
else
{
alert('I am logged in');
}
})
}
});
I'm trying to host a simple JS based Facebook app on dropbox following this question:
Server required for a Facebook application?
Currently I just want to get the login part done before I can continue but i'm having some issues - apparently the call for FB.getLoginStatus doesn't return so the actual login function isn't called.
If I call login() directly (currently commented out) I manage to log into Facebook but then the call FB.api('/me', function(response) {...}) doesn't return so I'm logged in but can't really do anything.
What am I missing? I've set the correct URLs in my Facebook's app page and I really don't know what I'm doing wrong, why does it have to be so hard? :/
Here is my JS code (pretty much copy+paste from Facebook login tutorial) and the HTML is exactly copy+paste from that tutorial.
// Additional JS functions here
function testAPI() {
document.write('Welcome! Fetching your information.... </br>');
FB.api('/me', function(response) {
document.write('Good to see you, ' + response.name + '.</br');
});
}
function login() {
document.write('Logging to Facebook </br>');
FB.login(function(response) {
if (response.authResponse) {
// connected
document.write("User now connected </br>");
testAPI();
} else {
// cancelled
document.write("User cancelled </br>");
}
});
}
window.fbAsyncInit = function() {
document.write("Connecting to facebook </br>");
FB.init({
appId : '542474505763387', // App ID
channelUrl : 'https://dl-web.dropbox.com/get/index.html?w=71a3a216', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
//login();
FB.getLoginStatus(function(response) {
document.write("Response </br>");
if (response.status === 'connected') {
// connected
document.write("connected </br>");
} else if (response.status === 'not_authorized') {
// not_authorized
document.write("not_authorized </br>");
login();
} else {
// not_logged_in
document.write("not_logged_in </br>");
login();
}
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
So I've been trying to get a webpage to authenticate a user using Facebook OAuth. I've been following Facebook's tutorial on how to do so, and I have everything finished but I can't seem to make it work.
Here is the code...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function main(){ // runs all the other methods when needed, and maintains the proper path from making the form to posting to Facebook
//var imageURL = getImageURL();
//$("img[src='" + imageURL + "']").after("</br><form><input type=\"checkbox\" name=\"geo\" value=\"geolocation\"><b>Use Geolocation?</b> </br> <b>Additional Information About the Image: </b> <input type=\"comment\" name=\"cmnt\"></form>");
//alert("Form should have been placed.");
}
function testAPI() {
alert('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
alert('Good to see you, ' + response.name + '.');
});
}
// This function right now is hard coded to one particular image right now for testing purposes
// Should be coded in the future to return the URL of a long-pressed image
function getImageURL(){
var url = "http://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Solid_black.svg/200px-Solid_black.svg.png";
return url;
}
// Facebook login code
function login() {
FB.login(function(response) {
if (response.authResponse) {
// connected
alert("Running testAPI();");
testAPI();
} else {
alert("Login not complete.");
// canceled
}
});
}
function testAPI() {
alert('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
alert('Good to see you, ' + response.name + '.');
});
}
</script>
</head>
<body onload="main()">
<div id="fb-root"></div>
<script>
//-----------------------------
// This is an initilization script created by Facebook.
//-----------------------------
window.fbAsyncInit = function() {
alert("Running Facebook init..");
FB.init({
appId : '488272104524396', // App ID
channelUrl : '//t50.novarra.net/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional init code here
FB.getLoginStatus(function(response) {
alert("Getting Login Status..");
if (response.status === 'connected') {
// connected
alert("Response Status: Connected");
$('.fblogincontainer').removeClass('hidden');
testAPI();
} else if (response.status === 'not_authorized') {
alert("Response Status: Not Authorized");
// not_authorized
login();
} else {
alert("Response Status: Other");
// not_logged_in
login();
}
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<b> Page </b>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Solid_black.svg/200px-Solid_black.svg.png">
<div id="content">
<div class="fblogincontainer hidden">
<div class="fb-login-button">Login to Facebook</div>
</div>
</div>
</body>
</html>
So my problems are that the FB>getLoginStatus doesn't even start. The alerts for it do not pop up.
Additionally the fb-login-button doesn't seem to function. It disappears for me.
I'm using the Facebook API in order to check if the user who visits my page is logged into Facebook or not. I tried everything, couldn't came up with a solution. I would like to especially state that sandbox mode is off. And my code is right below;
<div id="fb-root"></div>
<script>
function fbLoginStatus(response) {
console.log("Status: "+response.session);
if(response.session) {
//user is logged in, display profile div
alert("Logged in");
} else {
//user is not logged in, display guest div
alert("Not logged in");
}
}
window.fbAsyncInit = function() {
FB.init({
appId : '111111111111111', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.getLoginStatus(function(response){
console.log("Hey");
if(response.session){
console.log("You are logged in");
}
else{
console.log("You are not logged in");
}
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "http://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
FB.getLoginStatus is the function that is used to detect if user is logged into FB or not. In the callback of function you are checking response.session but as per my understanding this session is not a valid attribute of returning JSON object. You should use response.status. So code will become like below.
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert("LOG IN");
} 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.
}
});
Hope this Helps
Kaushik
I am trying to integrate Facebook into my webpage so users can update their status from my site. Right now I have a button a user clicks to update their status, the button calls the updateFacebookStatus() function. When this button is clicked right now, a blank white window pops up saying "waiting for www.facebook.com". This window is where it should be asking for permission but the window just times out. Any ideas: Here is my code for the function updateFacebookStatus().
function updateFacebookStatus()
{
//Ask for permissions
FB.login(function(response)
{
}, {scope:'publish_stream, offline_access,manage_pages'});
FB.getLoginStatus(function(response)
{
//If user is logged it and given permissions update status
if (response.status === 'connected')
{
new_status = document.getElementById('FacebookBody').value;
//update status
FB.api(
{
method: 'status.set',
status: new_status
},
function(response)
{
if(response == 0)
{
alert("Your Facebook Status Was Not Updated.");
}
else
{
alert("Your Facebook Status Was Updated");
}
}
);}
else
{
window.location.href = "#home";
}
});
}
In my html file I get the Facebook javascript sdk using the following code:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'XXXXXXXXXXXXX',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://www.XXXXX.com/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
not sure if it has anything to do with your problem but notice that you call the same script twice - one time via <script src="http://connect.facebook.net/en_US/all.js"></script> tag and the other via async function call under // Load the SDK Asynchronously