ionic(cordova)にてGoogle+ログインを実装

cordova ionic ハイブリッドアプリ

簡単なものかと思ったらけっこう時間かかった。。

手順はざっくり以下
・ionicプロジェクトを作成
・Googleコンソールからプロジェクトを作成
・作ったプロジェクトに認証情報を作成
・cordova-plugin-googleplusプラグインを導入
・プログラム実装

ionicプロジェクトを作成

まずはプロジェクト作って、androidを追加する。

$ ionic start google-login blank --v1
$ cd google-login
$ ionic platform add android
Googleコンソールからプロジェクトを作成

まずはここからプロジェクトを作成
https://console.developers.google.com/apis/dashboard

作ったプロジェクトに認証情報を作成

「認証情報を作成」から「OAuthクライアントID」を作成

・ios
バンドルIDが必要

・android
署名証明書フィンガープリントとパッケージ名が必要

フィンガープリントは以下のコマンドで確認。SHA1の内容をコピーして貼り付ける

$ keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore
$ キーストアのパスワードを入力してください:  android (パスワードはandroidぽい)
・・・
証明書のフィンガプリント:
         MD5:  ・・・
         SHA1: ・・・
         SHA256: ・・・
         署名アルゴリズム名: SHA256withRSA
         バージョン: 3
・・・

パッケージ名はiosのバンドルIDと同じ。

cordova-plugin-googleplusプラグインを導入

以下のコマンドでプラグイン導入。iOS の URL スキームは認証情報を作成する際に作られる。Googleコンソールの認証情報の画面から確認できる。

$ ionic plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=[iOS の URL スキーム]
プログラム実装
・・・
  .controller("MainCtrl", function($scope, $timeout) {
    $timeout(function() {
      window.plugins.googleplus.login({ /* なくてもデフォルトの設定で動く */ }
      /* scopesを指定したい場合はスペースで複数指定可
      {
        'scopes': 'https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/userinfo.profile'
      }
      */
      , function (obj) {
        console.log(obj);
      }, function (msg) {
        alert('error: ' + msg);
      });
    }, 3000);
・・・

以上です

その他URLメモ
https://github.com/EddyVerbruggen/cordova-plugin-googleplus
https://developers.google.com/mobile/add?platform=ios&cntapi=signin
https://developers.google.com/mobile/add?platform=android&cntapi=signin