JavaScriptでOAuth認証を使ってTwitterのTimeLineを表示する

  • 6月, 28, 2013
  • Web関連
  • JavaScriptでOAuth認証を使ってTwitterのTimeLineを表示する はコメントを受け付けていません

（サーバトラブルで記事が消えてしまったので、再度書き直しました）

Twitter REST API 1.0 → 1.1の仕様変更で、全てのAPIの使用にはOAuth認証が必要になり、1.0系は2013/6/12をもって完全停止となりました。クライアントサイドのJavaScriptでユーザのタイムラインを表示する必要があり、OAuthに対応したコードを書いてみたのですが、jQueryのajax関数で嵌ったので、メモとして残しておきます。consumerKeyなどのキーが丸見えなので、用途は限られると思います。

＊用意するもの

<!DOCTYPE html>
<html lang="ja">
  <head>
   <meta charset="utf-8" />
   <title>Twitter+OAuth+javaScriptでTL表示</title>
   <script type="text/javascript" src="jquery-[バージョン]"></script>
   <script type="text/javascript" src="oauth.js"></script>
   <script type="text/javascript" src="sha1.js"></script>
   <script type="text/javascript" >

function Twitter() {}
Twitter.prototype = {
		consumerKey:	"省略",
		consumerSecret:	"省略",
		accessToken:	"省略",
		tokenSecret:	"省略"
};
Twitter.prototype.get = function(api, content) {
    var accessor = {
		consumerSecret: this.consumerSecret,
		tokenSecret: this.tokenSecret
    };

    var message = {
		method: "GET",
		action: api,
		parameters: {
			oauth_version: "1.0",
			oauth_signature_method: "HMAC-SHA1",
			oauth_consumer_key: this.consumerKey,
			oauth_token: this.accessToken
		}
    };
    for (var key in content) {
		message.parameters[key] = content[key];
    }
    OAuth.setTimestampAndNonce(message);
    OAuth.SignatureMethod.sign(message, accessor);
    var target = OAuth.addToURL(message.action, message.parameters);

    var options = {
		type: message.method,
		url: target,
		dataType: "jsonp",	//ここでjsonpを指定する
		jsonp: false,		//jQueryによるcallback関数名の埋め込みはしない
		cache: true			//リクエストパラメータに時刻を埋め込まない
	};
    $.ajax(options);
}

var twitter = new Twitter();

function update(data){
	for( var i = 0; i < data.length; i++ ) {
		$("#test").append("<p>"+data[i].user.name + ' : ' + data[i].text+"</p>");
	}
}

$(function(){
	//オプションとコールバック関数の指定
	var content = {count: "50", callback: "update"};
	//Twitter APIの呼び出し
	twitter.get("https://api.twitter.com/1.1/statuses/home_timeline.json", content)
});

</script>
  </head>
  <body>
<div id="test"></div>
</body>
</html>

home_timelineは制限がきつく15分で15回（つまり1分1回）の呼び出しでRate Limitになってしまうため、ユーザーの投稿だけでよければAPI呼び出しをuser_timelineに替えれば15分で180回まで呼び出せます。

最近の投稿

アーカイブ

カテゴリー