Hatena::ブログ(Diary)

vivid memo このページをアンテナに追加 RSSフィード

vivid code というサイトのメモ代わりに記事を書いていました。
現在ははてなブログに移行し、「ひだまりソケットは壊れない」 というブログで記事を書いています。 はてな 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 を使ってロードするようにすれば良いでしょう。

*1XMLHttpRequest Level 2 ではこの機能が盛り込まれる予定です。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

リンク元