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 ではこの機能が盛り込まれる予定です。
