I am using the Facebook JS SDK v3.2.0 for an OAuth2 authentication.
I use the following code:
For initialization:
FB.init({
appId: 'MY_APP_ID',
status: true,
xfbml: true,
version: 'v1.0'
});
As a (synchronous) response to a user click on a button:
FB.login(function(response) {
if(response.authResponse) {
console.log('success');
} else {
console.log('error');
}
});
Behavior:
Initially, the dialog popup opens, asking for the basic permissions. When clicking on the "Okay" button in the dialog, a request to facebook is made which returns with 200. Additionally, when using the FB.getLoginStatus(), I see that I am correctly logged in.
However, neither does the popup close nor is my callback function for the login call evoked.
Moreover, re-trying the whole process will result in a blank popup opening which can be resolved by removing my app manually from my list of authorized apps on Facebook's settings page.
Related
For context I am trying to build a small microsite to pull social media insights from Facebook. I am looking to build a Django backend and React front end.
I would like to implement FB login with the Javascript SDK since according to the docs this refreshes the access token each time a FB call is made using the SDK.
I have a very simple login script taken from FB official docs which literally just logs in the user and then outputs the list of accounts the user has access to.
The issue is that, despite refreshing the page (and therefore performing an API request) the data expiration date doesn’t extend (it still displays the date of first login).
Is anyone familiar with the Javascript SDK and whether this is normal behaviour?
function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
console.log(response);
if (response.status === 'connected') { // Logged into your webpage and Facebook.
testAPI();
FB.getAuthResponse(function(response){
console.log(response.authResponse.accessToken);
});
} else { // Not logged into your webpage or we are unable to tell.
document.getElementById('status').innerHTML = 'Please log ' +
'into this webpage.';
}
}
function checkLoginState() { // Called when a person is finished with the Login Button.
FB.getLoginStatus(function(response) { // See the onlogin handler
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID_GOES_HERE',
cookie : true, // Enable cookies to allow the server to access the session.
xfbml : true, // Parse social plugins on this webpage.
version : 'v13.0' // Use this Graph API version for this call.
});
FB.getLoginStatus(function(response) { // Called after the JS SDK has been initialized.
statusChangeCallback(response); // Returns the login status.
});
};
function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
console.log('Welcome! Fetching your information.... ');
FB.api('/me/accounts',
function(response) {
console.log(response)
});
}
function logout_js_user(){
FB.logout(function(response) {
// Person is now logged out
});
};
FB.getLoginStatus does refresh the Token, but not on every Page call. It only refreshes the Token when it is not valid anymore. That is why the expiration data does not change.
You can can a more accurate status with the second parameter of the function set to true, but be aware that this might affect performance:
FB.getLoginStatus(function(response) {
// this will be called when the roundtrip to Facebook has completed
}, true);
If you call FB.getLoginStatus on every page load, be careful not to
set this parameter for each as it will significantly increase the
number of requests to Facebook's servers, and thus decrease the
performance of your application.
Side note: ou can use FB.login to make the login less complicated (in my opinion) - here's an old but still valid article about that: https://www.devils-heaven.com/facebook-javascript-sdk-login/
Hi friends,
I'm developing a website in which Facebook Javascript API is used to send message to our friends.
When the user is logged out of fb,then it shows an error when popping up js API dialog box which is
"Refused to display 'https://www.facebook.com/login.php?api_key=0&skip_api_login=1&display=dialo…cale%3Den_US%26name%3DAnything%26to%3D1791715188%26from_login%3D1&rcount=1' in a frame because it set 'X-Frame-Options' to 'DENY'."
Currenty,I'm using FB.getLoginStatus to detect whether the user is logged out or not. But this will work for only first time,I can't dynamically check it(That means when I logged out of fb account and coming back to the same window and trying to send next message without refresh,it shows the above error.).
Here How Can I dynamically detect that the user is currently logged out. Is there any way to checking FB.getLoginStatus dynamically without page refresh.
I'm showing my code below.
$(document).ready(function(){
window.fbAsyncInit = function() {
FB.init({appId: '**************', xfbml: true, cookie: true,status:true,oauth:true});
/*FB.Event.subscribe('auth.login', function() {
//window.location.reload();
});*/
FB.Event.subscribe('auth.logout', function(response) {
alert('logged out!');
});
};
function facebook_send_message(to,name) { //function called when a button is clicked
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('how to check');
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
send_message(to,name);
}
else if (response.status === 'not_authorized') {
console.log('not_authorized');
// the user is logged in to Facebook,
// but has not authenticated your app
}
else
{
console.log('hi');
FB.login(function(response) {
if (response.authResponse)
{
send_message(to,name);
//getUserInfo(); // Get User Information.
} else
{
console.log('Authorization failed.');
}
},{scope: 'email'});
}
});
}
send_message(to,name); will send message if user is logged in,
Currently for the first time,it works clearly,but from the second time without page refresh and if we logged out from fb, then FB.getLoginStatus still shows response.status as 'connected' and hence error occured.
Waiting for your kind replies.
Thanks in Advance
According to Facebook,
https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/
To improve the performance of your application, not every call to check the status of the user will result in request to Facebook's servers. Where possible, the response is cached. The first time in the current browser session that FB.getLoginStatus is called, or the JS SDK is init'd with status: true, the response object will be cached by the SDK. Subsequent calls to FB.getLoginStatus will return data from this cached response.
This can cause problems where the user has logged into (or out of) Facebook since the last full session lookup, or if the user has removed your application in their account settings.
To get around this, you call FB.getLoginStatus with the second parameter set to true to force a roundtrip to Facebook - effectively refreshing the cache of the response object.
FB.getLoginStatus(function(response) {
// this will be called when the roundtrip to Facebook has completed
}, true);
I am trying to localise the pop-up login box shown using FB.login() under the Javascript SDK but the dialog only displays in English. I use the code below to connect:
var facebookScript = "//connect.facebook.net/fr_FR/all.js"
$.ajaxSetup({ cache: true });
$.getScript(facebookScript, function () {
FB.init({
appId: SOCIAL_FACEBOOK_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 () {
// At some point here FB.login() is called.
}, true);
});
I notice that if I take the URL of the login box and add &locale=fr_FR to it I get the desired result.
Facebook will automatically use the appropriate locale based on information from the users browser and account.
The localized versions of the SDK is mostly to make a few adaptions that need to happen on the third party site, mostly around left-to-right/right-to-left languages, and some labels.
When a user logs out of my site, unless they also log out of their Facebook account, they remain logged in to my site.
I'd like to comply with point 6 of this policy, so how can I log my users out of my site and out of their Facebook accounts for security https://developers.facebook.com/policy/
I have the following code bound to my login button and it's not working - the user is still logged in to FB after clicking. My console shows that the var accessToken is not defined but I'm not sure why. I'm sure I'm doing something fundamentally wrong, would really appreciate some help!
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".logout").click(function () {
FB.init({appId : <?php echo $this->config->item('facebook_appid');?>,
status : true,
cookie : true,
oauth : true,
frictionlessRequests: true});
FB.login(function(response) {
if (response.authResponse) {
console.log(response.authResponse.accessToken);
var accessToken = response.authResponse.accessToken;
}
});
window.location.replace("https://www.facebook.com/logout.php?confirm=1&next=http://www.mysite.com&access_token="+accessToken+"");
});
});
</script>
<div id="fb-root"></div>
To log out of Facebook, you need to use the FB.logout() method.
If you have already called the FB.init() and the FB.login() methods, you don't need to call these again in your click function.
Our Asp.net site has been using the facebook login button (w/ javascript sdk) to handle the login process, and now that Oauth is mandatory (as of Dec 15, 2011 (yesterday))- it is broken. I've made some obvious changes that were mentioned the fb oauth migration blog, but still I'm getting errors. Specifically, when FB.init()'s parameter sets status=false, the auth.login event is never fired (which is a problem, because I use callback on that event to invoke another page which does some server-side open graph queries based on the authorization token in the resulting cookie). If I set status=true, then the event is fired, but the cookie is not set, and so I'm unable to make my server-side open graph queries.
Here's my javascript code (slightly edited...):
window.fbAsyncInit = function () {
FB.init({
appId: GetFacebookAppId(),
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function (response) {
if (response.authResponse && response.authResponse.accessToken)
FacebookLoginRedirect();
});
}
Any ideas?
Thanks!
Try FB.getLoginStatus() instead of if (response.authResponse && response.authResponse.accessToken)
See detaild example here in the docs : ]
Hopefully someone finds this useful- I was able to listen to a different event: auth.statusChange, check the response, and then proceed. One thing was that I had to unsubscribe to this event once I had successfully logged in, but then it seemed to work ok.
listen to auth.statusChange :
FB.Event.subscribe('auth.statusChange', handleStatusChange);