google spread sheet api v4 で clientからjavascriptでシートに行の挿入を行ったメモ

## 概要
[前回](https://qiita.com/hibohiboo/items/2a08eab063bef80afbee)まではサーバ側でスプレッドシートにアクセスしていた。
クライアント側からのアクセスも試してみる。

基本は、[公式ドキュメント](https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets.values/append)の通りに作ればよい。
APIキーとクライアントIDについてはそれぞれ作る必要があるので注意。

## 認証情報の準備
プロジェクトの準備はできているものとする。[*](*1)
グーグルクラウドコンソール( https://console.cloud.google.com/?hl=ja ) からログインして認証情報画面に移動。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/70442966-b712-f8d3-accb-13cc751fd7e8.png)
API キーとクライアントIDの２つを作る必要がある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/b218ac81-7fa2-c584-9404-15fc7bcf19ba.png)

### APIキーの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/528ac734-e345-9542-c6bd-6a2c8fb370b2.png)
仕様予定のAPIの有効化を忘れていないかのチェックがてら、制限しておくとよい。
保存を忘れないこと
### クライアントIDの作成
開発用のURLや本番用のURLを登録する。IPアドレス(127.0.0.1)では登録できない。
また、OAuth同意画面でスコープを設定するためにhttpsしか登録できない場合がある。後述。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/fa9910a5-9da2-53e3-5409-2c0fa86e37d3.png)


### APIキーとクライアントIDのコピー
作成したらコピーする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/84365c8e-09be-01c7-56f8-618e9c5a84cd.png)

## ソース
* ポップアップダイアログが表示されるパターン。chromeにはブロックされるので、サンプル通りボタンを作るほうがよいかも。今回はとりあえず動かしたかったのでこれで。

### 認証
```html

  <script async defer src="https://apis.google.com/js/api.js"
    onload="this.onload=function(){};handleClientLoad()"
    onreadystatechange="if (this.readyState === 'complete') this.onload()">
  </script>
  <script>
const CLIENT_ID = 'コピーしたクライアントID.apps.googleusercontent.com';
const API_KEY = 'コピーしたAPIキー';
const SCOPES = ['https://www.googleapis.com/auth/spreadsheets'];
const DISCOVERY_DOCS = ["https://sheets.googleapis.com/$discovery/rest?version=v4"];

function handleClientLoad() {
  gapi.load('client:auth2',  authorization);
}

async function authorization() {
  try{
    const auth = await authorize()
    await gapi.client.init({
      apiKey: API_KEY,
      clientId: CLIENT_ID,
      scope: SCOPES,
      discoveryDocs: DISCOVERY_DOCS,
    })
  }catch(err){
    console.log('authError', err)
  }
}
function authorize(){
  return new Promise((resolve, reject) => {
    gapi.auth.authorize({client_id: CLIENT_ID, scope: SCOPES, immediate: false}, function(authResult) {
      if (authResult && !authResult.error) {
        resolve(authResult)
      } else {
        reject(authResult.error)
      }
    });
  })
}
  </script>
</body>
```

スプレッドシートに行を追加する部分。若干Node.jsとは書き方が異なるので注意。

```js
  const params = {
      spreadsheetId: '1JVa25s339f4kNXhdgHXI4dVq3FGMHrT8x7ZvhXKRDMY',
      range: 'A1',
      valueInputOption: 'USER_ENTERED',
      insertDataOption: 'INSERT_ROWS',
    };
    const body = {
      values: [["test","message"]],
    }

    try {
      const response = (await gapi.client.sheets.spreadsheets.values.append(params, body)).data;
      console.log(JSON.stringify(response, null, 2));
    } catch (err) {
      console.error(err);
    }
```

## httpsについて
* OAuth同意画面の編集で、機密性の高いスコープを選ぼうとすると、クライアントIDで登録するURLでhttpsしか選べなくなる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/e40db08c-c104-7929-665b-12d22ae517d8.png)

開発用では不便だなと思ったけれど、少し調べたら、webpackのサーバは簡単にhttps化できるようであった。

https://webpack.js.org/configuration/dev-server/#devserverhttps

```webpack.config.js
module.exports = {
  //...
  devServer: {
    https: true
  }
};
```

また、Angularの場合も、以下のコマンドと設定でhttps化することができた。

https://angular.io/cli/serve

```
npm run start -- --ssl
```

```diff:angular.json
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "udonarium:build",
            "disableHostCheck": true
          },
          "configurations": {
            "production": {
              "browserTarget": "udonarium:build:production",
+              "ssl": true
            }
          }
        },
```


## 参考

[Google APIを使ったJavaScriptで簡単アンケートページ（iPadアプリ風）][*1]
https://python5.com/q/pjgkcqok
https://angular.io/cli/serve
https://github.com/hibohiboo/udonarium/commit/1b32bec57943d201831f7f113c20626183bd86a3

[*1]:https://qiita.com/hidehito108/items/10a5d243a17eaa64b6bd