Graph API not accepting access token using JavaScript SDK - javascript

I've been racking my brains for ages now on this problem. After loading the JavaScript SDK I cannot make any GET calls to the the graph API. I'm attempting to use /me/home but I've tried /me as well for debugging purposes. The strange thing is, if I check the user's login status it return's an access token which I can use to retrieve the news feed perfectly in the address bar. However, as soon as I make a GET call to the Graph API using JavaScript I get:
"An active access token must be used to query information about the current user."
Also I can make POST call the the user's feed using SDK perfectly fine. Finally, I have checked to make sure I have the read_stream permission.
window.fbAsyncInit = function() {
FB.init({
appId : '<?php echo($facebook_key); ?>', // App ID
channelUrl : '//'+window.location.hostname+'/channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.authResponse) {
// user has auth'd your app and is logged into Facebook
console.log(response);
} else {
location.href='welcome.php';
};
});
FB.getLoginStatus(function(response) {
console.log(response);
});
//get Facebook news feed
FB.api('/me/home', 'get', function(response) {
console.log(response);
});
};
// 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));
//status update function
function post (form) {
var status = form.status.value;
FB.api('/me/feed', 'post', { message: status }, function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Status updated');
};
});
};

I would try moving your call to /me into your FB.getLoginStatus function:
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//get Facebook news feed
FB.api('/me/home', 'get', function(response) {
console.log(response);
});
}
});
I think the issue is, your call to the api is firing before the authentication is confirmed. Hopefully moving this function into the getLoginStatus callback should resolve this issue.
You can see more examples here https://developers.facebook.com/tools/console/

Related

Not Able to get email of user logged in via fb account in my site [duplicate]

This question already has an answer here:
Email scope is not working which is used in FB Login
(1 answer)
Closed 7 years ago.
I am making a site to make people login via their Facebook account.
I am able to fetch Name and the users image but I'm not getting users email. Email is returning as undefined. My code for Facebook login is:
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXXX', // Set YOUR APP ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', function(response)
{
if (response.status === 'connected')
{
document.getElementById("message").innerHTML += "<br>";
}
else if (response.status === 'not_authorized')
{
}
});
};
function Login()
{
FB.login(function(response) {
if (response.authResponse)
{
getUserInfo();
getPhoto();
} else
{
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'email,user_photos,user_videos'});
}
function getUserInfo() {
FB.api('/me', function(response) {
var str="You have succesfully logged in<br>";
var name=response.name;
var email=response.email;
console.log(name+email);
});
$(document).ajaxStop(function(){
window.location.reload();
});
}
function getPhoto()
{
FB.api('/me/picture?type=normal', function(response) {
var str="<br/><b>Pic</b> : <img src='"+response.data.url+"'/>";
$('#getphoto').html(str);
});
}
function Logout()
{
FB.logout(function(){document.location.reload();});
}
// 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));
I've tried to get the email by all ways mentioned in Stack Overflow and developers.facebook.com, but failed.
Trigger for the Facebook login:
<img src='img/fblogin.jpg' onclick='login()'>
I tried to alert response properties by
for (key in response){ alert("response["+ key +"]="+ response[key]); }
it is returning name and id not email
I think issue is on your app that you have created on here https://developers.facebook.com/apps/
can you please make below changes first ?
login in https://developers.facebook.com/apps/ and open your app.
Click on "Status & Review" then find this "
Do you want to make this app and all its live features available to the general public?" make it yes.
After that check did you get email or not and let me know.

Facebook Login behaving weird

I have a site that has a login through facebook option
I can't figure out what's wrong, I'm getting two kinds of errors
The first, even though for me it works (Chrome, Explorer) my friend receives a "new_fb_login() not defined" error
And just now I started getting those ambiguous errors (chrome debug):
Unsafe JavaScript attempt to access frame with URL **facebooky URL** from
frame with URL http://site.co.il/. The frame being accessed set
'document.domain' to 'facebook.com', but the frame requesting access did not.
Both must set 'document.domain' to the same value to allow access.
I thought it might have something to do with my site currently password protected, because now when I put the password back I just started getting them, but after disabling back they didn't stop, maybe takes some time to refresh?...
I'd appreciate some light upon this, thanks!
this is my code, right after the tag
<div id="fb-root"></div>
<script>
function new_fb_login() { //
if(!fb_connected){
FB.login(function(response) {
if (response.authResponse) {
fb_connected = true;
console.log('connected'); //Approved the app just now
login(true);
} else {
fb_connected = false;
console.log('cancelled');
}
});
}
else{
FB.api('/me', function(response) {
login(true);
});
}
}
function testAPI() {
console.log('Logged');
FB.api('/me', function(response) {
console.log('Welcome, ' + response.name + '.');
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'MyActualCode', // App ID
channelUrl : '//WWW.site.CO.IL/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) {
if (response.status === 'connected') {
console.log('connected');
fb_connected = true;
//testAPI();
} else if (response.status === 'not_authorized') {
fb_connected = false;
console.log('not_authorized');
//login();
} else {
console.log('not_logged_in');
fb_connected = false;
//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));

Parse Javascript SDK not logging into Facebook

I'm using Parse Javascript SDK to authenticate to Facebook and even though I get a success after login, my Facebook session is not created. Here is the code I use,
<div id="fb-root"></div>
<script>
// Additional JS functions here
window.fbAsyncInit = function() {
Parse.FacebookUtils.init({
appId : 'xxxx', // Facebook App ID
// channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow Parse to access the session
xfbml : true // parse XFBML
});
};
// 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));
function fLogin() {
Parse.FacebookUtils.logIn(null, {
success: function(user) {
alert("login success with user " + JSON.stringify(user));
if (!user.existed()) {
alert("User signed up and logged in through Facebook!");
} else {
alert("User logged in through Facebook!");
}
//FB.api('/me', function(response) {
// alert("got fb me api=" + JSON.stringify(response));
//});
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
}
</script>
<button class="btn-facebook btn-large" onclick="fLogin();"><img src="./img/fb_icon.png"> <span class="btn-facebook-text">Login with Facebook</span></button>
After the popup window opens and I log into Facebook, I get the console message "login success with user " and I can see the access token. However when I try to call FB.api ("/me")... I get an error saying Invalid access token from Facebook.. And When I go back to Facebook, I see that it didn't log me into Facebook either...
If I replace this whole code with FB.init() and FB.login() it works just fine.. Its when I replace it with Parse FacebookUtils that I get the error.
Any help will be greatly appreciated.

JavaScript SDK for Facebook

I want to get the access token for facebook and I got this code from facebook developer website but it can't generate or give me any access token . I use this code in a simple text file not any of my website.
<div id="fb-root"></div>
<script>
<div class="fb-login-button" data-show-faces="true" data-width="400" data-max-rows="1"></div>
window.fbAsyncInit = function() {
FB.init({
appId : '377263832388887', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('auth.authResponseChange', 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;
// TODO: Handle the access token
} 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.
}
};
// 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>
I want to get access token so that I can further proceed for my work. Thank you.
consider using this code provided by http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
replace the FB.Event.subscribe function with the following.
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
// dump success data here, and dump response data if needed
} else if (response.status === 'not_authorized') {
// dump fail data here
} else {
// dump other fail data here
}
});
Although I see on http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/ that the FB.Event.subscribe should also have the access code in its result array. Have you tried dumping the 'response' to console, to view the results?

Authorization window reopens then quickly closes even if already authorized. How to avoid this?

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...
}
}
});

Categories

Resources