phpでFlickrのOauth認証を実施後、javascriptにてFlickr apiにアクセスするサンプルプログラムを作成した。
サンプルプログラム
◆FlickrのAPI Key と Secret
以下から取得する。
https://www.flickr.com/services/apps/create/
◆Oauth認証をするphp
FlickrOauth認証 参照
◆作成したサンプルプログラム（index.php）
<?php
session_start();
require_once('FlickrOauth.php');
define('CONSUMER_KEY', 'XXXXXXXXXX'); // XXXXXXXXXXにkeyを記載する
define('CONSUMER_SECRET', 'YYYYYYYY'); // YYYYYYYYにSecretを記載する
define('CALLBACK_URL', 'http://ZZZZZZZZ/index.php'); // このファイルのアドレスを記載する
if(! isset($_SESSION['test_access_token'])){
if(! isset($_SESSION['test_request_token'])){
// request token取得
$tw = new FlickrOAuth(CONSUMER_KEY, CONSUMER_SECRET);
$token = $tw->getRequestToken(CALLBACK_URL);
// SESSIONに登録
$_SESSION['test_request_token'] = $token['oauth_token'];
$_SESSION['test_request_token_secret'] = $token['oauth_token_secret'];
// 認証用URL取得してredirect
$authURL = $tw->getAuthorizeURL($_SESSION['test_request_token'],'write');
header("Location: " . $authURL);
}else{
// access token 取得
$tw = new FlickrOAuth(CONSUMER_KEY, CONSUMER_SECRET,
$_SESSION['test_request_token'], $_SESSION['test_request_token_secret']);
$access_token = $tw->getAccessToken($_REQUEST['oauth_verifier']);
// SESSIONに登録
$_SESSION['test_access_token'] = $access_token['oauth_token'];
$_SESSION['test_access_token_secret'] = $access_token['oauth_token_secret'];
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FlickrOauth Test</title>
<script type="text/javascript" src="js/sha1.js"></script>
<script type="text/javascript" src="js/oauth.js"></script>
<script type="text/javascript">
var oauth_token = "<?php echo $_SESSION['test_access_token']; ?>";
var oauth_token_secret = "<?php echo $_SESSION['test_access_token_secret']; ?>";
var consumerKey = "<?php echo CONSUMER_KEY; ?>";
var consumerSecret = "<?php echo CONSUMER_SECRET; ?>";
//var agent = new FlickrOAuth(consumerKey, consumerSecret, "write");
window.onload = function(){
// SignOut.php へのリンクを作成
var html = '<br/><a href="SignOut.php">Sign Out</a>';
document.getElementById("SignOut").innerHTML = html;
// SessionDestroy.php へのリンクを作成
var html = '<br/><a href="SessionDestroy.php">セッションを終了する（このドメインへのセッションを破棄します）</a>';
document.getElementById("SessionDestroy").innerHTML = html;
// リクエスト
var accessor = {
consumerSecret: consumerSecret,
tokenSecret: oauth_token_secret
};
var message = {
method: "GET", // POSTではIEで動作しない。
action: "http://www.flickr.com/services/rest",
parameters: {
oauth_signature_method: "HMAC-SHA1",
oauth_consumer_key: consumerKey,
oauth_token: oauth_token,
jsoncallback: "callbackfunction",
format: "json",
method: "flickr.test.login"
}
};
OAuth.setTimestampAndNonce(message);
OAuth.SignatureMethod.sign(message, accessor);
var target = OAuth.addToURL(message.action, message.parameters);
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = target;
document.body.appendChild( script );
}
function callbackfunction(data,dataType){
var html = '<a>ID : ' + data.user.id + '</a><br/>';
html += '<a>USER NAME : '+ data.user.username._content + '</a>';
document.getElementById("test_login").innerHTML = html;
}
</script>
<style type="text/css">
<!--
html, body {
background-color: #CCFFFF;
}
// -->
</style>
</head>
<body>
<h1>Flickr Oauth Test</h1><br/>
<div id="test_login"></div>
<div id="SignOut"></div>
<div id="SessionDestroy"></div>
</html>
以下のjavascriptファイルを使用する。
sha1.js － ここからダウンロード
oauth.js － ここからダウンロード
◆認証を取り消すphp
<?php
session_start();
// セッション変数を消去する
unset($_SESSION['test_access_token']);
unset($_SESSION['test_access_token_secret']);
unset($_SESSION['test_request_token']);
unset($_SESSION['test_request_token_secret']);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FlickrOauth Test</title>
<style type="text/css">
<!--
html, body {
background-color: #CCFFFF;
}
// -->
</style>
</head>
<body>
<h1>Flickr Oauth Test への認証を取り消しました。</h1><br/>
<div id="FlickrOauthTest"><a href="index.php">Flickr Oauth Test</a></div>
</body>
</html>
◆セッションを破棄するphp
<?php
session_start();
// セッション変数を全て解除する
$_SESSION = array();
// セッションクッキーを削除する。
if (isset($_COOKIE[session_name()])) {
setcookie(session_name(), '', time()-42000, '/');
}
// セッションを破壊する
session_destroy();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FlickrOauth Test</title>
<style type="text/css">
<!--
html, body {
background-color: #CCFFFF;
}
// -->
</style>
</head>
<body>
<h1>このドメイン（http://s10-4bn.sunnyday.jp/）のセッションを破棄しました。</h1><br/>
<div id="FlickrOauthTest"><a href="index.php">Flickr Oauth Test</a></div>
</body>
</html>
◆参考にしたページ
- TwitterクライアントのOAuth対応(Javascript編)
- PHPでセッションを完全に破棄する方法
以上
