GoogleアカウントでOAuth認証（ngCordovaOauth）

ユーザーのログイン機能やパスワードなどの情報を暗号化して管理するのは手間がかかり、新しいアプリやサービスを利用する度に管理しないといけないアカウントが増えるのは、ユーザーにとってもできるだけ避けたい状況です。（まあ、要するに自前でログイン機能を用意するのは面倒ということ）

この煩雑さを解消するにはOAuthという認証技術を使って、すでに登録済みのSNSアカウントを利用してログイン機能を実装するのが一般的なので、今回はプラグイン「ngCordovaOauth」を利用して、Googleアカウントの実装方法を紹介します。

まず、アプリでOAuth認証を利用するために、Googleの認証APIを有効にしないといけないので、「Google API Console」にアクセスします。

上記画面のAPI一覧から「Social API」カテゴリにある「Google+ API」をクリック。

上部にある「有効にする」をクリック。

続いて「認証情報に進む」をクリック。

設定内容は以下の通り。
　　使用するAPI：Google+ API
　　APIを呼び出す場所：ウェブブラウザ（Javascript）
　　アクセスするデータの種類：ユーザーデータを選択

設定後、「必要な認証情報」をクリック。

※ APIを呼び出す場所でJavascriptを選択しているのは、Cordovaアプリで動作する端末はiOSやAndroidですが、実際の処理はJavascriptで行われるためです。

設定内容は以下の通り。
　　名前：任意の名称（APIの管理サイトで識別するための名称）
　　承認済みのJavascript生成元：未設定
　　承認済みのリダイレクトURL：http://localhost/callback

設定後、「クライアントIDの作成」をクリック。

※ 通常なら承認済みのリダイレクトURLには認証後のURLを指定しますが、今回はCordovaアプリからの利用なのでリダイレクト先がありません。そうなると未設定でも良さそうですが、認証時にはこのリダイレクトURLが必要なので、プラグイン「ngCordovaOauth」を利用する場合、ここのURLは「http://localhost/callback」固定となります。

設定内容は以下の通り。
　　メールアドレス：任意のメールアドレス
　　ユーザーに表示するサービス名：任意のアプリ、サービス名（認証時にユーザーに対して表示されます。）

設定後、「次へ」をクリック。

表示されたClientIDをコピーして、「完了」をクリック。

以上で、APIの設定は終了です。

プラグイン「ngCordovaOauth」のインストール・設定についてはこちらを参照。サイトに掲載されていますが、利用には「 InAppBrowser」プラグインも必要です。（Twitterアカウントでは「jsSHA 1.6.0」というJavascriptファイルも必要みたい）

認証を行うコードは以下の通りです。

angular.module('myapp', ['ngCordovaOauth'])
.controller('MainCtrl', function ($scope, $http, $cordovaOauth) {

    // OAuth認証開始
    $scope.oauth = function () {
        $cordovaOauth.google("CLIENT_ID", ["profile"]).then(function (result) {
            // result.access_token;
            // result.token_type;
            // result.expires_in;
            // result.id_token;
            validateToken(result.access_token);
        }, function (error) {
            console.log(error);
        });
    };

    // アクセストークンのチェック
    function validateToken(accessToken) {
        $http.jsonp('https://www.googleapis.com/oauth2/v3/tokeninfo',
            {
                params: {
                    callback: 'JSON_CALLBACK',
                    access_token: accessToken
                }
            }
        ).
        success(function (response) {
            console.log(response);
            getUserInfo(accessToken);
        }).
        error(function (error) {
            console.log(error);
        });
    }

    // ユーザー情報の取得
    function getUserInfo(accessToken) {
        $http.jsonp('https://www.googleapis.com/oauth2/v1/userinfo',
            {
                params: {
                    callback: 'JSON_CALLBACK',
                    access_token: accessToken
                }
            }
        ).
        success(function (response) {
            console.log(response);
            // response.id
            // response.email
            // response.verified_email
            // response.name
            // response.given_name
            // response.family_name
            // response.link
            // response.picture
            // response.gender
            // response.locale
        }).
        error(function (error) {
            console.log(error);
        });
    }
})

6行目の「CLIENT_ID」には、Google API Consoleで発行されたIDを設定。

22,41行目の「JSON_CALLBACK」文字列はそのまま（変更しない）。

正常に認証が完了すれば、46行目の戻り値（response）でユーザー情報が取得できるので、ID、氏名などの情報をアプリに取り込んで利用します。

なお、6行目の「profile」、他には「email」など、ここの設定で取得できる情報が異なります。（詳しくはこちらを参照。）

上記で「$scope.oauth()」メソッドが呼ばれると、以下の画面が表示されます。

メールアドレス、パスワードを入力後、アプリに許可を与えるかどうかの確認が表示されます。

許可を選択して正常に処理されれば、メソッド「validateToken()」が呼び出されるという流れになります。

OAuth認証を実装しようとした最初はプラグインの存在を知らずに自力でやろうとして、一旦ログインした後のログアウトはどうすればいいんだ（なにもしないと前回の認証状態が残っていた）、と色々と試行錯誤して、結構な時間を無駄にしてしまいました。

今回のログインとは関係ありませんが、画像のアップロードについても先にプラグインを確認しておいたら...という感じだったので、なにげにプラグインが充実しているので素晴らしいですね。

また、「ngCordovaOauth」の説明を見ると、Googleアカウント以外にもFaceBookやTwitter、Instagramなど、色々なサービスのアカウントに対応しているようなので、時間があれば、他にも試してみたいです。