I am trying to implement a simple login with facebook SDK functionality within a website that uses VueJS2.0.
The code that I have in the component that handles this is basically taken from FB SDK Quickstart:
onLoginPress() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
console.log('Logged in.');
} else {
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.');
}
});
}
});
Now I wonder - how should I provide the response from FB api back to the VueJS? I see that this inside those function calls points at the Window, but I dont have access to Vue.
Vue is initialized with the following code:
/* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App)
})
This is window there because the function that the FB executes is done within the global context.
To solve this, in the line before the first FB assign a variable to this, which will be your reference to the Vue instance.
let vm = this:
FB......
Then you can do normal dispatches and such from Vue via vm.someMethod()
I'm using the Facebook SDK to implement login.
// Here we run a very simple test of the Graph API after login is
// successful. See statusChangeCallback() for when this call is made.
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
console.log(response);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + response.email + response.id + '!';
});
FB.api('/me/permissions', function(response) {
console.log(response);
});
}
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
The item that gets returned from response.id is not the same as my Facebook user ID when I look at the Graph Explorer here: https://developers.facebook.com/tools/explorer?method=GET&path=me%3Ffields%3Did%2Cname%2Cemail&version=v2.5.
Why is that?
You probably selected the "Graph Explorer" App in the API Explorer. Select your own app in the dropdown and you will get the same ID. It´s an "App Scoped ID". See the changelog for v2.0 to find out about those: https://developers.facebook.com/docs/apps/changelog#v2_0
Trying to login to Facebook from my app using the following code -
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, public_profile' });
It worked fine with IE11 until I upgrade from Windows 7 to Windows 10.
Now it opens the FB login dialog, I sign in with my credentials and the dialog does not close and I am not signed in.
Any idea why ?
I have this js:
$(document).ready(function () {
$('.login-link').click(function () {
FB.login(function(response) {
console.log(response);
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(resp) {
console.log('Good to see you, ' + resp.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'email'});
});
});
which is bound to <div class="login-link">FB modal login</div>
The problem is when I click the button the FB.login and authorize the app the response.authResponse is null and response.status is not_authorized. If I click it again or refresh the page it shows user has authorized the app but obviously I need it the first time. The code is taken from Facebook with minor modifications.
Any ideas how to solve this?
Just wanted to show a workaround on this issue if someone else is also struggling on it.
$(document).ready(function () {
$('.login-link').click(function () {
FB.login(function(response) {
FB.getLoginStatus(function (resp) {
console.log(resp);
}, true);
}, {scope: 'email'});
});
});
I leave my question open because it doesn't really answers the question why FB.login is not working but at least provides a temporary solution.
so after updating to the php 3.0 sdk and what not, my FB.login() function no longer asks for the permissions I set it to ask. Any one else getting this? Here's some code for you:
window.fbAsyncInit = function() {
FB.init({
appId: 'xxx',
status: true,
cookie: true,
xfbml: true,
oauth : true // enables OAuth 2.0
});
// whenever the user logs in, we refresh the page
//FB.Event.subscribe('auth.login', function() {
// window.location.reload();
//});
};
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 + '.');
FB.logout(function(response) {
console.log('Logged out.');
});
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope:'read_stream,publish_stream,offline_access'});
The way I'm trying to access it, is through an onClick="FB.login();". Can anyone help?
Checking the source of the JS SDK I found that they still use perms and not scope as it it documented.
This is working for me:
...onclick="FB.login(handleLoginResponse,
{perms:'email,manage_pages,user_birthday'});return false;"...
I hope it helps.
I see something related to this with the JS SDK. When setting oauth=true, the function
FB.login(function (response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, { scope: 'email,publish_stream,user_birthday,user_location' });
Correctly requests the extended permissions, but using the <fb:login-button> FBXML with scope="email,publish_stream,user_birthday,user_location" does not.
This looks like a Facebook bug to me...
My problem was similar to you.
I have checked all my javascript to verify if my scope was good in FB.login definition.
Finally I realized that I have a Facebook button in my HTML.
<form class="form-signin"><fb:login-button size="large">Facebook</fb:login-button></form>
When I have also defined the scope in the FB Button, Facebook ask me correcty to accept new permissions if I change my scope
<form class="form-signin"><fb:login-button size="large" scope="<?php print($sFacebookScope);?>">Facebook</fb:login-button></form>
I think its because you are calling FB.logout within the FB.login block.
Effectively what happens is as soon as they log in, they are logged out.
So seperate it like this:
// CALLED WHEN USER LOGS IN
function userLogin() {
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:'read_stream,publish_stream,offline_access'});
}
// CALLED WHEN USER LOGS OUT
function userLogout() {
FB.logout(function(response) {
console.log('Logged out.');
});
}
I had exactly the same problem until I realized that it was a matter of browser/facebook caching problem. Make sure you have the latest code in your webspace and test your app in a new browser if might be the solution of your problem.
The only solution that has worked for me was putting the permissions in the login button tag like this:
<fb:login-button show-faces="true" width="200" max-rows="1" data-scope="email">< /fb:login-button>