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'); }); });
みたいにする