AIRでOAuth2認証するには？

AIRでAdSenseから取得したデータを表示させてみようと思った。

Getting Started - AdSense Management API - Google Code

しかし、そのためにはOAuth2認証を通す必要があるようだ。では、AIRでOAuth2認証するにはどうしたらいいのか？


「API Console」で必要な情報をそろえる

まずOAuth2で必要な情報を集めるために、API Consoleに逝く。

新しいプロジェクトを作る。ここでは「OAuth2Test」とした。

プロジェクトを作ると自動的に開く「services」で「AdSense Management API」を「ON」する。

「API Access」ページに逝って「Create an OAuth 2.0 client ID」という青くてデカいボタンクリック。

「Product Name」を入力して「Next」。ここでは「OAuth2Test」とした。「Product Logo」は放っておいておｋ。

「Application Type」として「Installed Application」を選んで「Create client ID」。

すると、「Client ID」「Client secret」「Redirect URIs」がもらえる。これらがOAuth2で必要な情報だ。



ユーザーに許可を求めるページを表示して「code」を取得

ユーザーにAdSenseへのアクセスの許可を求めるページを表示して、「code」を取得する必要がある。

そのために、StageWebViewを使う。コードはこんな風。

protected function onClickBtnStartOAuth2():void {
    swv = new StageWebView();
    swv.addEventListener(Event.COMPLETE, onCompleteSWV);
    function onCompleteSWV(evt:Event):void {
        const codeSubstringKey:String = "code=";
        var title:String = swv.title; //「code」はタイトルに含まれている
        trace("onCompleteSWV() title=[" + title + "]");
        var idx:int = title.indexOf(codeSubstringKey);
        if (idx != -1) {
            
            //「code」を切り出し
            code = title.substring(idx + codeSubstringKey.length);
            trace("onCompleteSWV() code=[" + code + "]");
            
            //codeを元にaccessTokenをリクエスト（grant_typeはInstalledAppの場合はこれで固定）
            getAccessToken.send({"code":code, "client_id":CLIENT_ID, "client_secret":CLIENT_SECRET, "redirect_uri":REDIRECT_URI, "grant_type":"authorization_code"});
            
        }
    }
    swv.stage = stage; //WebView表示開始（WebViewはディスプレイリストに追加できないのでフルスクリーンになる）
    swv.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
    swv.loadURL(createAuthURL()); //許可ページリクエスト
}


protected function createAuthURL():String {
    var url:String = "https://accounts.google.com/o/oauth2/auth?" //ここに投げることになってる
        + "scope=" + escapeMultiByte("https://www.googleapis.com/auth/adsense.readonly") //許可を得たいサービス
        + "&redirect_uri=" + REDIRECT_URI
        + "&response_type=code" //InstalledAppだとこの値で固定
        + "&client_id=" + CLIENT_ID 
        return url;
}

まず、StageWebViewをフルスクリーンで表示して許可を求めるページを表示する。

許可ページのURLをcreateAuthURL()で作る時に、redirect_uriとclient_idに、API Consoleでもらった情報を使う。

もう一つのポイントは「scope」の指定の仕方。このscopeの種類はここに書いてあった。

Getting Started - AdSense Management API - Google Code

多分、他のAPIのドキュメントにも同様の記述があるのだろうと思われ。

許可ページでユーザーが許可を出すとページが切り替わる。そのページのタイトル部分に必要な「code」が含まれているので切り出す。


「access_token」を取得

codeを切り出したと同時に、codeを使ってaccess_token取得のリクエストを「https://accounts.google.com/o/oauth2/token」に投げる。

ここで注意が必要なのは

・このURLへのリクエストはPOSTで行う（GETは受け付けない）
・レスポンスはJSONで返ってくる

ということだ。

今回はこのように、URLへのリクエストにHTTPServiceを使うことにした。

<!-- JSONで返ってくるのでresultFormatをtextに。このURLにはPOSTでリクエストをなげることになってる。 -->
<s:HTTPService id="getAccessToken" url="https://accounts.google.com/o/oauth2/token" method="POST"
               resultFormat="text" result="onResultGetAccessToken(event);" fault="onFaultGetAccessToken(event);"/>

リクエストが成功した時の処理はこんな風。

