picasaなどで非公開データにアクセスするには認証する必要がある。即席にデモを行うには、予め写っている人の顔を編集したり、不要な写真を外す時間がないため、公開アルバムを使うのは相応しくない。非公開アルバムにアクセスするために認証方法をまとめる。
概要
Google APIは認証にOAuth 2.0 プロトコルの利用を推奨している。
OAuth2.0を利用する流れは以下の通り。
- 開発するアプリケーションをGoogleに登録する。
- アプリケーションからGoogleの認証サーバーにアクセス用のトークンを要求
- サーバでのユーザー認証に成功すると、アクセストークンを含んだレスポンスをアプリケーションにリダイレクトして返す。
- アクセスしたい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]を押す。
認証アクセス
認証は自力で行うこともできるが、扱いが簡単なので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」を参考に、そこから先は自力でアクセスすることとする。
- Using OAuth 2.0 for Client-side Applications , https://developers.google.com/accounts/docs/OAuth2UserAgent?hl=ja
認証サーバからのリダイレクトで、JavaScript client libraryのhandleAuthResult(authResult)が呼び出される。引数のauthResult.access_tokenにアクセストークンが渡されているので、これを利用して、picasaのAPIを呼び出せば、非公開データにアクセスできる。
アクセストークンを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
- Google Developers , https://developers.google.com/accounts/docs/OAuth2Login?hl=ja , Using OAuth 2.0 for Login
- Google Developers , https://developers.google.com/api-client-library/javascript/start/start-js?hl=ja , Getting Started with the Google APIs Client Library for JavaScript
- Google APIs Console , https://code.google.com/apis/console/
- Google Developers , https://developers.google.com/accounts/docs/OAuth2UserAgent?hl=ja , Using OAuth 2.0 for Client-side Applications