JavaScript Advent Calendar 2010 9日目 Facebook Javascript SDK

JavaScript Advent Calendar 2010 9日目 担当の bornknow108 です。

日本でも徐々に盛り上がって…きている Facebook。
興味を持たれている開発者が増えているのではないかと勝手に思っています。
今回は、Facebook の JavaScript SDK をつかって遊ぶための方法についてちょっとだけ書かせていただこうと思います。
※ 事前にFacebook | 開発者で、Facebookアプリケーションの登録が必要です。アプリケーションの登録方法については、割愛させていただきます。

※OAuth2.0対応が必須になったので、いろいろと追記しました。

###STEP1. Javascript SDK を読み込もう！
まず JavaScript SDK を読み込むに当たって、言語コードと国コードを決めておきます。指定した言語コードと国コードをもとに、Facebook 側が出力する文章が翻訳されます。
http://connect.facebook.net/'[言語コード]'_'[国２桁コード]'/all.js
日本語
http://connect.facebook.net/ja_JP/all.js
英語
http://connect.facebook.net/en_US/all.js
簡体字
http://connect.facebook.net/zh_CN/all.js
繁体字
http://connect.facebook.net/zh_TW/all.js

SSLのページで使う場合は、プロトコルを https に変更して読み込みます。
https://connect.facebook.net/en_US/all.js

デバッグしたい時は、all.js の代わりに、core.debug.js を読み込みます。
（en_USだけしか提供されていません。）
http://static.ak.fbcdn.net/connect/en_US/core.debug.js

###STEP2. 初期化しよう！
よみこむ SDK を決めたら次は FB.initメソッドを呼び出して初期化をします。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 決まりごと  -->
<div id="fb-root">
<!-- 日本語、SSLなし、デバッグ無し -->
<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
 FB.init({
  appId : [アプリケーションID]
 , status : true  // ログインステータスを取得する
 , cookie : true  // クッキーを有効にする
 , xfbml : true  // XFBL のパースを有効にする
 , oauth : true // OAuth2.0を有効にする
 });
</script>

SDK ドキュメントにも記述されているのですが、非同期で読み込む場合は以下のようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 決まりごと  -->
<div id="fb-root">
<script type="text/javascript">
 window.fbAsyncInit = function() {
  FB.init({
   appId : [アプリケーションID]
  , status : true  // ログインステータスを取得する
  , cookie : true  // クッキーを有効にする
  , xfbml : true  // XFBL のパースを有効にする
  , oauth : true // OAuth2.0を有効にする
  });
 };
 (function() {
  var element  = document.createElement('script');
  element.async  = true;
  element.src  = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
  document.getElementById('fb-root').appendChild(element);
 }());
</script>

アプリケーションIDは、Facebook でアプリケーションを登録すると割り当てられる一意なコードです。
<div id="fb-root"> は、FB.init を実行するに当たっての決まりごとです。
fb-root を介して、Facebook JavaScript SDK がごにょごにょしています。

###STEP3. 権限をもらおう！
ユーザーの情報を扱うためには、Facebook のデータを扱うための許可をユーザーから取得する必要があります。
そのための方法として、JavaScript を利用する方法と、fbml を利用する方法が提供されています。
また、ユーザーの基本情報以外の情報を使用したい場合は、FB.login や fb:login-button の perms scope パラメータを利用します。
perms scope では、以下のような権限が指定できます。
publish_stream ：ユーザーのウォールとか投稿できるようになる
email ： ユーザーのメールアドレスを教えてもらえる
offline_access ： ユーザーがログインしていなくてもアクセスできるようになる。
(この権限と他の権限を組み合わせれば bot も作れそうです。)

その他の権限や、詳細については、ここを見てください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- JavaScript を利用する方法 -->
<input type="button" value="ログイン" onclick="login();" />
<!-- fbml を利用する方法 -->
<fb:login-button size="medium" perms="publish_stream, email">Connect</fb:login-button>
<!-- 決まりごと、fb-root が気に入らなければ、 ソースを書き換える -->
<div id="fb-root">

<!-- 日本語、SSLなし、デバッグ無し -->
<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
 FB.init({
  appId : [アプリケーションID]
 , status : true  // ログインステータスを取得する
 , cookie : true  // クッキーを有効にする
 , xfbml : true  // XFBL のパースを有効にする
 , oauth : true // OAuth2.0を有効にする
 });

 function login() {
  FB.login(function(response) {
   if (response.session) {
    // ログインした
   } else {
    // ログインしていない
   }
  }, {perms:'publish_stream, email'});
 }
</script>

ログイン処理がOAuth2.0対応

1
2
3
4
5
6
7
8
9
10
function login() {
  FB.login(function(response) {
   if (response.authResponse) { // session から authResponseに変更
    // ログインした
   } else {
    // ログインしていない
   }
  }, {scope:'publish_stream, email'}); // perms から scope に変更
 }
</script>

###STEP4. 権限を破棄する？
現状、FB.login でアプリケーションに許可した権限を破棄するためのメソッドは存在しません。
ちなみに、FB.login と対になる FB.logout は、Facebookからログアウトするためのメソッドです。
権限を破棄するためには、 Facebook Old REST API の Auth.revokeAuthorization を利用します。
Facebook の API を JavaScript SDK で利用するには、 FB.api メソッドを使います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<input type="button" value="ログイン" onclick="login();" />
<input type="button" value="ログアウト" onclick="logout();" />
<input type="button" value="解除" onclick="disconnect();" />
<!-- 決まりごと、fb-root が気に入らなければ、 ソースを書き換える -->
<div id="fb-root">

<!-- 日本語、SSLなし、デバッグ無し -->
<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
 FB.init({
  appId : [アプリケーションID]
 , status : true  // ログインステータスを取得する
 , cookie : true  // クッキーを有効にする
 , xfbml : true  // XFBL のパースを有効にする
 , oauth : true // OAuth2.0を有効にする
 });

 function login() {
  FB.login(function(response) {
   if (response.authResponse) { // session から authResponseに変更
    // ログインした
   } else {
    // ログインしていない
   }
  }, {scope:'publish_stream, email'}); // perms から scope に変更
 }
</script>

 function logout() {
  FB.logout(function(response) {
   // ログアウト後の処理
  });
 }
 function disconnect() {
    // Graph APIを利用する
    FB.api('/me/permissions', 'DELETE', function(response) {
 // 権限の使用許可を破棄したあとの処理
    });
//  FB.api({ method: 'Auth.revokeAuthorization' }, function(response) {
//   // 権限の使用許可を破棄したあとの処理
//  });
 }
</script>

offline_access権限を許可してもらっている場合は、下記のURLを呼び出すことでも権限の委譲を破棄することができます。
https://api.facebook.com/method/auth.revokeAuthorization?access_token=[アクセストークン]&amp;format=json

アクセストークンは、ログイン時のコールバック関数の引数に含まれる session の access_token に格納されています。
ここまでの実装でひとまず、Facebookと連携するためのユーザーへの入口部分が完成です。
あとは、ユーザーの代わりにつぶやいてみたり、イベントの出欠を管理したりなどなどアプリケーションとしていろいろな機能を実装していくことになります。
この他のことについては、またいつかの機会にまとめてみようかと思います。

###最後に
今日までの投稿者の方々の記事を読んで、ほんとに参加してよかったのかとドキドキしながら記事をアップしました。
個人的に、ここ最近Facebookを触ることが多いので、最初の認証周りを簡単にまとめさせていただきました。
どなたかのお役に立つことを祈っております！