Facebookアプリ開発に挑戦（その6・Permissions取得の事例）

先日のPermission取得の続きとして、実際の例を紹介します。
ユーザーがウォールに投稿した情報を取得し、一覧表示するようなプログラムを作ります。

1.必要なAPIとPermissions

ユーザーがウォールに投稿した情報を読み込むには、Posts（https://graph.facebook.com/me/posts）のAPIにアクセスします。
このAPIにアクセスすると、投稿のオブジェクトが配列として返されます。
配列の名前は、「data」になっています。
その配列から、個々の投稿の情報を読み込むことができます。

また、PostsのAPIにアクセスするためには、「read_stream」のPermissionsが必要です。
したがって、FB.login関数でアプリケーションの許可を得る際に、read_streamのPermissionも指定します。

2.実際のプログラム

ここまでの話に基づいて、実際のプログラムを作ると、以下のようになります。

(function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol +
    '//connect.facebook.net/ja_JP/all.js';
  document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
  FB.init({
    appId: 'アプリケーションのID',
    status: true,
    cookie: true,
    xfbml: true
  });
  FB.getLoginStatus(function(response) {
    var perms_a = eval("(" + response.perms + ")");
    var perms = {};
    for (var i = 0, j = perms_a.extended.length; i < j; i++) {
      perms[perms_a.extended[i]] = true;
    }
    if (response.session && perms.read_stream) {
      FB.api('/me/posts', function(response) {
        var html = '<ul>';
        for (var i = 0, j = response.data.length; i < j; i++) {
          html += '<li>' + response.data[i].message + '<br>' + response.data[i].created_time + '</li>';
        }
        html += '</ul>';
        jQuery('#login')
          .html(html)
          .show();
      });
    }
    else {
      jQuery('#not_login').show();
      jQuery('#login_button').click(function() {
        FB.login(
          function(response){
            if (response.session) {
              top.location.href = 'アプリケーションのアドレス';
            }
          },
          { perms : 'read_stream' }
        );
      });
    }
  });
}

2-1.許可されているかどうかの判断

アプリケーションが許可されているかどうかは、14行目以降のFB.getLoginStatus関数の部分で判断します。
20行目の「if (response.session && perms.read_stream)」のif文で、アプリケーションが許可されていて、かつread_streamのPermissonを得ているかどうかを判断します。

2-2.許可されているときの処理

アプリケーションが許可されているときには、20行目のif文の条件が成立し、21～30行目が実行されます。

まず、21行目のFB.api関数でPostsのAPIを呼び出します。
そして、22行目以降のコールバック関数の中で、得られた結果をもとにHTMLを組み立てて、IDが「login」のdiv要素に流し込みます。

2-3.許可されていないときの処理

一方、アプリケーションが許可されていないか、許可されていてもread_streamのPermissonsがないときには、31行目以降に処理が進みます。

この場合は、「このアプリケーションを許可する」のボタンを表示し、それがクリックされたときに、FB.login関数を実行して、許可を求めるようにしています。
41行目に「{ perms : 'read_stream' }」とありますので、許可を求めるダイアログボックスには、read_streamのPermissionsを求めるメッセージ（ニュースフィードの投稿へのアクセス）が表示されます。

お知らせ