protected function onResultGetAccessToken(evt:ResultEvent):void {
    var result:String = getAccessToken.lastResult as String;
    taAccessToken.text = result;
    trace("onResultGetAccessToken():" + evt + "\n" + result);
    var json:Object = JSON.parse(result); //JSONをパース
    accessToken = json.access_token;
    trace("onResultGetAccessToken():access_token=" + accessToken);
    swv.stage = null; //WebViewを非表示にする
}

JSONはFP11.0/AIR3.0から使えるようになったクラスだ。最近のREST型のサービスのレスポンスはXMLではなくほとんどJSONなので、そろそろサポートしてくれないと困っちゃうわいな。

今回はFB4.6で開発したので問題なかったけど、FP10系も対応させたいと思うと独自にJSONを扱えるライブラリを組み込むことになりそうだ。

そして、このリクエストが完了した時点で「swv.stage = null;」してWebViewを非表示にするところも重要。

ところで、access_tokenが取得できたらOAuth2認証はできたということだ。つまり、ここまでで認証処理はおしまい。


AdSenseの日毎の売上レポートをリクエストする

ちゃんと認証できたのかを確かめるために、実際にAdSenseに2012å¹´1月の日毎の売上レポートをリクエストしてみる。

このリクエストに対応するのは「https://www.googleapis.com/adsense/v1.1/reports」だ。

AdSenseに限らないけど、GoogleのAPIでどんなメソッド（リクエスト先）があるかや、そのパラメーターにはどんなものがあるかは「APIs Explorer」でわかる。

Google APIs Explorer

今回もまた、このようにHTTPServiceを使う。

<!-- JSONで返ってくるのでresultFormatをtextに。 -->
<s:HTTPService id="reportsGen" url="https://www.googleapis.com/adsense/v1.1/reports" resultFormat="text"
               result="onResultReportsGen(event);" fault="onFaultReportsGen(event);"/>

実際にリクエストを送る部分はこんな風。

protected var startDate:String = "2012-01-01";
protected var endDate:String = "2012-01-31";
protected var dimension:String = "DATE";
protected var metric:String = "EARNINGS";
public function requestReportsGen():void {
    trace("requestReportsGen()");
    reportsGen.send({"startDate":startDate, "endDate":endDate, "dimension":dimension, "metric":metric, "key":API_KEY, "access_token":accessToken});
}

ここでaccess_tokenが必要なのだ。

レスポンスはまたJSONで返ってくるので、あとはグラフにするなど、好きな処理をすればいい。今回は単にTextAreaに表示させた。



全コード

最後に、全コードをこぴぺ。個人情報の部分は「xxx」した。

