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

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

はじめに

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

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 の呼出できるようにしたいと思います。