Facebook JS SDK -Access Tokens unable to post actions - facebook

When I use the code below nothing happens,I am unable to understand why this is so
function graphStreamPublish(){
var passString = '?[OBJECT]=http://entrancesuccess.net&access_token=' + accesstoken;
FB.api('/me/[APPNAMESPACE]:[ACTION]' + passString,'post',
function(response) {
showLoader(false);
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post ID: ' + response.id);
}
});
}
but, when I just simply copy-paste the Access Token(YTWYDGFXVVZG456AVGAFV45HGCZXHGFACGFCGFXDG546FXGFXJGFXGFXGXFJXGFXG) in the variable "passString" everything works fine and actions are published on user activity on facebook.
Example:
function graphStreamPublish(){
var passString = '?[OBJECT]=http://entrancesuccess.net&access_token=YTWYDGFXVVZG456AVGAFV45HGCZXHGFACGFCGFXDG546FXGFXJGFXGFXGXFJXGFXG';
The rest of the code is below(if required):
window.fbAsyncInit = function() {
FB.init({ appId: 'XXXXXXXXXXXXX', //change the appId to your appId
status: true,
cookie: true,
xfbml: true,
oauth: true});
showLoader(true);
function updateButton(response) {
button = document.getElementById('fb-auth');
userInfo = document.getElementById('user-info');
if (response.authResponse) {
//user is already logged in and connected
FB.api('/me', function(info) {
login(response, info);
});
button.onclick = function() {
FB.logout(function(response) {
logout(response);
});
};
} else {
//user is not connected to your app or logged out
button.innerHTML = 'Login';
button.onclick = 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:'publish_stream,public_action'});
}
}
}
// 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) {
var accessToken = response.authResponse.accessToken;
userInfo.innerHTML = '<img src="https://graph.facebook.com/' + info.id + '/picture">' + info.name
+ "<br /> Your Access Token: " + accessToken;
button.innerHTML = 'Logout';
showLoader(false);
document.getElementById('other').style.display = "block";
}
}
function logout(response){
userInfo.innerHTML = "";
document.getElementById('debug').innerHTML = "";
document.getElementById('other').style.display = "none";
showLoader(false);
}

I’d say there is no variable accesstoken in your function graphStreamPublish.
You’re using the var keyword in the function login, which makes it a local variable – so it’s contents are thrown away once that function is done.
You could do the assignment without var, then it’d be a global variable, and graphStreamPublish should be able to access it.
But normally you should not need to pass the access token explicitly at all, because the JS SDK is perfectly capable of passing it by itself in the background, without any need for you to pass it around actively by yourself.

Related

Facebook app login issues from public user

