アプリ作成の流れ
今回は，
- ① mixiページを作る
（未作成の場合のみ） - ② mixiにパートナー登録をする
（未登録の場合のみ） - ③ mixiにアプリ情報を登録する
- ④ mixiページにアプリを設置する
- ⑤ コーディング
① mixiページを作る
mixiページをお持ちでない方は，
② mixiにパートナー登録をする
パートナー登録
③ mixiにアプリ情報を登録する
mixi Developer Centerの
指定した
- Consumer Key
- Consumer Secret
表2 本記事で作るアプリの情報
| 項目 | 入力した値 | 項目の説明 |
|---|---|---|
| アプリ名 | はじめてのmixiページアプリ | アプリの名称 |
| スタートURL | http:// | PC版mixiページからアプリを起動したときに呼び出すURL |
| スタートURL | http:// | スマートフォン版mixiページからアプリを起動したときに呼び出すURL |
| リダイレクトURL | http:// | OAuth 2. |
| お問い合わせ用メールアドレス | ひみつ | あなたのメールアドレス |
- ※5）
- fluxflexとは，
GitHubと連動するクラウドホスティングサービスで， 無料で2プロジェクトまで作ることができます。詳細はfluxflexのサイトをご覧ください。
④ mixiページにアプリを設置する
前述の
⑤ コーディング
では，
- プロフィール情報を取得して画面に表示
- フィード情報一覧を取得して画面に表示
APIでアクセスできる情報にはユーザの個人情報も含まれます。そのため，
プロフィールの取得に必要な
リスト1 index.
<script src="http://static.mixi.jp/js/page.js"></script>
<script>
// 初期化
mixi.init({
appId: '[YOUR CONSUMER KEY]'
// あなたのアプリのConsumer Key
});
// ユーザ認可画面の呼び出し
mixi.auth({
// ユーザに認可してほしいスコープ
// を半角スペース区切りで
scope: "r_profile"
});
</script>
mixi.
mixiページ上でアプリを起動しましょう。図1のようにユーザ認可画面が表示されたら成功です。
図1 ユーザ認可画面
このユーザ認可画面でユーザが
次は，
リスト2 callback.
<?php
define('CONSUMER_KEY', '[YOUR CONSUMER KEY]'); // あなたのアプリのConsumer Key
define('CONSUMER_SECRET', '[YOUR CONSUMER SECRET]'); // あなたのアプリのConsumer Secret
define('REDIRECT_URI', '[YOUR REDIRECT URI]'); // あなたのアプリのリダイレクトURI
define('MIXI_TOKEN_ENDPOINT', 'https://secure.mixi-platform.com/2/token');
define('MIXI_API_ENDPOINT', 'http://api.mixi-platform.com/2');
// パラメータからAuthorization codeを取得
$authorization_code = $_GET["code"];
// Authorization codeを使い，ユーザ認可のアクセストークンを取得
$user_access_token = getUserAccessToken($authorization_code);
// ユーザのプロフィール情報を取得
$profile = getProfile($user_access_token);
// ユーザ認可のアクセストークンを取得
function getUserAccessToken($authorization_code) {
$param = array(
"grant_type" => "authorization_code",
"code" => $authorization_code,
"client_id" => CONSUMER_KEY,
"client_secret" => CONSUMER_SECRET,
"redirect_uri" => REDIRECT_URI
);
$context = array(
"http" => array(
"method" => "POST",
"header" => 'Content-Type: application/x-www-form-urlencoded',
"content" => http_build_query($param, "", "&")
)
);
$json = file_get_contents(MIXI_TOKEN_ENDPOINT, false, stream_context_create($context));
$list = json_decode($json, true);
return $list["access_token"];
}
// プロフィールを取得
function getProfile($access_token) {
$url = MIXI_API_ENDPOINT. "/people/@me/@self";
$context = array(
"http" => array(
"method" => "GET",
"header" => "Content-Type: application/x-www-form-urlencoded\r\n".
"Authorization: OAuth ". $access_token
)
);
$json = file_get_contents($url, false, stream_context_create($context));
$list = json_decode($json, true);
return $list["entry"];
}
// サニタイズ
function h($str) {
return htmlspecialchars($str, ENT_QUOTES, 'UTF-8');
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>はじめてのmixiページアプリ</title>
<style>
img {vertical-align: middle;}
div {background-color:#CCCCCC;margin-top:5px;padding:3px;}
</style>
</head>
<body>
ようこそ，<?php echo h($profile["displayName"]); ?>さん
<img src='<?php echo h($profile["thumbnailUrl"]); ?>' width='45' height='45' />
</body>
</html>
- ※6）
- mixiでは，
OAuth 2. 0 draft 10の仕様を採用しています。 - ※7）
- APIの仕様ページに，
APIごとに必要なスコープが記されていますのでご確認ください。 - ※8）
- 今回は説明の都合上，
アプリの起動時に認可画面を呼び出しますが， 実際にはユーザがどのようなアプリなのかをしっかり理解できる画面を介したうえで， 認可画面を呼び出すことをお勧めします。 - ※9）
- Authorization codeの有効期限は3分です。期限が切れてしまったときは，
再度ユーザの認可を取ると新たなcodeが発行されます。仕様はmixi Developer Centerの 「認証認可手順」 ページをご覧ください。 - ※10）
- APIの仕様はmixi Developer Centerの
「People API」 ページをご覧ください。