現在ははてなブログに移行し、「ひだまりソケットは壊れない」 というブログで記事を書いています。 はてな id も id:nobuoka に変更しました。
2011-02-06
JavaScript で OAuth 認証を行う方法
最近、twitter クライアントを Firefox 拡張機能として作ったりしているのですが、twitter では認証方式として OAuth が採用されているため、JavaScript で OAuth 認証を行う必要があります。 ここでは、JavaScript の OAuth ライブラリを用いて OAuth 認証を行う方法を説明します。
OAuth 自体の詳しい説明などは OAuth の公式サイト をご覧ください。
OAuth ライブラリの入手
Google code に OAuth 関連ライブラリのプロジェクトサイト があります。 ここで、John Kristian さん作の JavaScript 用のライブラリも公開されています。
Revision 1249 の段階では、ライブラリとして使用するのに必要なファイルは以下の 2 つのファイルです。 これらのファイルをダウンロードしてください。
- oauth.js
- sha1.js
OAuth ライブラリの使用方法
さて、OAuth ライブラリをどのように使うかの例を示します。 より多くの例が JavaScript 用 oauth ライブラリのリポジトリ中 にありますので、もっと多くの例を見たい方はそちらをご覧ください。
GET メソッドの場合
以下に GET メソッドの場合の例を示します。 強調表示をしている部分は、特に OAuth に関係しているところです。 デフォルトで使用されるシグニチャメソッドは HMAC-SHA1 です。
// 既に oauth.js や sha1.js はロードしているとする
// GET メソッドで接続する先の URL
var action = "http://example.com/oauth"
// 渡すパラメータ
var parameters = [
[ "screen_name", "XXXXXX" ],
[ "since_id", "XXXXXX" ],
];
// consumer key などの設定
var accessor = {
consumerKey : "XXXXXX",
consumerSecret : "XXXXXX",
token : "XXXXXX",
tokenSecret : "XXXXXX"
};
// メッセージオブジェクトの生成
var message = { method: "GET", action: action, parameters: parameters };
// パラメータを含む URL の取得
var url = OAuth.addToURL( message.action, message.parameters );
// OAuth 認証のためのパラメータ等の補完 (パラメータを含む URL の取得の後にすること)
OAuth.completeRequest( message, accessor );
// XMLHttpRequest オブジェクトを使用しての通信
var req = new XMLHttpRequest();
req.onreadystatechange = function receiveRequestToken() {
if( req.readyState == 4 ) {
if(req.status == 200) {
// 成功時の処理
} else {
// 失敗時の処理
}
}
}
req.open( message.method, url, true );
// Authorization ヘッダの設定 (getAuthorizationHeader の第 1 引数は realm)
var realm = "";
req.setRequestHeader( "Authorization", OAuth.getAuthorizationHeader(realm, message.parameters) );
req.send();
POST メソッドの場合
以下に POST メソッドの場合の例を示します。 基本的には GET メソッドの場合と同じですね。 GET メソッドの場合はパラメータを URL に含める一方 POST メソッドの場合はパラメータリクエスト本文として送信するので、その違いに起因する変更が必要となります。
// 既に oauth.js や sha1.js はロードしているとする
// POST メソッドで接続する先の URL
var action = "http://example.com/oauth"
// 渡すパラメータ
var parameters = [
[ "screen_name", "XXXXXX" ],
[ "since_id", "XXXXXX" ],
];
// consumer key などの設定
var accessor = {
consumerKey : "XXXXXX",
consumerSecret : "XXXXXX",
token : "XXXXXX",
tokenSecret : "XXXXXX"
};
// メッセージオブジェクトの生成
var message = { method: "POST", action: action, parameters: parameters };
// リクエスト本文の生成
var requestBody = OAuth.formEncode( message.parameters );
// OAuth 認証のためのパラメータ等の補完 (リクエスト本文の生成の後にすること)
OAuth.completeRequest( message, accessor );
// XMLHttpRequest オブジェクトを使用しての通信
var req = new XMLHttpRequest();
req.onreadystatechange = function receiveRequestToken() {
if( req.readyState == 4 ) {
if(req.status == 200) {
// 成功時の処理
} else {
// 失敗時の処理
}
}
}
req.open( message.method, message.action, true );
// Authorization ヘッダの設定 (getAuthorizationHeader の第 1 引数は realm)
var realm = "";
req.setRequestHeader( "Authorization", OAuth.getAuthorizationHeader(realm, message.parameters) );
req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
req.send( requestBody );
OAuth ライブラリのライセンスについて
OAuth ライブラリのライセンスは Apache License, Version 2.0 です。 使用の際はライセンスの内容を確認した上で使用してください。
JavaScript での OAuth 認証の使いどころ
今のところ XMLHttpRequest を使ったクロスドメイン通信は一般的ではありません *1 ので、JavaScript での OAuth 認証はあまり使いどころがないような気はします。 Firefox 拡張機能をはじめとする、各種ブラウザの拡張での使用が一番多いのではないでしょうか。
Firefox 拡張機能の中でこの oauth ライブラリを使用する場合は、グローバルな名前空間を汚さないように mozIJSSubScriptLoader を使ってロードするようにすれば良いでしょう。
*1:XMLHttpRequest Level 2 ではこの機能が盛り込まれる予定です。
- 5256 https://www.google.co.jp/
- 1221 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cts=1331004680945&ved=0CDUQFjAA&url=http://d.hatena.ne.jp/vividcode/20110206/1296944787&ei=B4VVT_LmKsfYrQffvNWUBw&usg=AFQjCNEO1XKdujeDCJcsmI5Fkh6HYxgNow&sig2=N3GS4Y35B1XZ_aM3PaLa
- 692 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&sqi=2&ved=0CDYQFjAB&url=http://d.hatena.ne.jp/vividcode/20110206/1296944787&ei=kG02T-2oBOKemQWm9eiWAg&usg=AFQjCNEO1XKdujeDCJcsmI5Fkh6HYxgNow
- 647 http://goosys.sakura.ne.jp/diary/2011/08/javascriptquerytwitterapioauth.html
- 303 https://www.google.co.jp
- 271 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cts=1330793712731&ved=0CDoQFjAC&url=http://d.hatena.ne.jp/vividcode/20110206/1296944787&ei=6ExST-qlLcaJmQWPvc2bCg&usg=AFQjCNEO1XKdujeDCJcsmI5Fkh6HYxgNow&sig2=9Tu164tvTZu4o30ZuPer
- 233 http://www.google.co.jp/url?sa=t&rct=j&q=javascript oauth&source=web&cd=2&sqi=2&ved=0CDgQFjAB&url=http://d.hatena.ne.jp/vividcode/20110206/1296944787&ei=0CGFTqDnNYeLmQXr_cEk&usg=AFQjCNEO1XKdujeDCJcsmI5Fkh6HYxgNow
- 211 https://www.google.com/
- 155 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&frm=1&source=web&cd=2&cts=1331548544012&sqi=2&ved=0CDsQFjAB&url=http://d.hatena.ne.jp/vividcode/20110206/1296944787&ei=d9FdT7eFEMTJmQW_trCVDw&usg=AFQjCNEO1XKdujeDCJcsmI5Fkh6HYxgNow&sig2=87yFJHxm
- 135 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&cts=1331174668188&ved=0CEgQFjAD&url=http://d.hatena.ne.jp/vividcode/20110206/1296944787&ei=JBlYT9COI47KmQWJtpSZDw&usg=AFQjCNEO1XKdujeDCJcsmI5Fkh6HYxgNow