もちろん、このコードをどのように使っていただいても結構です。ただし、無保証、サポート無しです。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       width="640" height="480"
                       >
  
  <!-- 各種定義 -->
  <fx:Declarations>
    
    <!-- JSONで返ってくるのでresultFormatをtextに。このURLにはPOSTでリクエストをなげることになってる。 -->
    <s:HTTPService id="getAccessToken" url="https://accounts.google.com/o/oauth2/token" method="POST"
                   resultFormat="text" result="onResultGetAccessToken(event);" fault="onFaultGetAccessToken(event);"/>
    
    <!-- JSONで返ってくるのでresultFormatをtextに。 -->
    <s:HTTPService id="reportsGen" url="https://www.googleapis.com/adsense/v1.1/reports" resultFormat="text"
                   result="onResultReportsGen(event);" fault="onFaultReportsGen(event);"/>
    
  </fx:Declarations>
  
  <!-- スクリプト -->
  <fx:Script>
    <![CDATA[
      
      
      import mx.rpc.events.FaultEvent;
      import mx.rpc.events.ResultEvent;
      
      
      //OAuth2の許可ページ表示用WebView
      protected var swv:StageWebView;
      
      //APIs Consoleでもらった情報
      protected const CLIENT_ID:String ="xxx";
      protected const CLIENT_SECRET:String = "xxx";
      protected const REDIRECT_URI:String = "urn:ietf:wg:oauth:2.0:oob"; //InstalledAppだとこの値は固定らしい。「http://localhost」だとエラー出た。
      protected const API_KEY:String = "xxx";

      //欲しい情報
      [Bindable] protected var code:String; //accessTokenをもらうために必要
      [Bindable] protected var accessToken:String; //APIにアクセスするために必要
      
      
      protected function onClickBtnStartOAuth2():void {
        swv = new StageWebView();
        swv.addEventListener(Event.COMPLETE, onCompleteSWV);
        function onCompleteSWV(evt:Event):void {
          const codeSubstringKey:String = "code=";
          var title:String = swv.title; //「code」はタイトルに含まれている
          trace("onCompleteSWV() title=[" + title + "]");
          var idx:int = title.indexOf(codeSubstringKey);
          if (idx != -1) {
            
            //「code」を切り出し
            code = title.substring(idx + codeSubstringKey.length);
            trace("onCompleteSWV() code=[" + code + "]");
            
            //codeを元にaccessTokenをリクエスト（grant_typeはInstalledAppの場合はこれで固定）
            getAccessToken.send({"code":code, "client_id":CLIENT_ID, "client_secret":CLIENT_SECRET, "redirect_uri":REDIRECT_URI, "grant_type":"authorization_code"});
            
          }
        }
        swv.stage = stage; //WebView表示開始（WebViewはディスプレイリストに追加できないのでフルスクリーンになる）
        swv.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
        swv.loadURL(createAuthURL()); //許可ページリクエスト
      }
      
      
      protected function createAuthURL():String {
        var url:String = "https://accounts.google.com/o/oauth2/auth?" //ここに投げることになってる
        + "scope=" + escapeMultiByte("https://www.googleapis.com/auth/adsense.readonly") //許可を得たいサービス
        + "&redirect_uri=" + REDIRECT_URI
        + "&response_type=code" //InstalledAppだとこの値で固定
        + "&client_id=" + CLIENT_ID 
        return url;
      }
      
      
      protected function onResultGetAccessToken(evt:ResultEvent):void {
        var result:String = getAccessToken.lastResult as String;
        taAccessToken.text = result;
        trace("onResultGetAccessToken():" + evt + "\n" + result);
        var json:Object = JSON.parse(result); //JSONをパース
        accessToken = json.access_token;
        trace("onResultGetAccessToken():access_token=" + accessToken);
        swv.stage = null; //WebViewを非表示にする
      }
      
      
      protected function onFaultGetAccessToken(evt:FaultEvent):void {
        trace("onResultGetAccessToken():" + evt);
      }
      
      
      protected var startDate:String = "2012-01-01";
      protected var endDate:String = "2012-01-31";
      protected var dimension:String = "DATE";
      protected var metric:String = "EARNINGS";
      public function requestReportsGen():void {
        trace("requestReportsGen()");
        reportsGen.send({"startDate":startDate, "endDate":endDate, "dimension":dimension, "metric":metric, "key":API_KEY, "access_token":accessToken});
      }
      
      
      public function onResultReportsGen(evt:ResultEvent):void {
        var result:String = reportsGen.lastResult as String;
        trace("onResultReportsGen():" + evt + "\n" + result);
        taReportsGen.text = result;
      }
      
      
      public function onFaultReportsGen(evt:FaultEvent):void {
        trace("onFaultReportsGen():" + evt);
      }
      
      
    ]]>
  </fx:Script>
  
  <!-- UI部 -->
  <s:VGroup width="100%" height="100%" horizontalAlign="center" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
    <s:HGroup width="100%" verticalAlign="middle">
      <s:Label text="code" width="125" fontSize="18"/>
      <s:Label width="100%" text="{code}"/>
    </s:HGroup>
    <s:TextArea id="taAccessToken" width="100%" height="100%" editable="false"/>
    <s:HGroup width="100%" verticalAlign="middle">
      <s:Label text="accessToken" width="125" fontSize="18"/>
      <s:Label width="100%" text="{accessToken}"/>
    </s:HGroup>
    <s:Button  enabled="{accessToken == null}" label="Start OAuth2" click="onClickBtnStartOAuth2();"/>
    <s:TextArea id="taReportsGen" width="100%" height="100%" editable="false"/>
    <s:Button enabled="{accessToken != null}" label="Request reports.generate" click="requestReportsGen();"/>
  </s:VGroup>
  
</s:WindowedApplication>

以上、終了！うぃーあうちょ〜！

コメント

コメントを投稿

このブログの人気の投稿

レオナルド・ダ・ビンチはなぜノートを「鏡文字」で書いたのか？

