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 ?
Related
I am trying to ascertain whether a user is logged into Facebook using the JS SDK.
The call to FB.getLoginStatus always returns status="unknown", even when I know
I am logged into Facebook - literally, I have my Facebook home page open in the
next browser tab.
I am loading the API like this:
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
And in my JS code:
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
}
function statusChangeCallback( response )
{
console.log("login status change callback: ", response);
if (response.status === 'connected')
{
testAPI();
}
else if (response.status === 'not_authorized')
{
// Not authorized, so show the login button
show_block( ".loginScreen" );
}
else
{
// nothing doing
show_block( ".loginScreen" );
}
} // end statusChangeCallback()
window.fbAsyncInit = function() {
FB.init({
appId : <my app id>,
cookie : true,
xfbml : true,
status : true,
version : 'v12.0'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
My console window shows:
login status change callback: {authResponse: null, status: 'unknown'}
Why would I be getting a "unknown" status here? I have Facebook open in the next browser tab, so I know that I'm logged in.
I know some Facebook users doesn't have email address. They can use phone number. Anyway, I can't figure out in which part of code I should add {scope: 'email'} in this official JS example.
https://developers.facebook.com/docs/facebook-login/web
I figured out. Solution is to add email param here
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me?fields=name,email', function(response) { //<-HERE ?fields=name,email
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + response.id + response.email +'!';
});
}
FB.login(function(response) {
// handle the response
}, {scope: 'email'});
It´s right there in the docs, just scroll down a bit.
...or with an arrow function:
FB.login((response) => {
// handle the response
}, {scope: 'email'});
After authorization, you can get the email with this API call:
FB.api('/me', {fields: 'name,email'}, (response) => {
console.log(response.email);
});
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
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>