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>
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認証の流れ
- ユーザーの認可処理とAuthorization Codeの入手
- リフレッシュ&アクセストークンの入手
■ 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"));
……
}
<<
>>
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.リフレッシュ&アクセストークンの入手 |
リッチクライアント&帳票 全記事一覧へ |
- GASで棒、円、折れ線など各種グラフを作成、変更、削除するための基本 (2017/7/12)
資料を作る際に、「グラフ」は必要不可欠な存在だ。今回は、「グラフの新規作成」「グラフの変更」「グラフの削除」について解説する - GET/POSTでフォームから送信された値をPHPで受け取る「定義済みの変数」【更新】 (2017/7/10)
HTMLのフォーム機能についておさらいし、get/postメソッドなどの内容を連想配列で格納するPHPの「定義済みの変数」の中身や、フォーム送信値の取り扱いにおける注意点について解説します【PHP 7.1含め2017年の情報に合うように更新】 - PHPのfor文&ループ脱出のbreak/スキップのcontinue【更新】 (2017/6/26)
素数判定のロジックからbreak文やcontinue文の利点と使い方を解説。for文を使ったループ処理の基本とwhile文との違い、無限ループなども併せて紹介します【PHP 7.1含め2017年の情報に合うように更新】 - Spreadsheetデータの選択、削除、挿入、コピー、移動、ソート (2017/6/12)
Spreadsheetデータの選択、挿入、削除、コピー、移動、ソートに使うメソッドの使い方などを解説する
|
|