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リクエスト時に、渡されたアクセストークンを設定することで可能です。