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.
Related
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 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()
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 ?
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'});
}
});
});
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>