tanaka's Programming Memo

プログラミングについてのメモ。

OAuth2.0でpicasaの非公開データにアクセス

picasaなどで非公開データにアクセスするには認証する必要がある。即席にデモを行うには、予め写っている人の顔を編集したり、不要な写真を外す時間がないため、公開アルバムを使うのは相応しくない。非公開アルバムにアクセスするために認証方法をまとめる。

概要

Google APIは認証にOAuth 2.0 プロトコルの利用を推奨している。
OAuth2.0を利用する流れは以下の通り。

  1. 開発するアプリケーションをGoogleに登録する。
  2. アプリケーションからGoogleの認証サーバーにアクセス用のトークンを要求
  3. サーバでのユーザー認証に成功すると、アクセストークンを含んだレスポンスをアプリケーションにリダイレクトして返す。
  4. アクセスしたいGoogle APIにアクセストークンを渡して、データにアクセスする。

OAuth2.0で認証するための詳細はUsing OAuth 2.0 for Login(https://developers.google.com/accounts/docs/OAuth2Login?hl=ja)に記載。
正しくセキュアに実装するために、OAuth2.0のライブラリの利用が強く推奨されている。

アプリケーションの登録

アクセスキーの取得

authorizedアクセスをするために、サービス名やGoogleにアプリを動かすWebサイトのドメインを知らせて、Googleが生成するclient IDを取得する。取得した各種IDをアプリからGoogleの認証サーバに送信してOAuth 2.0のアクセストークンを取得する。
以下のURLを参考に、アクセスキーの取得ページに必要事項を設定する。

  • Google APIs Console(https://code.google.com/apis/console/)にアクセスして、ログインする。
  • [Create project]をクリックして、作成するアプリのためのプロジェクトを作成する。
  • [Services]をクリックして、アプリに必要なAPIをONにする。Picasaは「Picasa Web Albums Data API」を利用するが、Servicesに存在しないのでこの作業は不要。
  • API Accessを選択
  • 以下を設定して、サービスについての認証用データを登録する
    • 「Create an OAuth 2.0 client ID」をクリック
    • Product nameにサービス名を入力
    • Product logoとHome Page URLは差し当たり不要
    • [Next]を押す
    • Application Typeは「Web Application」
    • Authorized Redirect URIsは、認証後にリダイレクトするURLを設定するが、JavaScriptから認証する場合は呼び出し元のページに戻るので空欄にしておく。
    • Authorized JavaScript Originsに、アプリにアクセスするプロトコルとドメインを入力する。httpとhttpsの双方からアクセスさせたい場合は、それぞれのURLを行を分けて入力しておく。ドメインのみで、以降にはパスなどは書かないこと。http://www.example.com/apps/などから、httpとhttpsの双方で呼び出したい場合
    • [Create Client ID]を押す。

以上で、API Accessのページに、clientID、Client secret、API keyなどが作成される。

認証アクセス

認証は自力で行うこともできるが、扱いが簡単なのでJavaScript client libraryを利用する。認証には、以下のパラメータを渡す。

  • client ID
  • 使いたいアプリケーションで指定されたscopeオブジェクト。picasaでは「https://picasaweb.google.com/data/
  • ダイアログを表示せずに認証するなら「immediate」プロパティに「true」を設定
  • 認証が完了した際に呼び出すコールバック関数

プログラムのサンプルは「Getting Started with the Google APIs Client Library for JavaScript(https://developers.google.com/api-client-library/javascript/start/start-js?hl=ja)」のページにある。

picasaへのアクセス

scopeをpicasaのものに差し替えて、認証まではサンプル通りで成功するが、アクセストークンを取得した後にpicasaのデータにアクセスする方法がJavaScript client libraryには用意されていない。そこで、以下のページの「Calling a Google API」を参考に、そこから先は自力でアクセスすることとする。

認証サーバからのリダイレクトで、JavaScript client libraryのhandleAuthResult(authResult)が呼び出される。引数のauthResult.access_tokenにアクセストークンが渡されているので、これを利用して、picasaAPIを呼び出せば、非公開データにアクセスできる。
アクセストークンをAPIに渡す方法は2通りあり、GETのパラメータに組み込む方法と、Authorization: Bearer HTTPヘッダーに渡す方法である。可能であれば後者の方がセキュリティ上よいが、picasaのサーバーは現時点(2013/09/22現在)では、Authorizationを受け付けないので、前者でやるしかない。よって、以下のような呼び出しをauthResult.access_tokenから行うことで、picasaの非公開データにアクセスすることができる。

Googleが公開しているOAuth2.0用JavaScript client libraryのコールバックから、picasaのアルバムを参照する例
var URL_ALBUM = 
    "https://picasaweb.google.com/data/feed/api/user/${user}"
    +"?kind=album&alt=json&access_token="+authResult.access_token;
// ${user}の部分をユーザーIDに置換する
var url = URL_ALBUM.replace(/[$][{]user[}]/,"ユーザーID");

$.ajax({
    url:url,
    cache:true,
    dataType: "jsonp",
    error: function(xreq,stat,err) {
        alert("load error:"+err+" "+url);
    },
    success: cbPicasaAlbum
});
  • ${user}部分は、picasaのユーザーIDに差し替える。
  • cbPicasaAlbumという関数を成功した時に呼び出すように指定している。
成功時のコールバック関数の例
// Picasaのアルバムの取得コールバック
function cbPicasaAlbum(json,type) {
    for (var i=0; i<json.feed.entry.length; i++) {
        var e = json.feed.entry[i];
            // データを登録
            picasaAlbumList.push({
                title: e.title.$t,
                albumid: e.gphoto$id.$t,
                userid: e.gphoto$user.$t
            });
            // メニューを追加
            var menu = "<div id='"+(picasaAlbumList.length-1)+"' class='btn btn_menu_list'>"+e.title.$t+"/"+e.gphoto$access.$t+"</div>";
            $("#menu_sel_album").append(menu);
    }
};

参考URL