タグ別アーカイブ: Facebook API connect oauth 2.0

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

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の仕樣がいかに簡単で、整備されているかがわかると思う。