Facebook (FB.login) not requesting my permissions - facebook

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>

Related

Exposing data from facebook SDK to VueJS

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()

Facebook login with IE11

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 ?

FB share after login

When popup for access closed, browser blocking new popup for share. It is possible to give the right and open the window share? (without blocked popup)
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_US/sdk/debug.js', function(){
FB.init({
appId : '856902511027949',
status : true,
cookie : true,
xfbml : true,
oauth : true,
version : 'v2.2'
});
});
function shareViaFbApp() {
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
display: 'popup'
}, function(response){
console.log(response);
});
}
$(".init").on('click', function(event) {
event.preventDefault();
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
shareViaFbApp();
} else {
FB.login(function(response) {
console.log(response);
if (response.authResponse) {
shareViaFbApp();
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'publish_actions'});
}
});
});
I see only one way to get around this problem, create a block like fb popup share after FB.login(), and make share via FB.api().
You should not use FB.login in the asynchronous callback of FB.getLoginStatus. I know that it´s in an example in the Facebook docs, but it´s wrong and modern browsers block it. Use FB.getLoginStatus on page load (to refresh a user session and to check if a user is logged in) and FB.login directly on user interaction (mouse click).
You should not use FB.ui automatically either, only on direct user interaction like FB.login.
Btw, you don´t need to authorize a user for FB.ui, it will work without FB.login too.
So, i find workaround, if you need show share dialog after providing access to your fb app, use display: 'iframe' for this.
function shareViaFbApp(afterAccess) {
var display;
if (afterAccess) {
display = 'iframe';
} else {
display = 'popup';
}
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
display: display
}, function(response){
console.log(response);
});
}
$(".init").on('click', function(event) {
event.preventDefault();
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
shareViaFbApp();
} else {
FB.login(function(response) {
console.log(response);
if (response.authResponse) {
shareViaFbApp(true);
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, {scope: 'publish_actions'});
}
});
});

Facebook xd_arbiter.php JSON.parse

I've put together a test site to try and get facebook login working with the following code, but I get two errors showing up in FireBug which doesn't seem to effect the functionality of the web page when I just ignore them and carry on.
HTML:
<div class="fb-login-button" show-faces="true" autologoutlink="true" width="200" max-rows="1"></div>
<div id="FBLogin"><a id="FBLoginLnk" href="#" title="Login with Facebook"><img src="./login-button.png" /></a></div>
Javascript:
$(document).ready(function(){
$.ajaxSetup({ cache: true });
$.getScript('//connect.facebook.net/en_UK/all.js', function(){
FB.init({
appId: "012345678901234",
status: true, // check login status
channelUrl : '//website.co.uk/bla/channel.php', // Channel File
cookie: true,
xfbml: true, // parse XFBML
oauth: true
});
FB.Event.subscribe('auth.statusChange', function() {
console.timeStamp("Login even")
FB.getLoginStatus(function (response) {
if (response.status === 'connected') {
console.log("Connected Event");
// Good to go
} else if (response.status === 'not_authorized') {
console.log("Not Authorized Event");
NotLoggedIn();
}else{
console.log("Not Logged In Event");
NotLoggedIn();
}
});
});
FB.getLoginStatus(function (response) {
console.timeStamp("getLoginStatus")
if (response.status === 'connected') {
console.log("Connected");
} else if (response.status === 'not_authorized') {
console.log("Not authorised");
NotLoggedIn();
window.location = 'https://graph.facebook.com/oauth/authorize?client_id=012345678901234&scope=publish_stream&redirect_uri=http://www.website.co.uk/bla';
} else {
console.log("User not logged in status unknown");
NotLoggedIn();
window.location = 'https://graph.facebook.com/oauth/authorize?client_id=012345678901234&scope=publish_stream&redirect_uri=http://www.website.co.uk/bla';
}
});
});
$('div#FBLogin').click(function(){
window.location = 'https://graph.facebook.com/oauth/authorize?client_id=012345678901234&scope=publish_stream&redirect_uri=http://www.danthegeek.co.uk/bla';
});
});
function NotLoggedIn(){
console.timeStamp("notLoggedIn Called");
// Reset Website
}
The two errors I'm getting are with xd_arbiter.php?version=27 which seems to get called.
JSON.parse: bad control character in string literal
Line 13
JSON.parse: unexpected non-whitespace character after JSON data
Line 13
As a overview, The intention is to have the page auto-redirect to Facebooks login page (not a pop-up window as this doesn't display correctly on mobile devices). If logged in already, no re-direction happens but user can Log Out which will cause a Login button to be displayed which when clicked goes to the Facebook login page, again no pop-up. This all seems to work fine, but I'm not sure if the code structure is exactly how it should be. I don't believe this to be part of the fault. I really wanted to use the facebook social button to login but couldn't get this to work redirecting to the facebook login page, it only seems to cause a pop-up window which is why I show my own Login with Facebook button.
If it wasn't for firebug halting the code all the time saying there was a error I wouldn't even know there was a problem.
The javascript on my test page is quite complicated but even with everything stripped out and running as above I get this problem.
Any help greatly appreciated.

FB.login() returns null on first call

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.