Cordova アプリで Google アカウント認証してみた

# はじめに

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

Cordova はウェブクライアントアプリのテクニックが使えるはずです。
[Getting Started | API Client Library for JavaScript | Google Developers]
(https://developers.google.com/api-client-library/javascript/start/start-js)
調べると以下の記事が見つかりました。
[PhoneGap Tips - Google API OAuth with PhoneGap's InAppBrowser]
(http://phonegap-tips.com/articles/google-api-oauth-with-phonegaps-inappbrowser.html)
試してみましたが上手く行きません。さらに調べると
[Google will no longer allow OAuth requests to Google in embedded browsers - Stack Overflow]
(https://stackoverflow.com/questions/43314226/google-will-no-longer-allow-oauth-requests-to-google-in-embedded-browsers)
要するに上記の記事はもう使えないわけです。さらに調べると
[Setup Google Login in your Cordova/Phonegap App – Satpal Tanan – Medium]
(https://medium.com/@satpal.tanan/setup-google-login-in-your-cordova-phonegap-app-cb1587bb5892)
これでできそうです。

# Cordova アプリを作成する

* Cordova 8.1.2

## Cordova アプリを作成する

[Cordovaでつくるハイブリッドアプリ - Qiita](https://qiita.com/mako/items/757523727b3db334eeff)

### メモ

今回の 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]
(https://st40.xyz/one-run/article/95/)

> 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` を修正します。

```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`の「.」で区切られた文字列の順序を入替えて作ります。

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

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

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

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

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

```index.js
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 呼出してみた]
(https://qiita.com/tinymouse/items/dcd03c7371e88e232ca9)