はじめに

Google Apps Script で書いたプログラムを Cordova アプリから Google アカウント認証して使用しようと思いました。
まず、Cordova アプリで Google アカウント認証できるようにしたいと思います。

Cordova はウェブクライアントアプリのテクニックが使えるはずです。
Getting Started | API Client Library for JavaScript | Google Developers
調べると以下の記事が見つかりました。
PhoneGap Tips - Google API OAuth with PhoneGap's InAppBrowser
試してみましたが上手く行きません。さらに調べると
Google will no longer allow OAuth requests to Google in embedded browsers - Stack Overflow
要するに上記の記事はもう使えないわけです。さらに調べると
Setup Google Login in your Cordova/Phonegap App – Satpal Tanan – Medium
これでできそうです。

Cordova アプリを作成する

• Cordova 8.1.2

Cordova アプリを作成する

Cordovaでつくるハイブリッドアプリ - Qiita

メモ

今回の Cordova アプリを作るのに幾つかハマったのでメモ。

まず、ビルドエラーになって Error processing "launch": 'cordova run android --device --verbose --no-update-notifier' failed with exit code 1 。以前から使用していた Cordova 開発環境がプラグインと合わないらしい。そこで Cordova 開発環境をアップデート。

Cordova 開発環境を最新にしたところ、Could not find an installed version of Gradle either in Android Studio... エラー。幾つか対応方法があるようだが、自分は Gradle 単体を Android Studio と別にインストールした。

パッケージ名と認証キーを取得する

後で使用するので以下の情報を取得しておきます。

• アプリケーション ID

作成したプロジェクトフォルダにある config.xml を開いて

<widget id="●●.●●●●.●●●●" version="1.0.0" (以下略

• 認証キー（Android アプリの場合）

証明書格納ファイルを作成して認証キーを取得します。
Androidアプリの証明書格納ファイル（keystore）の作成方法 - Cordova｜ONE-RUN

keytool -list -v -keystore ●●●●●●

表示された情報のフィンガプリントの SHA1 を使います。

Google アカウント認証の準備する

1. Google アカウントを作成する。既にあればそれを使用する
   (https://www.google.com/accounts)

2. プロジェクトを作成する
   (https://console.developers.google.com/project)

3. 使用したい API を選択して有効にする
   (https://console.developers.google.com/apis/library)

4. 認証情報を作成
   (https://console.developers.google.com/apis/credentials)

OAuth 同意画面を設定する

まず、OAuth 同意画面 を設定します。

OAuth クライアント ID を作成する

Google 認証情報 は OAuth クライアント ID を作成します。

まず、タイプ（種類）ウェブアプリケーション

以下の項目を設定します。

• 名前　←任意です
• JavaScript 生成元　→空でいいようです
• リダイレクト URI　→空でいいようです

以下の情報が作成されます。後で使用します。

• クライアント ID
• クライアントシークレット

Android アプリの場合、タイプ（種類） Android

以下の項目を設定します。

• 名前　←任意です
• パッケージ名　←上記で取得したアプリケーション ID
• 署名証明書フィンガープリント　←上記で取得した認証キー

以下の情報が作成されます。

• クライアント ID
• クライアントシークレット

iOS アプリの場合、タイプ（種類） iOS

以下の項目を設定します。

• 名前　←任意です
• バンドル ID　←上記で取得したアプリケーション ID

以下の情報が作成されます。

• クライアント ID
• クライアントシークレット

メモ

OAuth クライアント ID を作成するのに、自分は Android アプリを作りたいので、タイプ Android だけ作成しましたが、作成したアプリを実行すると 認証情報 が作成されていないとエラーになり、プラグインはどうやらタイプ ウェブアプリケーション も同時に使用するようで、Android アプリでもこれを作成しないといけませんでした。

Cordova アプリで Google アカウント認証する

• cordova-plugin-google-api 5.1.4

メモ

この Cordova プラグインはリポジトリが幾つか見つかります。

• cordova-plugin-google-api 5.1.4 (https://www.npmjs.com/package/cordova-plugin-google-api)
• cordova.plugin.googleplus 4.0.2 (https://www.npmjs.com/package/cordova.plugin.googleplus)
• cordova-plugin-googleplus-fix 5.3.3 (https://www.npmjs.com/package/cordova-plugin-googleplus-fix)

Cordova プロジェクトにプラグインを追加する

作成してある Cordova プロジェクトにプラグインを追加します。

$ cordova plugin add cordova-plugin-google-api --save

config.xml を修正します。

<plugin name="cordova-plugin-google-api" source="npm">
  <variable name="WEB_APPLICATION_CLIENT_ID" value="●●●●●●-●●●●●●●●●●●●●●●●.apps.googleusercontent.com" />
  <variable name="REVERSED_CLIENT_ID" value="com.googleusercontent.apps.●●●●●●-●●●●●●●●●●●●●●●●" />
</plugin>

WEB_APPLICATION_CLIENT_ID は、事前に取得した Google 認証のクライアント ID
REVERSED_CLIENT_ID は、そのクライアント IDの「.」で区切られた文字列の順序を入替えて作ります。

ログインボタンを用意する

アプリの画面に、ログインするためのボタンを用意しましょう。また、状態が分かるためのラベルも用意しましょう。

<button id="login">Login</button>
<p id="status">Not logged in.</p>
<img id="image">

ログインするコードを追加する

ログインするコードを追加します。このサンプルは jQuery を使用しています。

var clientId = '●●●●●●-●●●●●●●●●●●●●●●●.apps.googleusercontent.com';
var clientSecret = '●●●●●●●●●●';
var scope = 'profile';

$('#login').click(function(){
    // ①認証
    window.plugins.googleplus.login({    
            'webClientId': clientId,
            'offline': true,
            'scopes': scope
        },
        function(obj){    // 認証に成功した
            $('#status').html("Success: " + obj.displayName);
            $('#image').attr('src', obj.imageUrl);
            $('#image').show();
        },
        function(msg){    // 認証に失敗した
            $('#feedback').html("Error: " + msg)
        }
    );
});

上記のコードで img タグの src を書換えているが、Refused to load the image 'https://lh6.googleusercontent.com/.../photo.jpg' because it violates the following Content Security Policy directive: "img-src 'self' data: content:". エラーになる。index.html の <meta http-equiv="Content-Security-Policy" content= の img-src 'self' に https://*.googleusercontent.com/ を追加してやる。

おわりに

Cordova アプリで Google アカウント認証できるようになりました。
続いて、Google API の呼出できるようにしたいと思います。
次回の記事　Cordova アプリで Google API 呼出してみた