JavaScript で OAuth 認証を行う方法

vivid code というサイトのメモ代わりに記事を書いていました。
現在ははてなブログに移行し、「ひだまりソケットは壊れない」というブログで記事を書いています。はてな id も id:nobuoka に変更しました。

最近、twitter クライアントを Firefox 拡張機能として作ったりしているのですが、twitter では認証方式として OAuth が採用されているため、JavaScript で OAuth 認証を行う必要があります。ここでは、JavaScript の OAuth ライブラリを用いて OAuth 認証を行う方法を説明します。

OAuth 自体の詳しい説明などは OAuth の公式サイトをご覧ください。

OAuth ライブラリの入手

Google code に OAuth 関連ライブラリのプロジェクトサイトがあります。ここで、John Kristian さん作の JavaScript 用のライブラリも公開されています。

JavaScript 用 oauth ライブラリ

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 );