たぶん1時間でできるマッシュアップ講座たぶん1時間でできるマッシュアップ講座

mixiのソーシャルグラフをChart APIでオープンに


株式会社リクルート メディアテクノロジーラボ
永田 智章
2011/10/17

【15〜20分】jQueryでAuthorization Codeを取得!

- PR -

 まずは、クライアント側の「mixi.html」を書き換えます。「mixi Graph API」の認証認可手順の「認可とAuthorization Codeの入手」に沿って、Authorization Codeを取得するためのログイン機能を作ります。

 今回は、友人のプロフィール情報を取得するため、「mixi Graph API」の中の「People API」を使用します。「People API」および「scope」パラメータの値に関しての詳細はmixiのPeople APIの仕様を参照してください。

 ログイン用のリンクは静的に書いてもいいのですが、ここでは今後追加する機能に備えてJavaScriptで生成するようにしておきます。

 また、下記のコードの「CONSUMER_KEY」の値はダミーですので、先ほどmixiのパートナー登録時に確認した「Consumer Key」の文字列に書き換えてください。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>マイミクグラフ</title>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var LOGIN_URL_BASE = 'https://mixi.jp/connect_authorize.pl';
var CONSUMER_KEY = '12345678901234567890';
var RESPONSE_TYPE = 'code';
var SCOPE = 'r_profile r_profile_gender r_profile_birthday r_profile_blood_type r_profile_location r_profile_hometown r_profile_occupation r_profile_interests r_profile_organizations';
var DISPLAY = 'pc';

function createLoginURL(login_url_base, client_id, response_type, scope, display) {
var params = {client_id: client_id, response_type: response_type, scope: scope, display: display};
return login_url_base + '?' + $.param(params);
}

$(document).ready(function() {
$('#login').click(function() {
location.href = createLoginURL(LOGIN_URL_BASE, CONSUMER_KEY, RESPONSE_TYPE, SCOPE, DISPLAY);
});
});
</script>
</head>
<body>
<div>
<a id="login" href="#">login</a>
</div>
<div id="data">
</div>
</body>
</html>

 今回は開発時間を極力短くするために、JavaScriptの代表的なライブラリであるjQueryを使用しています(グーグルにホスティングされているjQueryを使用しています)。jQueryについて詳しく知りたい方は、以下の記事やjQuery日本語リファレンスが参考になるかと思います。

 ここまでできたら、いったんmixi.htmlをサーバに配置して、Webブラウザでアクセスしてみてください。「login」というリンクをクリックすると、mixiのログイン画面に飛んだでしょうか?

 このログイン画面でログインするか、すでにmixiでログイン済みの場合は下記のような画面が表示されるかと思います。「同意する」ボタンをクリックすると、先ほどサービス登録時に「リダイレクトURL」として指定したURLに戻ってきます。

 ここでは、先ほどの「mixi.html」を指定してあるので、元のページに戻ってくることになります。ただ、最初にアクセスしたときと異なるのは、URLに「code」パラメータが付いていることです。このcodeパラメータの値が「Authorization Code」となります。

【20〜30分】アクセストークン&プロフィールを取得!

 先ほど入手したAuthorization Codeを基に、PHPでアクセストークンと友人プロフィールを取得するプログラムを書きましょう。ここでは一番最初に作成した「mixi.php」を書き換えることにします。

 下記の「CONSUMER_SECRET」の値はダミーですので、mixiのパートナー登録時に確認した「Consumer Secret」の文字列に書き換えてください。

<?php
define('CONSUMER_SECRET', '1234567890123456789012345678901234567890');
define('GET_TOKEN_URL','https://secure.mixi-platform.com/2/token');
define('GET_FRIENDS_URL', 'http://api.mixi-platform.com/2/people/@me/@friends?fields=@all&count=10000');
define('GRANT_TYPE','authorization_code');

header('Content-type: text/javascript; charset=utf-8');

if(! isset($_GET['callback'], $_GET['consumer_key'], $_GET['code'], $_GET['redirect_url'])) {
exit(0);
}

if($token_json = getToken(GET_TOKEN_URL, $_GET['consumer_key'], CONSUMER_SECRET, $_GET['code'], $_GET['redirect_url'], GRANT_TYPE)) {
$token = json_decode($token_json, true);
if($friends_json = getFriends(GET_FRIENDS_URL, $token['access_token'])) {
echo $_GET['callback'] . '(' . $friends_json . ')';
}
}

function getToken($url_base, $consumer_key, $consumer_secret, $code, $redirect_url, $grant_type) {
$content = array(
'grant_type' => $grant_type,
'client_id' => $consumer_key,
'client_secret' => $consumer_secret,
'code' => $code,
'redirect_uri' => $redirect_url
);
$options = array('http' => array(
'method' => 'POST',
'header' => 'Content-type: application/x-www-form-urlencoded',
'content' => http_build_query($content)
));
return file_get_contents($url_base, false, stream_context_create($options));
}

function getFriends($url_base, $access_token) {
$options = array('http' => array(
'header' => 'Authorization: OAuth ' . $access_token
));
return file_get_contents($url_base, false, stream_context_create($options));
}
?>

 このプログラムは、callback、consumer_key、code、redirect_urlの4つをパラメータとしてリクエストされると、アクセストークンを取得(getToken()関数)し、友人プロフィールを取得(getFriends()関数)し、JSONP形式で友人プロフィールをレスポンスします。

 ここでは、file_get_contents()関数でmixiのサーバにリクエストしていますが、パラメータの詳細に関しては「mixi Graph API」の認証認可手順や、mixiのPeople APIの仕様を見ていただければと思います。

【30〜35分】いったん動作確認!

 ここまでの作業で、「mixi.html」による「Authorization Codeの取得」と「mixi.php」による「友人プロフィールの取得」の機能ができました。ここまでの動作確認をしてみましょう。

 まずは、「mixi.html」をWebブラウザで開き、「login」をクリックしてmixiで認証を行ってください。「mixi.html」に戻ってきたら、URLに付いているcodeの値(Authorization Code)をコピーして、3分以内に下記のURLにアクセスします(3分以内にアクセスしないと、Authorization Codeの期限切れエラーとなりますので、再度試してみてください)。

http://【1】/mixi.php?callback=【2】&consumer_key=【3】&code=【4】&redirect_url=【5】
  • 【1】mixi.phpが置いてあるドメイン・ディレクトリ
  • 【2】コールバック関数名(ここでは適当な半角英数の文字列で大丈夫です)
  • 【3】mixiのパートナー登録時に確認した「Consumer Secret」の文字列
  • 【4】mixi.hetmlのURLに付いているcodeの値(Authorization Code)
  • 【5】mixi.htmlのURL

 JSONP形式で友人のプロフィールが表示されたら成功です。


2/3

 INDEX
たぶん1時間でできるマッシュアップ講座 
mixiのソーシャルグラフをChart APIでオープンに
  Page1
mixi Graph APIとGoogle Chart Toolsをマッシュアップ!
OAuth 2.0と処理の流れについて
【0〜5分】まずはPHPの環境構築!
【5〜10分】PHPでHello World!
【10〜15分】mixiのパートナー登録!
Page2
【15〜20分】jQueryでAuthorization Codeを取得!
【20〜30分】アクセストークン&プロフィールを取得!
【30〜35分】いったん動作確認!
  Page3
【35〜50分】プロフィール取得結果の取得と集計!
【50〜60分】どうせならキレイに表示させよう!
友人の写真表示、結果共有、似ている人探索も


 Smart&Social フォーラム トップページへ



Smart & Social フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Smart & Social 記事ランキング

本日 月間