StageWebViewでGoogle OAuth2.0認証

Google APIを使用してユーザー固有のデータにアクセスする際に、ユーザー認証が必要となります。StageWebViewを使用すると、簡単にGoogleのOAuth2.0認証を行えますので、その方法を紹介します。

前準備として、Google APIを使用するアプリケーションの登録と、認証時のリダイレクト先を用意しておく必要があります。

1. Google APIを使用するアプリの登録
ここの手順(リンク)に従って、Google APIを使用するアプリを登録します。

2. リダイレクト先の用意
OAuth2.0認証を行う際に必要となる、リダイレクト先を用意します。実際にアクセスできるURIならどこでも構わないと思います。

3. OAuth2.0認証を行うAIRアプリの作成
では、OAuth2.0認証を行うStageWebViewを用いたAIRアプリを作成します。

まず、OAuth2.0認証で使用する定数の定義。

private const OAUTH_URL:String =
  "https://accounts.google.com/o/oauth2/auth?response_type=token";
private const CLIENT_ID:String = "xxxx.apps.googleusercontent.com"; 
private const REDIRECT_URI:String = "http://your.redirect.uri";
private const SCOPE:String = "https://www.google.com/m8/feeds/";

OAUTH_URL	OAuth2.0認証を行うURL
CLIENT_ID	1.で設定したGoogle APIを使用するアプリのID
REDIRECT_URI	1.で設定したリダイレクト先のURI
SCOPE	OAuth2.0認証を使ってアクセスするGoogleのサービス

次にStageWebViewを作成してOAuth2.0認証を行なうコードです。

var web:StageWebView = new StageWebView();
web.stage = this.stage;
web.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
web.loadURL(OAUTH_URL + "&scope=" + SCOPE
  + "&redirect_uri=" + REDIRECT_URI
  + "&client_id=" + CLIENT_ID);
web.addEventListener(LocationChangeEvent.LOCATION_CHANGE,
  web_LocationChangeHandler);

StageWebViewはDisplayObjectよりも前面のレイヤーに表示されますが、今回はアプリケーションの全面に表示されるように設定しています。

web.loadURL()で、OAuth2.0認証を行うURLを指定しています。

最後にweb.addEventListener()でLocationChange.LOCATION_CHANGEイベントのイベントハンドラーを設定していまので、GoogleのOAuth2.0認証を行った後に、指定のリダイレクト先に飛ぶと、このイベントハンドラーが呼ばれることになります。

では、イベントハンドラーのコードを見てみましょう。

private function web_LocationChangeHandler(e:LocationChangeEvent):void {
  var url:Array = web.location.split("#");

  // もしリダイレクト先が自分の指定したURLだったら
  // OAUTHトークンをデコードする
  if (url[0] == REDIRECT_URI) {
    var params:Array = String(url[1]).split("&");
    for each (var param:String in params) {
      var vars:Array = param.split("=");
      switch(vars[0]) {
      case "access_token":
        OAUTH_TOKEN = vars[1];
        break;
      default:
        // do nothing
        break;
      }
    }
    web.removeEventListener(LocationChangeEvent.LOCATION_CHANGE,
      web_LocationChangeHandler);
    web.stage = null;
    web.dispose();
  }
}

web.locationで飛んだ先のURLを取得します。ちゃんとOAuth2.0認証に成功して飛んで来た場合には、

http://your.redirect.uri#access_token=$$$$&expires_in=$$$$

という文字列が取得できるはずですので、飛び先のURLが自分が指定したURLの場合は、以降のパラメータをデコードして、OAuthのトークンを取得します。

最後に、OAuthトークンを取得する為に使用したStageWebViewは不要となりましたので、 後始末を行います。

以降、Google APIでユーザー認証が必要となるデータにアクセスする際には、ここで指定したOAuthトークンを使用します。