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.
Related
I can't seem to get the permissions for my facebook connection. Here's what I have:
window.fbAsyncInit = function() {
FB.init({
appId : 'myID', // App ID
channelUrl : 'myChannel', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true
});
FB.Event.subscribe('auth.authResponseChange', function(response) {
if (response.status === 'connected') {testAPI();}
if (response.status === 'not_authorized') { FB.login(function(response) {}, {scope: 'email,user_likes'});}
else { FB.login(function(response) {}, {scope: 'email,user_likes'});}
});
};
(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));
When I hit my login button it asks:
MyApp would like to access your public profile and friend list.
What have I done wrong?
When you set the scope you are not giving permissions to the app. You are only telling that permissions that your app will need.
When you click in the login button for the first time, that dialog saying that "MyApp would like to access your public profile and friend list." appear. You need to confirm that you grant that permissions to your app by clicking in the ok button or similar in that dialog.
You should not need to to this again unless you change your application id or key or you manually revoke the authorization for that app in the facebook settings.
My Facebook authentication has stopped working all of a sudden. Has FB changed something? I am running the site from localhost at the moment using FB Javascript SDK. None of the following FB code is working?
alert("got here");
window.fbAsyncInit = function () {
alert("didn't get here");
FB.init({
appId: '102671026556892', // App ID
//appId: '384834001576531', // App ID
channelUrl: '//localhost/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
});
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;
FB.api('/' + uid, function (user) {
if (user) {
loginUser(uid, user.email, user.name);
window.location = "/users/index.html";
}
});
// check an load DB
// 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.
}
});
};
alert("got here too");
// 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));
alert("got here as well");
The alert that are not in the window.fbAsyncInit display fine. The one in the window.fbAsyncInit does not. It doesn't render the login button (code below)
<!-- START of Facebook LOGIN BUTTON -->
<div id="fb-root"></div>
<div class="fb-login-button" data-show-faces="false" data-width="400" data-max-rows="1" data-size="medium" data-colorscheme="light" scope="user_about_me, email, read_stream, publish_actions">Login with Facebook</div>
<!-- END of Facebook LOGIN BUTTON -->
Any help greatly appreciated. It all worked at the end of last week. :(
I have a problem with the authenticated referrals in the Auth Dialog. When a user uses the app for the first time and is requesting authorization, he/she gets "The App will receive: Your basic data." which is different from what is displayed when I preview the Auth Dialog in Facebook developer Apps site. I use the following code:
<script>
// 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));
// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId : '<%= Facebook::APP_ID %>', // App ID
channelUrl : '//'+window.location.hostname+'/channel', // Path to your Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
url = '<%= users_path %>'
// 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
FB.api('/me', function(me){
if (me.name) {
window.open(url);
}
})
} else {
// user has not auth'd your app, or is not logged into Facebook
document.getElementById('auth-loggedout').style.display = 'block';
}
});
// respond to clicks on the login and logout links
document.getElementById('auth-loginlink').addEventListener('click', function(){
FB.login();
});
}
replaced FB.login() with
FB.login(function(response) {
// handle the response
}, {scope : 'user_likes'}); });
I'm trying to enable Facebook login to my site via Javascript but when the user logs in, the Facebook popup doesn't closes. Instead it shows the following message:
An error may have occurred as part of the login process. You can close this window and try returning to the application, though it may ask you to login again. This is likely due to a bug in the application.
If I click again on the login button, everything works fine.
This is my code:
// 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));
// Init the SDK upon load
window.fbAsyncInit = function() {
var doLogin = function (response) {
url = '//'+window.location.hostname+'? access_token='+response.authResponse.accessToken;
window.top.location = url;
};
FB.init({
appId : 'MY_APP_ID', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
oauth : true,
channelUrl : '//'+window.location.hostname+'/static/html/channel.html'
});
FB.Event.subscribe('auth.login', function(response) {
doLogin(response);
})
FB.getLoginStatus(function(response) {
if (response.status == 'connected') {
doLogin(response);
}
}, true);
}
You should try something like this:
https://gist.github.com/3370553
Or you could replace AuthorizeFacebook with "FB.login" from the JS API
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...
}
}
});