Home > Tips > Facebook APIのつかいかた (OAuth 2.0)

Facebook APIのつかいかた (OAuth 2.0)

  • Posted by: nakamura
  • 2011年2月28日 01:12
  • Tips

FacebookのAPI、以外と日本にまとまった文献が少ない。

日本語版が少ないのと、コロコロ仕樣が変わっているせいだ。

「Facebook Connect API」なんかで検索しても、ぜんぜんいいページに辿りつかないので書く。

Twitterにくらべて、FacebookのOauth2.0 APIは、すごく簡単にできている。

Twitterもそうだが、「認証して見れるデータ」と「認証しなくても見れるデータ」の2種類がある。
認証しなくても見れるデータのほうが、セキュリティも低いし、入力もプログラムもカンタン。



■認証しない系

たとえば、ぼくの基本情報は、

https://graph.facebook.com/hiroki.nakamura

https://graph.facebook.com/●●●●
こんだけ。
これで、基本情報がJSON形式で、充分とれる。

さらに、
https://graph.facebook.com/hiroki.nakamura?fields=picture
で、写真のURLも取得できる。


https://graph.facebook.com/hiroki.nakamura/picture
で、写真そのものにアクセスできる。なんてカンタン。

フィードやらイベントも、ぜんぶこの型。
たとえば、

        * Users: https://graph.facebook.com/btaylor (Bret Taylor)
* Pages: https://graph.facebook.com/cocacola (Coca-Cola page)
* Events: https://graph.facebook.com/251906384206 (Facebook Developer Garage Austin)
* Groups: https://graph.facebook.com/195466193802264 (Facebook Developers group)
* Applications: https://graph.facebook.com/2439131959 (the Graffiti app)
* Status messages: https://graph.facebook.com/367501354973 (A status message from Bret)
* Photos: https://graph.facebook.com/98423808305 (A photo from the Coca-Cola page)
* Photo albums: https://graph.facebook.com/99394368305 (Coca-Cola's wall photos)
* Profile pictures: http://graph.facebook.com/hiroki.nakamura/picture (your profile picture)
* Videos: https://graph.facebook.com/614004947048 (A Facebook tech talk on Tornado)
* Notes: https://graph.facebook.com/122788341354 (Note announcing Facebook for iPhone 3.0)
* Checkins: https://graph.facebook.com/414866888308 (Check-in at a pizzeria)
くわしくは、Graph APIをどうぞ。




■認証する系
フィードやウォールに書き込んだり、likeしたりする、アクティビティ系や、
Facebookにログインしないと見れない情報をするときには、認証が必要だ。

(1)アプリ登録
まずは、登録させるサービス名をアプリとして、Facebookに登録しよう。
ここから

001.gif

で、なんかこんな感じになるはず。

002.gif

大事なのは、アプリIDと、APIキー、シークレット、URL。を控えておこう。

あとは適当でいい。

(2)認証部分
認証のドキュメントが、実はかなりわかりやすくなっている。
これでも眠くなっちゃう人は、要するにこれだ。



<?php

    $app_id = アプリID;
    $app_secret = "シークレットキー";
    $my_url = "サービスのURL";

    $code = $_REQUEST["code"];

    if(empty($code)) {
        $dialog_url = "http://www.facebook.com/dialog/oauth?client_id="
            . $app_id . "&redirect_uri=" . urlencode($my_url);

        echo("<script> top.location.href='" . $dialog_url . "'</script>");
    }

    $token_url = "https://graph.facebook.com/oauth/access_token?client_id="
        . $app_id . "&redirect_uri=" . urlencode($my_url) . "&client_secret="
        . $app_secret . "&code=" . $code;

    $access_token = file_get_contents($token_url);

    $graph_url = "https://graph.facebook.com/me?" . $access_token;

    $user = json_decode(file_get_contents($graph_url));

    echo("Hello " . $user->name);

?>

これをPHPにして貼れば、$userに、ほしい情報がブチこまれていることであろう。

さらにいいのは、これ。


<html>
<head>
<title>Client Flow Example</title>
</head>
<body>
<script>

var appId = "YOUR_APP_ID";

if(window.location.hash.length == 0)
{
url = "https://www.facebook.com/dialog/oauth?client_id=" +
appId + "&redirect_uri=" + window.location +
"&response_type=token";
window.open(url);

} else {
accessToken = window.location.hash.substring(1);
graphUrl = "https://graph.facebook.com/me?" + accessToken +
"&callback=displayUser"

//use JSON-P to call the graph
var script = document.createElement("script");
script.src = graphUrl;
document.body.appendChild(script);
}

function displayUser(user) {
userName.innerText = user.name;
}
</script>
<p id="userName"></p>
</body>
</html>

もうJSでぜんぶやってくれちゃう。
基本、これでやるのがいいんじゃなかろうか。

「ぜんぜんカンタンじゃねーじゃん」とお嘆きの諸兄もいるかと思うが、Twitterの仕樣を見てほしい。Facebookの仕樣がいかに簡単で、整備されているかがわかると思う。

Comments:0

Comment Form

Search
Feeds

Return to page top