LoginSignup
0
0

More than 3 years have passed since last update.

Azure Static Web AppsでGoogle Spread Sheetのデータを取得して表示したメモ

Last updated at Posted at 2020-12-07

概要

スプレッドシートをWebAPI化するサービスの作り方をみて、簡単に取得できるかもと試してみた。
デプロイ先には簡単に関数をおけそうなAzureStaticWebAppsを選んだ。ベータ版だけど、無料で使えるので。

結果、そう簡単にはいかなかった。ハマリポイントは以下。

Googleのサービスアカウントの認証情報をどう渡すか

  • サンプルの通り、Credentials のJSONファイルを読み込ませようとしたが失敗。
    • → Azure FunctionsにGitHub Actionsからどうデプロイしてどう読み込ませるか分からない。gitに含めるわけにもいかんし。
  • 環境変数で読み込ませることで一応対応できた。
    • \\\になる仕様であった。プログラム側で置換して対応。。。

ソース

作業メモ

サービスアカウントの作成とスプレッドシートの許可

サービスアカウントを作る手順はリンク先を参照。

サービスアカウントの Credentials は以下のようなものが取得できる。

keyFile.json
{
  "type": "service_account",
  "project_id": "プロジェクトID",
  "private_key_id": "省略",
  "private_key": "-----BEGIN PRIVATE KEY-----\n省略\n-----END PRIVATE KEY-----\n",
  "client_email": "hoge@fuga.iam.gserviceaccount.com",
  "client_id": "00000000000",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/fuga.iam.gserviceaccount.com"
}

Spread Sheetの共有許可

image.png

  • Credentialsのclient_emailに書かれているメールアドレスを入力すると、サービスアカウントが出てくるはず。共有設定をしてやる image.png

環境変数の設定

構成から設定できる。が、そのままやると、はまる。はまった。
image.png

この画面で設定すると、以下のようなエラーが発生。
秘密鍵がちゃんとしてないぽい。
ローカルではちゃんと動いたのに。

{
    "library": "PEM routines",
    "function": "get_name",
    "reason": "no start line",
    "code": "ERR_OSSL_PEM_NO_START_LINE"
}

process.envを出力してみた。
環境変数は、以下のようになっている。\\\\ってめっちゃ多いな。

{
  "env": {
    "SERVICE_ACCOUNT_PRIVATE_KEY": "-----BEGIN PRIVATE KEY-----\\\\n省略\\\\n-----END PRIVATE KEY-----\\\\n"

高度な編集で、JSONを見られるので見てみる。
image.png

この段階で、以下のようになっていた。

{
  "SERVICE_ACCOUNT_PRIVATE_KEY": "-----BEGIN PRIVATE KEY-----\\n省略\\n-----END PRIVATE KEY-----\\n"
}

直接編集して、一つは減らすことができたが、それ以上の対応は思いつかず。
ソースコードを以下のように修正して対応した。

+ const private_key = process.env.SERVICE_ACCOUNT_PRIVATE_KEY.replace('\\\\','\\')

  const auth = await google.auth.getClient({
    credentials: {
      client_email: process.env.SERVICE_ACCOUNT_CLIENT_EMAIL,
      private_key,
    },
    scopes: SCOPES
  })

参考

Azure Static Web Apps
スプレッドシートをWebAPI化するサービスの作り方
Googleスプレッドシートをプログラムから操作

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0