Facebook javascript SDKでのユーザー認証方法

サーバー側でのアクセストークンの取得は、認証ダイアログへのリダイレクト処理やリダイレクト後のcode処理など、若干面倒な処理が多いです。

そこでjavascript SDKの使用によって、クライアントサイドで画面遷移なしで簡単にアクセストークンの取得、apiアクセスする方法を紹介したいと思います。

javascript SDKの埋め込みは下記のように行います。

(function(d){
	var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
	if (d.getElementById(id)) {return;}
	js = d.createElement('script'); js.id = id; js.async = true;
	js.src = "//connect.facebook.net/ja_JP/all.js";
	ref.parentNode.insertBefore(js, ref);
}(document));

使用準備は下記のように行います。

window.fbAsyncInit = function() {
    FB.init({
      appId      : "登録したアプリのID",
      status     : true,
      cookie     : true,
      xfbml      : true
    });
};

これだけでもうjavascriptSDKを使用することができます。
それでは試しにメールアドレス取得のパーミッションでログイン認証して、アクセストークンを取得してみましょう。

FB.login(
	function(response) {
		if (response.authResponse) {
			console.log( response.authResponse.accessToken );
		} else {
			//未認証時の処理
		}
	},
	{ scope: 'email' }
);

ログイン認証後に、FB.apiを使ってapiリクエストをすることができます。
メールアドレスの取得は下記のようなコードでできます。

FB.api('/me?fields=email', function(response) {
  console.log(response.email);
});

javascriptSDKで取得したアクセストークン使用してサーバーサイドで処理を行いたい場合は、Ajax等でアクセストークンをサーバーサイドに渡し、 サーバーサイドでapiリクエスト時に、渡されたアクセストークンを設定することで可能です。