Webページ作成覚書: Flickr：phpによるOauth認証＆javascriptによるアクセス

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でセッションを完全に破棄する方法

以上

ページ

2013-05-06

Flickr：phpによるOauth認証＆javascriptによるアクセス