イメージ
日経14.06.08朝　芸術と科学のあいだ　１７　鏡文字に込めた天才の思惑　福岡伸一 …ダ・ビンチの筆の特徴は、線が左上から斜め右下へと流れていることである。これは彼が左利きだったかららしい。 もう一つの際立った特徴は、文字がすべて鏡文字、左右反転で書かれていることだ… アイディアを盗まれないよう暗号化したのだという説があるが、暗号にしては簡単に解読されてしまう… ダ・ビンチは天才であり完璧主義者であると同時に、大いなる山っ気を持った人物でもあった。 いつも自分を売り込むこと、プランやアイディアを広めることを考えていた。そのためには何が必要か。マスメディアである。 ダ・ビンチの鏡文字は自分の原稿をいつの日か活版印刷するために意図された周到な準備だったのではなかったか。 日経記事より レオナルド・ダ・ビンチは過去の人物の中で最も尊敬する人物だ。彼は本当に何でも出来た。芸術も、科学も、工学も。まさに「万能人 (uomo universale)」。 レオナルド・ダ・ヴィンチ - Wikipedia 当然自分はダ・ビンチの足元にも及ばないが、いくつもの人工言語（プログラミング言語）を使うことができる。ひとつをマスターするのは大変だったが、ひとつマスターするとその他の言語にはかなりの共通点があるので、新しい言語を習得するのにそれほど時間がかからなくなったからだ。 いかに天才であったとしても生きられる時間は限られている。その限られた時間の中であれほどの多方面に渡る物事を習得できたのは、「すべてのものに共通する何か」を習得したからではないかと思うのだ。 自分の知る限り、その「すべてのものに共通する何か」を習得したのではないかと思える人物は、ダ・ビンチただ一人だ。 そのダ・ビンチの新たな側面を知った。山っ気というか、マーケティングにも興味があったようだ。 そのマーケティングには何らかのメディアが必要だ。やはり自分もダ・ビンチは活版印刷のために鏡文字を使っていた説に一票だ。 マーケティングへの興味という他にもう一つ根拠がある。ダ・ビンチが生まれたのが1452å¹´。グーテンベルクの聖書が世界で初めて活版印刷でつくられたのが1455å¹´。 グーテンベルク聖書 - Wikipedia つまり、ダ・ビンチが生きた時代は活版印...
続きを読む

macでsmb（samba）共有サーバーに別名で接続（別アカウント名で接続）する方法

macでsmb（samba）共有サーバーに別のアカウント名で接続したくなった。 接続を解除してもパスワードを保存してしまったために自動的に再接続してしまい、別アカウント名で接続できなくなってしまった(´・ω・`) どうすれば別名で接続できるのか？ Finder＞移動＞サーバーへ接続＞サーバアドレス に下記のように入力する。 smb://アカウント名@ホスト名 ノリでやってみたら、たまたまできちゃった(・∀・) 知らなかったわ〜
続きを読む

Google DriveにCURLでアップロードするには？

イメージ
LinuxからGoogleドライブにファイルをアップロードしたい！ Google Drive にlinuxからファイルを自動アップロードするにはどうしたら良いかを考えていた。 残念ながらlinux版のクライアントは予定はされているものの、まだリリースされていない。さてどうしよう？ 例えば、一応 SDK でライブラリが提供されているのでJavaでクライアントを書くとか？重いなぁ。そこまでやらなきゃいけないか？ そこで、Google DriveはRESTFulなんだからCurlだけでもある程度いけるはず・・・と思ってやってみたらできた。 Get Startedを参考にはじめる。 Google Drive SDK — Google Developers ちなみに、テスト環境はlinuxではなくMacのLIONです。 追記12.07.04 ：CentOS 5 64bitでも正常動作を確認した APIコンソールでアプリケーション登録 まずAPIコンソールでアプリケーション登録をする必要がある。 Google APIs Console Create＞「GoogleDriveUploader」とでも名前を付けて＞Create Project Services＞Drive SDKをON API Access＞Create an OAuth2.0 client ID Product Nameに「GoogleDriveUploader」とでも名前を付けて＞Next Installed Application、Otherを選択して＞Create client ID ここまででこんな情報を貰える。これが必要な情報。 ブラウザでOAuth認証してcodeを取得する 今度はブラウザ上で、先ほど得た情報を使ってOAuthの認証を通す。 https://accounts.google.com/o/oauth2/auth?client_id= CLIENT_ID &response_type=code&redirect_uri=urn:ietf:wg:oauth:2.0:oob&scope=https://www.googleapis.com/auth/drive こんな画面が出るので「アクセス...
続きを読む