yui-frameworksで作るmixiボイスAIRアプリ
連載インデックスへ
yui-frameworksで作るmixiボイスAIRアプリ(2)

mixi Graph APIのOAuth認証処理について


株式会社プラグラム 田中豪
2011/6/21


2.mixiにログイン&OAuth認証(別ウィンドウ)


別ウィンドウを呼び出す

 「mixiにログイン」ボタンを押すと別ウィンドウでmixiのログイン画面を開きOAuth認証を行います。

 MainViewのログインボタンが押された時のイベントは MainActionで受け取り、別ウィンドウを開いています。

MainView.mxml
<?xml version="1.0"  encoding="utf-8"?>
  <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                               xmlns:s="library://ns.adobe.com/flex/spark" 
                               xmlns:mx="library://ns.adobe.com/flex/mx" 
                               xmlns:yui="http://yui.akabana.seasar.org/1.0" 
                               xmlns:p="http://ns.plugram.com/flex"
                               xmlns:model="jp.co.plugram.mixi.models.*"
                               xmlns:view="jp.co.plugram.mixi.parts.view.*"
                               xmlns:components="jp.co.plugram.mixi.components.*"
                               >
                ……       
                <mx:ViewStack  id="viewStack" creationPolicy="all">
                              <!--  未ログインの時の画面 -->
                              <s:NavigatorContent  id="notlogin">
                                          ……                                           <!-- ログインボタン -->                                           <components:SimpleImageButton id="btnLogin" x="78" y="55"/>                             </s:NavigatorContent>                             ……               </mx:ViewStack>
</s:Group>
MainAction.as
package jp.co.plugram.mixi.base.action
  {
                import  jp.co.plugram.mixi.components.LoginWindow;
                import  org.seasar.akabana.yui.framework.ns.handler;
              public  class MainAction
                {
                              /**
                               * 「mixiにログイン」ボタンが押下された 時のイベントハンドラです。
                               * アクセス修飾子に「handler」を指定します。
                               * Viewで発生したイベントはActionが全て受け取ります。
                               * 「1.ログイン画面の起動」の 時と同じように場合によって
                               * この処理をBehaviorに担当させることもできます。
                               * このサンプルアプリではボタンなどのコンポーネントのイベントの受け取り方は
                                *    handler function {Componentのid}_{Event名}(event:Event)
                               * としています。
                               * 他の命名規則については
                               *    http://yui-docs.akabana.info/tutorial/customizer/event/
                               * を参照してください。
                               */
                              handler  function btnLogin_click():void 
                              {
                                            var  window:LoginWindow = new LoginWindow();
                                          window.showStatusBar = false;                                           window.setOpener(helper.view);                                           window.open(true);                             }
              } }

mixi Graph API(Voice API)のOAuth認証

 mixi Graph APIの一部はAtom形式でやりとりしていますが、基本的にJSON形式でやりとりします。この連載では全てJSON形式でやりとりをしています。

 形式については以下のURLの「取得結果の表現形式の指定方法」を参照くださcAuth認証の流れ

  1. ユーザーの認可処理とAuthorization Codeの入手
  2. リフレッシュ&アクセストークンの入手

1.ユーザーの認可処理とAuthorization Codeの入手

 サンプルアプリが起動すると、まずログインボタンが表示されます。

 このボタンを押すと別ウィンドウが起動し、mixiのログイン画面が表示されます。

 この時、別ウィンドウ(LoginWindow)の生成が完了すると、onCreationCompleteメソッドが呼び出され、AIR内部のブラウザから、mixiの認証画面を開きます。

consumerKeyは前回mixiのサービス登録時に取得したものを使用します。

 このサンプルアプリケーションではapplication.propertiesに設定しています。

 注意しないといけないのは、ここで設定したスコープが、その後Voice APIを使用した 時に適用されるということです。

 このアプリでは「つぶやきの一覧取得」と「つぶやきの投稿」など、読み込みと書き込みの両方を行うのでどちらのパラメータも指定しておきます。

スコープについてはミクシィ デベロッパーセンターのVoice APIの項目を参照ください。

2.リフレッシュ&アクセストークンの入手

 発行されたAuthorization Codeはブラウザ内で受け取るため、mxmlファイルから直接受け取れません。なので、今回はブラウザのURLからAuthorization Codeを抜き出しています。

 該当するソースコードはLoginWindowのlocationChangedメソッドです。ここではブラウザのURLが変わるごとにURLをチェックし、サービスに登録したURLにアクセスした時にAuthorization Codeを抜き出してトークン取得用のURLにデータをPOSTで送信しています。


  private function  locationChanged(event:Event):void {
       // Locationが登録したRedirect  URLに遷移した場合
      if(!getLocation().indexOf(AppConfig.redirectUrl)){
           // Authorization Codeからリフレッシュトークン、アクセストークンを取得する
           var auth:Authorization = Authorization.getAuthInstance(getAuthCode());
           mixiLoginService.send(auth);
    } }

 送信先の設定は< fx:Declarationsタグ>で以下のように設定しています。

 <mx:HTTPService  id="mixiLoginService" 
       url="https://secure.mixi-platform.com/2/token"  
       method="POST"
       result="loginResultHandler(event)"  fault="faultHandler(event)"/>
 

 正しいパラメータで正常に送信が行えると、loginResultHandlerメソッドにリフレッシュトークンとアクセストークンがJSON形式で返ってきます。

 このサンプルアプリでは受け取ったトークンをこの画面を開いた親ウィンドウ(MainView)に渡しています。

 また、トークンを親ウィンドウに渡した直後に、そのウィンドウに対してdispatchEventを行い、OAuth認証の完了を親ウィンドウに通知しています(MainViewにdispatchされたイベントはMainActionに伝播し、最終的にMainProfileBehaviorが受け取っています)。

