はじめに
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 アプリを作るのに幾つかハマったのでメモ。
まず、ビルドエラーになって 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 アカウント認証の準備する
Google アカウントを作成する。既にあればそれを使用する
(https://www.google.com/accounts)プロジェクトを作成する
(https://console.developers.google.com/project)使用したい API を選択して有効にする
(https://console.developers.google.com/apis/library)認証情報を作成
(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 呼出してみた