OAuth CrossDomain JavaScript Proxy を作った

oauth javascript crossdomain appengine

サービス：

http://xdoauthproxy.appspot.com/

ソースコード：

http://xdoauthproxy.googlecode.com/

何ができるか

OAuth(3-legged)のAPIがJavaScriptクライアントから簡単に呼べるようになります。
プログラム的には非同期の呼び出しのみで記述でき、面倒な手続き（トークンのやり取り、同意画面の表示など）はプロキシ側で完了します。
プロキシサービスはGoogle App Engine上で動いてます。

コード例

http://xdoauthproxy.googlecode.com/svn/trunk/assets/example.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Example Client : OAuth CrossDomain JavaScript Proxy</title>
    <script type="text/javascript" src="http://xdoauthproxy.appspot.com/js/json2.js"></script>
    <script type="text/javascript" src="http://xdoauthproxy.appspot.com/js/xd-oauth-client.js"></script>
    <script type="text/javascript">
function startXdRequest() {
  XdOAuth.init('http://xdoauthproxy.appspot.com/xd-server.html'); // プロキシサービスのURLを指定して初期化
  XdOAuth.request({
    url : 'http://www.google.com/calendar/feeds/default/private/full?alt=json', // OAuthによるアクセス制御がかかったAPIエンドポイント
    success : function(data) {
      var result = eval('(' + data + ')');
      var html = [];
      for (var i=0; i<result.feed.entry.length; i++) {
        var entry = result.feed.entry[i];
        html.push('<li>'+entry.title.$t+'</li>');
      }
      document.getElementById('result').innerHTML = html.join('');
    },
    error : function(res) {
      alert(res.status + ':' + res.body);
    }
  });
}
    </script>
  </head>
  <body>
    <!-- place dummy image file on the same domain where client html file is located. -->
    <img src="./img/s.gif" />
    <input type="button" onclick="startXdRequest()" value="Start OAuth Request to get private Google Calendar">
    <ul id="result"></ul>
  </body>
</html>

OpenSocialのOAuth Proxyとはちがうのか？

JavaScriptからOAuthにアクセスできるという点で似てると思いますが、ガジェット外で利用できる(＝コンテナを必要としない)点が違います。
意味合い的には、FriendConnect API + OpenSocial OAuth Proxy - OpenSocial でしょうか。

対応するOAuth API

Google系のサービスとMyspace, Twitter, Smart.fm に対応してます。Yahooも時間あったらやります。
えーじさんにリストをもらいましたが、ほとんど登録すらしてないので試すのが難しいんで、後にします。

注意点

リクエスト時にポップアップウィンドウで同意画面を出すため、xdoauthproxy.appspot.com に対してウィンドウポップアップブロッカーを無効にしておく必要があります。

制限事項

初期版はGETのみです。POSTの実装はさぼってますが、きっとちょっとやれば何とかなります。

その他

多分にコンセプト的です。バグ多いと思います。その点理解して使ってください。
Python+GAEの習作でもあるため、コードはあまり美しくないと思います。

原理的に２回データの流れを承認する画面が発生します（OAuth Provider -> xdoauthproxy.appspot.com の同意、xdoauthproxy.appspot.com -> JSを埋め込んだサイトのドメインへの同意）。そのためちょっと冗長です。

クライアント側は全部ブラウザで動くJSなので、ブックマークレットで呼ぶとかも比較的簡単だと思います。事前登録とかもしません。セキュリティのために最低限のことはやってるつもりですが、おそらく最低限です。サイトの真正性確認の方法は、必要があれば別エントリにしますが、OAuthの署名に比べればDNSに依っているので弱いほうです。

GreaseMonkeyとかから使うのはあまり想定してませんが、そもそも必要ですかしらね？

関連する記事／試み