How to query a Facebook user picture via Meteor's accounts-facebook?

Question

I'm trying to get the authenticated Facebook user's profile picture, to use within a Meteor application. I've tried the following

Meteor.publish("facebook_avatar_url", function() {
    return Meteor.users.find({_id: this.userId}, {fields: {
        'services.facebook.id': 1,
        'services.facebook.name': 1,
        'services.facebook.gender': 1,
        'services.facebook.picture': 1,
        'services.facebook.picture.data': 1,
        'services.facebook.picture.data.url': 1
    }});
});

and it only returns the id, name, and gender. This seems to be what I want, and the recommended solution. Only problem is there's no data being returned regarding the user's picture.

I tried adding the following to server/server.js, at the suggestion of some other posts, but it a) doesn't seem to be the recommended approach, and b) doesn't seem to be doing anything. So, it seems to be a dead end, but somebody out there seems to think that it can be used to get the profile picture loaded up.

var getFbPicture;

Accounts.loginServiceConfiguration.remove({
    service: "facebook"
});


Accounts.onCreateUser(function(options, user) {
    if (options.profile) {
        options.profile.picture = getFbPicture(user.services.facebook.accessToken);
        user.profile = options.profile;
    }
    return user;
});

getFbPicture = function(accessToken) {
    var result;
    result = Meteor.http.get("https://graph.facebook.com/me", {
        params: {
            access_token: accessToken,
            fields: 'picture'
        }
    });
    if (result.error) {
        throw result.error;
    }
    return result.data.picture.data.url;
};

So, I'm kinda unsure which direction to go at this point. Is this something that needs permissions set on the Facebook Graph API? Or on the Facebook Application? Do I have the syntax wrong in the publication function? Do I need to revisit the onCreateUser function?

Answer 1

Use this instead, you don't need an access token or anything special to get their profile picture, just their facebook user id.

Accounts.onCreateUser(function(options, user) {
    if (options.profile) {
        options.profile.picture = "http://graph.facebook.com/" + user.services.facebook.id + "/picture/?type=large";
        user.profile = options.profile;
    }
    return user;
});

Answer 2

if you want to get picture for facebook

Accounts.onCreateUser(function(options, user) {
    if (typeof(user.services.facebook) != "undefined") {
        user.services.facebook.picture = "http://graph.facebook.com/" + user.services.facebook.id + "/picture/?type=large";
    }
    return user;
});

you can to add this helper function

UI.registerHelper("getImageUser", function (userId) {
    var user= Meteor.users.findOne(userId);
    if (user.services)
    {
        if (user.services.facebook)
            return user.services.facebook.picture;
        if (user.services.twitter)
            return user.services.twitter.profile_image_url;
        if (user.services.google)
            return user.services.google.picture;
    }
    else
    {
        return "images/withOutPhoto.png";
    }
});

in your html

<img src="{{getImageUser this._id}}" alt="...">