FacebookのJavaScript SDKがOAuth 2.0サポート

FacebookのJavaScript SDKがOAuth 2.0サポート

Posted at July 27,2011 3:17 AM
Tag:[Facebook, OAuth]

2011年7月22日より、FacebookのJavaScript SDKがOAuth 2.0サポートを開始しました。

Updated JavaScript SDK and OAuth 2.0 Roadmap
開発者ブログ

以下、上記の記事からの抜粋です。

1.OAuth 2.0の有効化

まず、OAuth 2.0を有効にするには、FB.initにoauthパラメータを追加します。

FB.init({
   appId : YOUR_APP_ID,
   // other parameters,
   oauth : true
});

2.レスポンスデータ

OAuth 2.0を有効にした場合、レスポンスデータのsessionをauthResponseに置き換える必要があります。

sessionの利用

FB.login(function(response) {
  if (response.session) {
    console.log("User is connected to the application.”);
    var accessToken = response.session.access_token;
  }
});

authResponseの利用

FB.login(function(response) {
  if (response.authResponse) {
    console.log("User is connected to the application.”);
    var accessToken = response.authResponse.accessToken;
  }
});

3.FB.getLoginStatus

FB.getLoginStatusは、接続ユーザーのsessionの代わりにauthResponseを受信することを除いて、以前と同様に動作します。

サンプルは次の通りです。

FB.getLoginStatus(function(response) {
  if (response.status === 'connected') {
    // the user is logged in and connected to your
    // app, and response.authResponse supplies
    // the user’s ID, a valid access token, a signed
    // request, and the time the access token 
    // and signed request each expire
    var uid = response.authResponse.userID;
    var accessToken = response.authResponse.accessToken;
  } else if (response.status === 'not_authorized') {
    // the user is logged in to Facebook, 
    //but not connected to the app
  } else {
    // the user isn't even logged in to Facebook.
  }
});

4.サンプルコード

下は、OAuth 2.0の完全なサンプルです(元記事から若干変更しています)。このサンプルはFacebookページ「小粋空間」の「OAuth 2.0 sample」でお試しください(SSLにも対応しています)。

<!DOCTYPE html> 
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>New JavaScript SDK</title>
</head>
<body>
<div id="fb-root"></div>
<h2>Updated JS SDK example</h2>
<div id="user-info"></div>
<p><button id="fb-auth">...</button></p>
 
<script>
(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: '196288800426188',
        status: true, 
        cookie: true,
        xfbml: true,
        oauth: true
    });
 
    function updateButton(response) {
        var button = document.getElementById('fb-auth');
        var userInfo = document.getElementById('user-info');
        if (response.authResponse) {
            //user is already logged in and connected
            FB.api('/me', function(response) {
                userInfo.innerHTML = '<img src="https://graph.facebook.com/'
                  + response.id + '/picture" style="margin-right:5px" />'
                  + response.name;
                button.innerHTML = 'Logout';
            });
            button.onclick = function() {
                FB.logout(function(response) {
                    userInfo.innerHTML="";
                });
            };
        } else {
            //user is not connected to your app or logged out
            button.innerHTML = 'Login';
            button.onclick = function() {
                FB.login(function(response) {
                    if (response.authResponse) {
                        FB.api('/me', function(response) {
                            userInfo.innerHTML = 
                              '<img src="https://graph.facebook.com/' 
                              + response.id + '/picture" style="margin-right:5px" />'
                              + response.name;
                        });
                    } else {
                        //user cancelled login or did not grant authorization
                    }
                }, {scope:'email'});
            }
        }
    }
    // run once with current status and whenever the status changes
    FB.getLoginStatus(updateButton);
    FB.Event.subscribe('auth.statusChange', updateButton);
};
</script>
</body> 
</html>

5.ロードマップ

ロードマップによると、7月22日時点ではJavaScript SDKの他に、次の点が変更されています。

  • アプリの「Migration(移行)」項目の変更
  • 設定項目の「OAuth 2.0 for Canvas」を「signed_request for Canvas」にリネーム
  • 「OAuth Migration」の追加
  • 新しいアプリ作成では「OAuth Migration」をデフォルトで「有効」に設定

マイアプリ」の設定画面
マイアプリの設定画面

開発者アプリ」の設定画面
開発者アプリの設定画面

7月29日には、PHP SDKのクッキーフォーマットがバージョンアップされる予定です。

関連記事
トラックバックURL


コメント

サンプルコード非常に参考になりました。
Safariでログインしてトップに飛ぶとリダイレクトループしてしまうのですが、これはサンプルコード以外に何か処理を施す必要があるのでしょうか?


[1] Posted by 大塚一輝 : August 19, 2011 10:30 PM

>大塚一輝さん
参照くださりありがとうございます。
ご質問の件ですが、「トップ」というのはFacebookの大塚さんのホームのことでしょうか。申し訳ありませんがこちらでは同様の事象が確認できておりません。
動作の不具合についてはFacebook側のバグである可能性があり、個人的にはサンプルコードに処理を施す必要はないと思います。
それではよろしくお願い致します。

[2] Posted by yujiro logo : August 21, 2011 11:39 PM

お返事遅くなりました、お答え頂きありがとうございます。

>動作の不具合についてはFacebook側のバグである可能性があり、個人的にはサンプルコードに処理を施す必要はないと思います。

確かに開発中Facebook自体不安定でしたので、そうなのかもしれません。
おかげさまで現在解決に至っております。
また何かありましたらどうぞよろしくお願いします。

[3] Posted by 大塚一輝 : October 23, 2011 2:46 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)