I'm trying to get the user's email after they press Continue with Facebook on my site. I've looked on Stackoverflow and through the Facebook Developer documentation and cannot see a reason why what I am trying isn't working.
JAVASCRIPT
window.fbAsyncInit = function() {
FB.init({
appId : '1882306058687148',
cookie : true,
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function checkLoginState() {
FB.getLoginStatus(function(response) {
console.log(response);
statusChangeCallback(response)
});
}
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
if (response.status === 'connected') {
runAPI();
}
}
function runAPI() {
FB.api('/me', { locale: 'en_US', fields: 'name, email' }, function(response) {
console.log(response);
document.getElementById('name').value = response.name;
document.getElementById('email').value = response.email;
document.getElementById('fb-login').style.display = 'none'
});
}
** HTML **
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
What's confusing me the most though is that this IS pulling the name through and that is definitely working.
You will only get an email address back if the user has a verified one set in their profile.
And even then, there are apparently some edge cases where privacy settings can still make it not return one at all. Of course, they might not have one set at all, if they registered using only their mobile. If your app needs and email address, then you should implement an additional step for users to input one manually. (Verification is your responsibility as well in that case.)
Related
I'm using facebook javascript SDK, and I have issues in getting the name and email.
When I console log my response it only consists of accessToken, expiresIn, signedRequest, userID. I tried switching to different versions but no luck.
Below is what I tried -
$( document ).ready(function() {
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11&appId=myapp_id&autoLogAppEvents=1'; //used my app id
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
FB.init({
appId : 'App_idd', //used my app id
cookie : true,
xfbml : true,
version : 'v2.11' //also tried v2.4
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function (response) {
console.log(response);
if (response.status === 'connected') {
//get needed fields
} else if (response.status === 'not_authorized') {
} else {
}
});
};
});
Use following function for email and get other fields from here,
FB.api('/me', {fields: 'email'}, function(response) {
console.log(response);
});
/me refers to current user.
I have my sdk set up and the button fires the checkLoginState function but the FB.login doesn't get called. I'm using the latest version (v2.9). I've also tried using 2.8.
I'm guessing it's something to do with it being async but I can't figure out what to do next.
The code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxxxxx',
status : true,
cookie : true,
xfbml : true,
version : 'v2.8'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:login-button onlogin="checkLoginState();" show-faces="false" scope="email,public_profile" width="400"></fb:login-button>
<script type='text/javascript'>
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
if (response.status !== 'connected'){
Facebook_login();
}
else{
console.log(response);
}
}
function Facebook_login() {
FB.login(function (response) { <--- debugger comes here
if (response.status === 'connected') { <----- but not here :-(
//do stuff
}
});
}
The login button performs the login on its own, you do not have to call FB.login yourself when you use that button.
FB.login is for when you want to use your own link/button to trigger login.
And the way you are calling it, inside the callback function of asynchronous methods, it will most likely get blocked by the browser’s popup blocker. If you use FB.login, then you should only ever call it on directly user interaction (i.e., a click on a link/button), and not nest it into any async callbacks.
<span><a onclick="fbLogin()" id="fbLink" class="btn faceebook btn-circle muliregular text-capitalize"><i class="fa fa-facebook"></i> Facebook </a></span>
var global_fb = false;
window.fbAsyncInit = function() {
// FB JavaScript SDK configuration and setup
FB.init({
appId : 'xxxxxxxx', // FB App ID
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use graph api version 2.8
});
// Check whether the user already logged in
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
//display user data
getFbUserData();
}
});
};
// Load the JavaScript SDK asynchronously
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// Facebook login with JavaScript SDK
function fbLogin() {
global_fb = true;
FB.login(function (response) {
if (response.authResponse) {
// Get and display the user profile data
getFbUserData();
} else {
}
}, {scope: 'email'});
}
// Fetch the user profile data from facebook
function getFbUserData(){
FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
function (response) {
$.post('loginwithfacebook',{userData:response},function(data){
if(data.id != ""){
if(global_fb == true){
// do something
}
}
});
});
}
I want to add facebook login to my website. I async load it, and when I check that the person is not logged into my website through facebook I call a function to register them, but I get an error saying my function does not exist... facebook is in an html file, and the method I'm calling (FaceRegister()) is in a javascript file with the same name. I presume this is because of the loading order? Any ideas how to solve this?
Code:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '217518691989396',
xfbml : true,
version : 'v2.8'
}) ;
FB.AppEvents.logPageView();
$(document).trigger('fbload');
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(document).on(
'fbload',
function(){
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
testAPI();
} else {
// The person is not logged into your app or we are unable to tell.
faceRegister();
}
}
I'm trying to get Facebook profile image along with welcome with containing user profile name for my website : www.bolbihari.com.
But only text is showing but not the picture.
This is my code :
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '642539989247175',
xfbml : true,
version : 'v2.6'
});
function onLogin(response) {
if (response.status == 'connected') {
FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id,picture.width(150).height(150)'}, function(data) {
var welcomeBlock = document.getElementById('fb-welcome';);
welcomeBlock.innerHTML = 'Hello ' + data.first_name + ','+ ' Welcome to BolBihari!';
var welcomeImage = document.getElementById('fb-welcome');
welcomeImage.innerHTML = "<img src="' + response.picture.data.url + '"/>";
});
}
}
FB.getLoginStatus(function(response) {
// Check login status on load, and if the user is
// already logged in, go directly to the welcome message.
if (response.status == 'connected') {
onLogin(response);
} else {
// Otherwise, show Login dialog first.
FB.login(function(response) {
onLogin(response);
}, {scope: 'user_friends, public_profile', email'});
}
});
// ADD ADDITIONAL FACEBOOK CODE HERE
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
And this is HTML code for this
<div>
<center><h2 id='fb-welcome'/></center>
</div>
visit my website www.bolbihari.com to view the running text part of this code.
The syntax: response.picture.data.url is invalid since response is undefined variable.
You are collecting the response from FB.api in data variable; so you should be using data.picture.data.url
window.fbAsyncInit = function() {
FB.init({
appId : '154776817xxxxxxx',
xfbml : true,
version : 'v2.1'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function checkLoginState(chackStatus) {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
FB.api('/me?fields=id,name,birthday,email,first_name,gender,hometown,last_name,location,middle_name,picture', function(response) {
console.log('Successful login for: ' + response.name);
});
} else {
FB.login( function(){
FB.api('/me?fields=id,name,birthday,email,first_name,gender,hometown,last_name,location,middle_name,picture', function(response) {
console.log('Successful login for: ' + response.name);
});
},{scope: 'email,user_birthday'});
}
});
}
Facebook Response :
{
"error" : {
"message" : "An active access token must be used to query information about the current user.",
"type" : "OAuthException",
"code" : NumberLong(2500),
"fbtrace_id" : "D3axJ2QxG1h"
},
"image" : "https://graph.facebook.com//picture?type=large"
}
The question is: When exactly do you call checkLoginState? You must call it after FB.init, after the JS SDK is loaded. That being said, there is an issue with FB.login, you are calling it in the asynchronous callback of FB.getLoginStatus - you MUST call it on user interaction instead, or browsers will block the popup. In general, use FB.getLoginStatus right after FB.init and FB.login on user interaction (mouse click).
Also, make sure the user is authorized in the callback of FB.login.
For example: http://www.devils-heaven.com/facebook-javascript-sdk-login/