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

メモ

今回の 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)