I created Facebook app and integrated with magento, when public user try to login to the fb it shows this error.
]1
My requirement is when user login Facebook from magento site need to display user images and albums, but this process working with admin details (Getting the profile images and albums from admin details )
window.fbAsyncInit = function() {
FB.init({ appId: facebook_app_id,
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
document.getElementById("fbaccesstoken").value = response.authResponse.accessToken;
var userInfo = document.getElementById('user-info'),
photos_album = document.getElementById('photos_album');
FB.api('/me', function(response) {
/* userInfo.innerHTML = '<img src="https://graph.facebook.com/'
+ response.id + '/picture" />' + response.name;
button.innerHTML = 'Logout';*/
});
FB.api('/me/albums', function(response){
var l=response.data.length,
rs_all,
all_img;
if(l > 0){
rs_all ='<select id="fb_album" onchange="get_all_photos(this.value)"><option value="0">-- Select your album --</option>';
for (var i=0; i<l; i++){
var album = response.data[i],
albumid = album.id;
rs_all += '<option value="'+album.id+'">'+album.name+'</option>';
}
rs_all += '</select>';
userInfo.innerHTML = rs_all;
}
//
});
get_all_photos = function(id){
if(id==0){
photos_album.innerHTML = '';
return;
}
FB.api("/"+id+"/photos",function(response){
console.log(response);
var photos = response["data"],
pt_result = '<ul>';
for(var pt=0;pt<photos.length;pt++) {
console.log(photos[pt].images);
//pt_result += '<li><img color="" src="'+photos[pt].images[0].source+'" /></li>';
//pt_result += '<li><img color="" src="https://graph.facebook.com/' + photos[pt].id + '/picture'+'" /></li>';
pt_result += '<img src="https://graph.facebook.com/'+photos[pt].id + '/picture?access_token='+document.getElementById("fbaccesstoken").value+'" style="margin-right:5px"/>';
}
photos_album.innerHTML = pt_result+'</ul>';
});
}
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 = 'Please Login Facebook';
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:'user_photos'});
}
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
window.fbAsyncInit = function() {
FB.init({ appId: facebook_app_id,
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
document.getElementById("fbaccesstoken").value = response.authResponse.accessToken;
var userInfo = document.getElementById('user-info'),
photos_album = document.getElementById('photos_album');
FB.api('/me', function(response) {
/* userInfo.innerHTML = '<img src="https://graph.facebook.com/'
+ response.id + '/picture" />' + response.name;
button.innerHTML = 'Logout';*/
});
FB.api('/me/albums', function(response){
var l=response.data.length,
rs_all,
all_img;
if(l > 0){
rs_all ='<select id="fb_album" onchange="get_all_photos(this.value)"><option value="0">-- Select your album --</option>';
for (var i=0; i<l; i++){
var album = response.data[i],
albumid = album.id;
rs_all += '<option value="'+album.id+'">'+album.name+'</option>';
}
rs_all += '</select>';
userInfo.innerHTML = rs_all;
}
//
});
get_all_photos = function(id){
if(id==0){
photos_album.innerHTML = '';
return;
}
FB.api("/"+id+"/photos",function(response){
console.log(response);
var photos = response["data"],
pt_result = '<ul>';
for(var pt=0;pt<photos.length;pt++) {
console.log(photos[pt].images);
//pt_result += '<li><img color="" src="'+photos[pt].images[0].source+'" /></li>';
//pt_result += '<li><img color="" src="https://graph.facebook.com/' + photos[pt].id + '/picture'+'" /></li>';
pt_result += '<img src="https://graph.facebook.com/'+photos[pt].id + '/picture?access_token='+document.getElementById("fbaccesstoken").value+'" style="margin-right:5px"/>';
}
photos_album.innerHTML = pt_result+'</ul>';
});
}
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 = 'Please Login Facebook';
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:'user_photos'});
}
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
First of all, as the error message tells you, your App is in development mode. Got to the "Status & Review" tab of your App and use the switch next to this text:
Do you want to make this app and all its live features available to the general public?
That being said, you need to go through a review process with user_photos or that permission will only work for users with a role in your App. Everything you need to know about Login Review can be found here: https://developers.facebook.com/docs/facebook-login/review
Btw, you don´t need getLoginStatus AND subscribing to the event auth.statusChange. Here is a tutorial with detailed explanation about everything you need for login and refreshing the Access Token for returning users: http://www.devils-heaven.com/facebook-javascript-sdk-login/

User is automatically logged in after doing a log out, with Facebook-JavaScript-sdk login

