スポンサーサイト

-------- --:--:-- --

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【Javascript】JavascriptSDKを利用してFacebookにアクセスする

2011-06-24 01:23:02 Fri

追記2012/01/30 18:28:00
今更ですが、この記事の内容はもう古くなっております。
2011年10月頃にFacebookの認証API仕様が大幅に変更されました。
その対応を行っていないため、下記の内容はもう価値がない内容となっております。
他の方の記事を参考にしてください。
http://oauth.jp/facebook-oauth-migration
http://mbdb.jp/hacks/facebook/facebook-dev-change-20120101.html
こんなに互換性のない仕様変更が多いサービスはお金もらってないと互換性アップのための開発なんてやってられないですね。
twitterはなんだかんだいってAPIのレスポンスや振る舞いが変わっていても互換性を持ったバージョンアップなんですよね。

Facebookの関連記事


JavascriptSDKを利用してFacebookにアクセスする
Facebookへ外部サイトからアクセスする際の基本的知識について
【Java】JavaでFacebookにアクセスする方法
【Facebook】携帯電話でのアカウント認証をやり直す


JavascriptSDKを利用してFacebookにアクセスする



1.初期化

<body>
<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
// Facebook JavaScript SDK の初期化。
FB.init({
	appId  : 'YOUR_APP_ID',
	status : true, // check login status
	cookie : true, // enable cookies to allow the server to access the session
	xfbml  : true  // parse XFBML
});
・
・
・
</script>
</body>


→初期化はBODYタグの中でする。
HEADだとドキュメントの描画とは別スレッドで走ってしまい、
fb-rootのエレメントが生成されていない可能性があるため。

2.ログインでOAuth認証

$(document).ready(function() {
	loginCheck(init);
});

function init(login){
	if(login){
		//ログインしている
	} else {
		//ログインしていない
		//ログインしてもらう
		FB.login(function(response) {
			if (response.session) {
				//ログイン成功
				if (response.perms) {
					//パーミッションもOK
					// user is logged in and granted some permissions.
					// perms is a comma separated list of granted permissions
					alert('ログインOKで権限もOK');
				} else {
					//パーミッションはNG
					// user is logged in, but did not grant any permissions
					alert('ログインOKで権限はNG');
				}
			} else {
				//ログイン失敗
				// user is not logged in
				alert('ログインNG');
			}
		}, {perms:'manage_friendlists,publish_stream,offline_access'}); // 使用する権限を列挙しておく。※1
	}
}

function loginCheck(fnk){
	return FB.getLoginStatus(function(response) {
		if (response.session) {
			return fnk(true);
		} else {
			return fnk(false);
		}
	});
}



※1
使用する権限を列挙しておく。
権限によって読めない書けないということがあるため、
やりたいことを実現するためにどんな権限が必要なのか事前に知っておく必要がある。
権限一覧はこちらを参照。
必要な権限を知るためにはhttp://developers.facebook.com/docs/reference/api/album/などobjectsのそれぞれを参照。

3.OAuth認証したアカウントのウォールに投稿してみる

function post(){
	var url = 'me/feed';
	var method = 'post';
	var data = {
		 message: 'message'
		,name: 'Name area'
		,link: 'http://isann.blog2.fc2.com/'
		,picture: 'http://hoge.com/hoge.jpg'
		,caption: 'Caption area'
		,description: 'Description area'
	};
	var cbFnk = postNext;
	FB.api(url, method, data, cbFnk);
}


こんな感じ。
urlで指定している「me/feed」はOAuth認証しているユーザのフィードを意味している。
methodの「post」で投稿を意味し、dataでパラメータを与えている。

他にも「user_id/feed」とかでもいける。
もちろん、ユーザーネーム(ユニークURL)でも大丈夫です。

なお、POSTできるメソッドは下記。(Publishingを参照)
http://developers.facebook.com/docs/reference/api/
PublishingのMethodは上記ソースのurl、Argumentsがdataになります。
権限に関してはDescriptionのリンクを参考にし、足りない場合はログイン時の権限を追加します。

常に決まったアカウントから投稿などする場合、事前にOAuth認証をしておいて、
アクセストークンを取得しておきます。
当然、そのアクセストークンはずっと使える必要があるので有効期限が必要ないように
次の権限をアプリケーションとして許可してもらう必要があります。
「publish_stream」「offline_access」
これでアクセストークンは無期限になるのですが、
(実質的には長期間であり無期限ではないのですが、便宜上無期限としておきます。アクセストークンが無効になった際を考えて、このアクセストークンは設定ファイルやデータベースなどにもっておいたほうが良いと思います。)
このアカウントがOAuth認証したFacebookアプリケーションを削除するとアクセストークンは無効になって
もう一度Facebookアプリケーションを登録しなおし、アクセストークンを取得しなおす必要があることに注意しないといけないです。

なお、アカウントではなく特定のアプリケーションやページから投稿などする場合は下記のApp LoginやPage Loginを参考にしてアクセストークンを取得します。
http://developers.facebook.com/docs/authentication/


しかし、、、無期限のアクセストークンをJavascriptなどクライアント側に埋め込むと誰でもそのアクセストークンを利用してそのアカウント情報を読み込んだり書き込んだりできるため、これらはサーバ側から行わないといけないです。
PHPやPythonなどは公式のSDKがあるので楽だと思います。
Javaでは、【Java】JavaでFacebookにアクセスする方法を参考にしてください。
JavascriptSDKとJavaライブラリのRestFBを組み合わせることでSSLなしの状態でも現在実現できました。
「●Facebookのセッションキーをもとにしてサーバ側でアクセストークンを取得する場合」を参照してください。
単純にユーザにログインしてもらってフィードに投稿するなどの処理であればJavascriptSDKのみで良いと思います。

おまけ


JavascriptSDKを利用せずにFacebookのOAuth認証やるのはこちらがよくまとまっています。
このアクセストークンがあれば、サーバ側からでもFacebookにアクセスできます。
ただ、セキュリティ的なところが色々と気になってきますので、セッションキーをサーバに送信して、サーバ側でアプリIDとアプリシークレット(アプリの秘訣)をもとにしてアクセストークンを取得する上述のリンク先のやり方が良いと思います。
スポンサーサイト

⇒comment

Secret

名言集
全記事(数)表示
全タイトルを表示
ブログ内検索
Loading
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。