slowjet

is a part of a carburetor

Facebook API (JS SDK) からユーザーの情報を取得したいときのメモ

以下はすべてFacebook DeveloperのサイトからAppの登録を済ませて、App IDを取得した前提ですすめてます。

データ取得はだいたいFB.apiで取れる。FB.apiとか使う場合は、先にFB.init()実行して、そのあとFB.login()でAuthする必要がある。

FB.init({
    appId      : YOURAPP_ID, // App ID
    channelUrl : '//YOURAPP_URL/channel.html', // Channel File
    status     : true, // check login status
    cookie     : true, // enable cookies to allow the server to access the session
    xfbml      : true  // parse XFBML
});

この後続けて書く

FB.login(function(res) {
    if ( res.status !== 'connected' ) return;
    // ここから書ける
    FB.api('/me', function(res) {
        // ユーザーの基本データ
    });
});

そのままで取れるのは基本データだけで、他のデータを取得したい場合は、パーミションの設定が必要。

たとえば

  • 自分(Authした本人)のストリーム
  • 自分の写真
  • 友だち一覧

を取得したい場合は、

  • read_stream
  • user_photos
  • read_friendlists

を指定する必要がある。パーミションはFB.login()の二つ目の引数でscopeというキーのハッシュで渡す。値はカンマ区切りでひとつの文字列にする必要があるので、次の例みたいに前もってscopeを用意しておいて、渡すときにつなげたりすると見やすそう。

var scope = [
    'read_stream',
    'user_photos',
    'read_friendlists'
];

FB.login(function(res) {
    if ( res.status !== 'connected' ) return;
    FB.api('/me', function(res) {
        // ユーザーの基本データ
    });
    
    FB.api('/me/home', function(res) {
        // ユーザーのストリーム
    });
    
    FB.api('/me/photos', function(res) {
        // ユーザーの写真
    });
    
    FB.api('/me/friends', function(res) {
        // ユーザーの友だち一覧
    });
}, { scope: scope.join(',') });

こんな感じ、さらにユーザーの友だち一覧からプロフィールアイコンを取得したい場合は、

と組み合わせて

FB.api('/me/friends', function(res) {
    if ( !res.data ) {
        return;
    }
    // ループに Underscore.js 使ってる
    _.each(res.data, function(obj, i) {
        if ( i > 5 ) return;
        console.log(obj.name, 'https://graph.facebook.com/' + obj.id + '/picture?type=large');
    });
});

みたいにする