I am able to smoothly log in the user into my site and get his details from facebook but I am not able to log him out.
On logging I am landing the user to the inner page for members. From there he presses the logout from my web site. On pressing that he is sent back to the front page, which in course gets reloaded.
I guess what is happening that the user who is logged in, when he presses the logout button he is redirected to the front page. But automatically the login event fires and he is logged in again.
I am using the following code.
<script type="text/javascript">
$(function(){
var button;
if(document.cookie.indexOf("fbsr_myappid") > 0){// I am checking if the cookie value is set I am making status in FB.init() false.
var fb_status = false;
}
else{
var fb_status = true;
}
window.fbAsyncInit = function(){
FB.init({ appId : 'myappid',
status : fb_status,
cookie : true,
xfbml : true,
oauth : true
});
showLoader(true);
function updateButton(response) {
button = document.getElementById('fb-auth');
if(response.authResponse) {
FB.api('/me', function(info){
$.post("/web/register/faceBookRegistration",{data:info}).done(function(data){
if(typeof(data) != undefined){
window.location = "/web/login/loadFaceLogin"; // I am doing an ajax post to my login controller having loadFaceMember function.
}
});
login(response, info);
});
button.onclick = function(){
// I think I should use the folowing code somewhere else
FB.logout(function(response){
logout(response);
});
};
} else {
button.onclick = function(){
showLoader(true);
FB.login(function(response){
if(response.authResponse) {
FB.api('/me', function(info){
login(response, info);
});
} else {
showLoader(false);
}
}, {scope:'email, user_birthday,user_about_me' });
}
}
}
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
(function() {
var e = document.createElement('script');
e.async = true;
e.type = 'text/javascript';
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) {
var accessToken = response.authResponse.accessToken;
showLoader(false);
}
}
function logout(response){
FB.logout(function(response){
console.log("User is now logged out.");
});
showLoader(false);
}
function showLoader(status){
if (status)
console.log("Yes showLoader.");
else
console.log("Yes dont showLoader.");
}
});
On server side on pressing the logout button this following function is called in the logout controller.
function index(){
$isSessionExp = true;
if( $this->session->userdata('is_sess') )
$isSessionExp=false;
$login_session_id = $this->session->userdata('login_session_id');
$this->login_model->updateLogoutTime($login_session_id);
$this->session->sess_destroy();
if($isSessionExp)
redirect($this->url."/logout/session_expired");
else
redirect($this->url."/login");
}
I guess if I am able to Link the above function in the logout controller with the following lines of javascript code.
FB.logout(function(response){
logout(response);
}
my work will be done.
Any help will be highly appreciated.
Yes what I had guessed was right. I needed to modify my logout function. Here is the modified function.
function logout(response){
console.log("From logout" + response);
if(!response.authResponse){
window.location = "/web/login/";
return;
}
FB.logout(function(response){
FB.Auth.setAuthResponse(null,'unknown');
logout();
});
}
Thanks to #G W for pointing me in right direction.
Everyone feel free to comment and improve it. I would welcome that. My approach was based on this FB.logout() called without an access token

How to share with access token?

I have write this code but it does work only if I am already logged in facebook, otherwise appears a popup window that require me email and password to login in facebook.
This is the code:
window.fbAsyncInit = function () {
FB.init({
appId: 'xxx',
frictionlessRequests: true,
status: true,
cookie: true,
xfbml: true,
oauth: true
});
function update(response) {
if (response.authResponse) {
FB.api('/me', function (info) {
login(response, info);
});
} else {
}
}
FB.getLoginStatus(update);
};
(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) {
publish();
}
}
function publish() {
var publish = {
method: 'feed',
access_token: '<?php echo $token; ?>',
message: 'How are you ?',
name: 'hi friends',
caption: 'yuhuuuuuuuu',
description: (' '),
link: 'http://www.example.com',
picture: 'http://cdn1.hark.com/images/000/004/514/4514/original.jpg',
actions: [{
name: 'Hello',
link: 'http://www.example.com/'
}],
user_message_prompt: 'Share on facebook'
};
FB.ui(
publish, function (response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
});
}
In your update method, in the blank else you should call the FB.login method:
Calling FB.login prompts the user to authenticate your application
using the OAuth Dialog.
However, you can't just do this:
function update(response) {
if (response.authResponse) {
FB.api('/me', function (info) {
login(response, info);
});
} else {
FB.login(function(response) {
if (response.authResponse) {
console.log("user is logged in!", response.authResponse);
}
});
}
}
Since as it states in the documentation:
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.
You'll have to show a user a button or something that tells him to click in order to login, and then you can call the FB.login method.

Facebook login button ins't working for IE

window.fbAsyncInit = function () {
FB.init({
appId: '#',
status: true,
cookie: true,
xfbml: true,
oauth: true
})
FB.getLoginStatus(function (response) {
if(response.status === 'connected') {
var uid = response.authResponse.userID;
alert(uid);
FB.api('/' + uid, {
fields: 'name,email,id,picture'
}, function (result) {
//Code
})
}
})
FB.Event.subscribe('auth.login', function (response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function (response) {
logout();
});
FB.getLoginStatus(function (response) {
if(response.session) {
// logged in and connected user, someone you know
login();
}
});
};
function login() {
FB.getLoginStatus(function (response) {
if(response.status === 'connected') {
var uid = response.authResponse.userID;
// alert(uid);
FB.api('/' + uid, {
fields: 'name,email,id,picture'
}, function (result) {
//code
})
}
})
}
function logout() {
//code
}
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_GB/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
I use the <div class="fb-login-button">Sign in with Facebook</div> for the login button to appear.
I have put this script in a JS file and i'm using it on my JSP.
I get a login authentication screen in firefox and chrome, but somehow the button doesn't show in IE 7,8,9
Idk if this is your problem or not, but you might try adding:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
To your html document
An explanation here:
http://www.zolton.org/2011/04/facebook-fbml-tags-fail-to-load-in-ie/

how to get email id of Facebook user using javascript sdk

I am using JavaScript API to create my app for Facebook. The problem is, it's returning
email = undefined.
I don't know why? And if I use Facebook login/logout button on my app then the alert shows correct email id of the user but I don't want to do that.
What am I missing?
Here is my code:
<p><fb:login-button autologoutlink="true" perms="user_about_me,email"></fb:login-button></p>
<script>
window.fbAsyncInit = function () {
FB.init({ appId: '250180631699888', status: true, cookie: true,
xfbml: true
});
FB.getLoginStatus(function (response) {
if (response.session) {
greet();
}
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
function greet() {
FB.api('/me', function (response) {
alert('Welcome, ' + response.name + "!");
alert('Your email id is : '+ response.email);
});
}
</script>
// https://developers.facebook.com/docs/javascript/reference/FB.api/
// v2.4
FB.api('/me', { locale: 'en_US', fields: 'name, email' },
function(response) {
console.log(response.email);
}
);
here is example how i retrieve user name and e-mail:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
$(function() {
FB.init({
appId : 'APP_ID',
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') {
getCurrentUserInfo(response)
} else {
FB.login(function(response) {
if (response.authResponse){
getCurrentUserInfo(response)
} else {
console.log('Auth cancelled.')
}
}, { scope: 'email' });
}
});
function getCurrentUserInfo() {
FB.api('/me', function(userInfo) {
console.log(userInfo.name + ': ' + userInfo.email);
});
}
});
</script>
According to the latest info on the facebook page you should use 'scope' instead of perms.
https://developers.facebook.com/docs/reference/javascript/FB.login/
If you visit
https://developers.facebook.com/tools/console/
and use the fb-api -> user-info example as a starting point, then logout and back in again, it should ask you for email perms and you can see your email being printed. It is done using response.email as you mention in your post.
<button id="fb-login">Login & Permissions</button>
<script>
document.getElementById('fb-login').onclick = function() {
var cb = function(response) {
Log.info('FB.login callback', response);
if (response.status === 'connected') {
Log.info('User logged in');
} else {
Log.info('User is logged out');
}
};
FB.login(cb, { scope: 'email' });
};
</script>
Use this to for extra permission
for more details visit :
https://www.fbrell.com/examples/
In this code i have get user data form facebook and store into my database using ajax
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me?fields=email,name,first_name,last_name', function(response)
{
FB.api(
"/"+response.id+"/picture?height=100",
function (responses) {
//console.log(responses.data.url)
response['profile_pic']=responses.data.url;
$.ajax({
type:"POST",
url:'<?php echo base_url(); ?>'+'home/facebook_get_signup',
data:response,
success:function(res)
{
if(res=='success')
{
window.location='<?php echo base_url(); ?>';
}
if(res=='exists')
{
window.location='<?php echo base_url(); ?>';
}
}
});
}
)
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
// handle the response
}, {scope: 'email,user_likes'});
There are a couple of things wrong with your solution. First of all you are using the old authentication scheme. You should use the new one described here :
https://developers.facebook.com/docs/reference/javascript/
You need to add the oauth:true to your init function, and make sure that your getLoginStatus looks for the new type of response.
When that is said you need to make sure you have the right permissions to see the users e-mail. You can see the required permissions here:
http://developers.facebook.com/docs/reference/api/user/
You get those by using the FB.login function as described by TommyBs in another answer.
Once you have those options you can use the FB.api function to get the e-mail.