LoginWindow.mxml

  private function  loginResultHandler(event:ResultEvent):void {
       var decoder:JSONDecoder = new JSONDecoder();
       opener.token = decoder.decode(event.result as String, Token);
       opener.dispatchEvent(new Event("loggedIn"));
       ……
  }
  << 
MainProfileBehavior.as
>> 
  package jp.co.plugram.mixi.base.behavior
  {
                import  jp.co.plugram.mixi.base.helper.MainHelper;
                import  org.seasar.akabana.yui.framework.ns.handler;
              public  class MainProfileBehavior
                {
                              public  var helper:MainHelper;
                              ……

                            /**                              * ログインが成功した時に呼び出されるハンドラです。                              * LoginWindow.mxmlで発生した "loggedIn "というイベントをここで受け取っています。                              */                             handler function onLoggedIn():void                             {                                           helper.setViewAsLoggedIn();                                           ……                             }               } }

注意:発行されたアクセストークンの有効期限は15分です。本来は有効期限前にアクセストークンの再発行を行う必要がありますが、このアプリではあくまでサンプルのため今回は実装していません。

 OAuth認証が完了すると別ウィンドウが自動的に閉じ、MainViewがログイン済みの画面に切り替わります。

 今回はログイン画面から別ウィンドウを開きOAuth認証を行うところまでを、サンプルアプリのソースコードを基に行いました。次回はmixi Voice APIを使ったつぶやき一覧の取得やつぶやきの新規投稿などをyui-frameworksのHttpServiceを使ってデータの送信/受信を行う方法について解説していきます。


著者プロフィール


田中豪(たなかごう)
株式会社プラグラムのエンジニア。


JavaをメインにFlex、スマートフォンアプリからHTML5までサーバ、クライアント問わず。最近気になってるのはScalaとWebGL。Twitter:@tan_go238
〜 RIAセミナー2011 開催のお知らせ 〜株式会社プラグラムは大塚商会主催の RIAセミナー2011(東京:2011年6月23日、大阪:2011年7月8日) に協賛しています。ご興味がある方は大塚商会イベントページをご参照ください。

@IT関連記事


Flexフレームワークで変わるRIA開発の現場
Adobe CS5の新しい中核を担うFlex 4のフレームワーク。ワークフローを初めRIA開発現場がどう変わるかを、Flash Builder 4やFlash Catalyst、Adobe AIR 2などの技術・ツール・フレームワークなどの機能を紹介しながら解説する連載
Adobe AIRでiTunes×Twitterクライアントを作った
これ、俺ならこう使う(2) iTunesで再生されている楽曲のタイトルを、Twitterアカウントに「いま聴いている曲」として投稿するAIRアプリケーション「音ログAIR」を作ってみました
Smart & Social」フォーラム 2008/8/11
業務用RIAの本命!? Flex+Java開発入門
本連載では、サーバサイドとしてJava、リッチなクライアントサイドとしてJavaと相性の良いFlexを用いたRIA開発の基礎を解説します。EclipseベースのIDEであるFlex Builderを使って、Tomcatで動くRIAをいくつか作成しましょう
一攫千金! デザイナのためのmixiアプリ制作のコツ
一撃デザインの種明かし(8) ケータイ版の提供もスタートして、ますます注目を集める「mixiアプリ」。mixiの特徴を生かした制作事例とデザイナが制作する際のポイントを紹介

1-2  

 INDEX
mixi Graph APIのOAuth認証処理について
yui-frameworksで作るmixiボイスAIRアプリ(2)
  Page1
mixiボイスのクライアントをAdobe AIRで作ってみよう
パッケージ構成
mixiボイスクライアントの機能
処理の流れについて
■ 1.ログイン画面の起動
■ ViewStackを使った画面のログイン前、ログイン後の画面の切り替え
Page2
■ 2.mixiにログイン&OAuth認証(別ウィンドウ)
■ mixi Graph API(Voice API)のOAuth認証
■ 別ウィンドウを呼び出す
■ OAuth認証の流れ
■ 1.ユーザーの認可処理とAuthorization Codeの入手
■ 2.リフレッシュ&アクセストークンの入手


リッチクライアント&帳票 全記事一覧へ



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間