Facebook Session is not persisting from page - to - page - facebook

I am having a rough time with getting the facebook javascript SDK workflow to work. The requirement was to offer a "login" link, not a facebook icon. To do this, I improvised a bit. So far it works really well but the session is not persisting from page to page. I am figuring that the session gets set after the login method but it doesn't look like that. Here is login / logout which works fine:
function login() {
FB.login(function(response) {
if (response.session) {
FB.api('/me', function(response) {
document.getElementById('socialauth').innerHTML = "<span>Welcome, " + response.name + " </span>"
+ "(logout)";
});
} else {
}
}, { perms: 'email,publish_stream' });
return false;
}
function logout() {
FB.logout(function(response) {
document.getElementById('socialauth').innerHTML = "login";
});
}
And here is what I am testing with which doesn't fire:
$(document).ready(function() {
FB.getLoginStatus(function(response) {
if (response.status == "connected") {
// logged in and connected user, someone you know
alert("ok - 5 seconds has passed");
} else {
// no user session available, someone you dont know
alert("not ok");
}
});
});
I am also trying "javascript:document.cooike" in my URL box and see not evidence of the FB session.
Kindly advise?

You need to make sure your loading the Facebook SDK on each page as well. For a simple solution that uses jQuery check out https://github.com/xocialhost/jquery.xocialCore.js
The first two functions in the plugin deal with initializing FB and authentication.
Using the provided function you'd do something like this:
$(document).ready(function() {
$.xcInitFacebook = function({appId:'yourappid',callback:function() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') { alert('logged in'); }
else { alert('not logged in'); }
} });
});

Related

How to solve "The person is logged into Facebook, but not your app" javascript sdk

I want my website to login with facebook but i am seeing this error.
<script>
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
console.log('statusChangeCallback');
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
// alert('login fb');
document.getElementById('login').style.display = 'none';
document.getElementById('startbtn').style.display = 'block';
testAPI();
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
alert('not authorized');
} else {
// The person is not logged into Facebook, so we're not sure if
alert('not login fb');
document.getElementById('login').style.display = 'block';
document.getElementById('startbtn').style.display = 'none';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'my app id',
oauth : true,
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.5' // use graph api version 2.5
});
</script>
It work in mycomputer and other computer.But one of Computer
Show alert (not authorized) and can not login.
How can I solve this problem.
You can invoke the login view of facebook if status is not_authorized. Try this:
if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
console.log('Please log into this app.');
fbLogin();
}
function fbLogin(){
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me/?fields=picture,name,email', function(response) {
console.log(response);
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
}

Facebook De-Authorization causes the api to fail

So my issue is when I use the facebook api everything seems to work fine till I revoke permissions on the app. Once I do that the api stops working. Here is the code:
if (socialMediaType == "facebook") {
//it always gets to this location even after the revoke happens
FB.getLoginStatus(function (response) {
//gets in here fine on page load and other instances,
//but if you hit permissions delete it never gets here
if (response.status === 'connected') {
if (!ConnectButtonClicked) {
FB.api("/me/permissions", "delete", $scope.fbRevokeCallBack);
} else { /*code here works fine*/ }
} else {
$scope.facebookLogin();
}
});
}
Is there something I am doing incorrectly with revoking permissions to the app?
Here is the call back:
scope.fbRevokeCallBack = function (Data) {
console.log('auth revoke', Data);
// check for a valid response
if (!Data || Data.error) {
$scope.$apply(function () {
$scope.fb.connectionError = true;
$scope.socialError = "error";
});
return;
}
if (Data) {
console.log("Success");
};
}
Success is hit and the app is revoked as expected, but when you go back to reconnect to facebook the api does nothing. No calls can be found in the networking tab and the call back is never hit.
Some information:
This is using the Facebook JSSDK
and this is used in AngularJS
Would $scope.$apply() help here?
if (socialMediaType == "facebook") {
//it always gets to this location even after the revoke happens
FB.getLoginStatus(function (response) {
//gets in here fine on page load and other instances,
//but if you hit permissions delete it never gets here
if (response.status === 'connected') {
if (!ConnectButtonClicked) {
FB.api("/me/permissions", "delete", $scope.fbRevokeCallBack);
} else { /*code here works fine*/ }
} else {
$scope.facebookLogin();
}
$scope.$apply();
});
}

Permanent access token for the facebook app on a website

I need help to make a facebook app on my website permanent. The access token keeps expiring and i dont know how to get a permanent token.
Im using the fb.wall from "http://www.neosmart.de/social-media/facebook-wall/"
Here is my code:
<script type="text/javascript">
$(function () {
$('#example1').fbWall({
id: 'Facebookuser',
accessToken: 'accesstokengoeshere',
showGuestEntries: false,
showComments: true, max: 5,
timeConversion: 24
});
});
</script>
Instead of trying to get a permanent access token, try making a call to a function like this one each time where you have 'accesstokengoeshere':
function getAccessToken () {
FB.getAuthResponse(function(response) {
if (response.status == 'connected') {
return response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// if the user is not logged in to FB, prompt them to do so
// later might want to change this so it doesn't automatically prompt you to login
FB.login(function(response) {
return getAccessToken();
});
} else {
FB.login(function(response) {
return getAccessToken();
});
}
});
}

FB.login not authtorized

I am designing a Facebook app on canvas page. And I called the Facebook_login function when clicking on a button. Wnen I visit the app and click on the button, it always works and shows "connected". But when using the tester facebook account the response.status is always "not_authorized", whatever the tester authorized the app or not. I am really confused about this. Could anybody figure it out for me? Any suggestions will be appreciated.
function Facebook_login() {
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
alert(response.status);
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
var signed_request = response.authResponse.signedRequest;
} else if (response.status == 'not_authorized') {
alert(response.status);
login();
} else {
//cancelled
}
}, true);
}
function login() {
FB.login(function(response) {
if (response.authResponse) {
var uid = response.authResponse.userID;
console.log('Welcome! Fetching your information.... ');
FB.api('/'+uid, function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
// cancelled
}
},{scope:'email,publish_checkins,publish_actions,publish_stream'});
}

FB.api('/me/photos', function(result) {} doesn't return anything in Safari

$('#login').live('click',function(e){
$(this).hide();
login();
});
// login
function login(){
FB.login(function(response) {
if (response.authResponse != 'undefined' && response.authResponse != null) {
FB.getLoginStatus(function(response) {
// remember user ID
uID = response.authResponse.userID;
if(uID) getMostTagged();
});
} else { alert('User cancelled login or did not fully authorize.'); }
},{scope: 'user_photos,user_videos,user_photo_video_tags'});
}
// get friend with most pic tags
function getMostTagged(){
FB.api('/me/photos', {fields: 'tags'}, function(result) {
console.log(result);
}
The problem is that there is nothing in the result in Safari whereas its works fine in Firefox and Chrome...
Sorry I logged with wrong Facebook ID and thats why I couldn't get anything.