Nuxtで開発しているWebサービスで、
Google API Client Library for JavaScriptを使いたいなと思ったら、
意外とハマったので、その時の備忘録。

Google API ClientのNode.js版(googleapis)は、
npmでインストールできるけど、
ブラウザ版はCDNなので、いろいろめんどくさい。。

※調べてまとめたあとだけど、非推奨の方法だった。。
※2023年3月31日に廃止予定で、Google IdentityServicesに移行が必要っぽい。。
※しかも、やりたかった「追加の権限をリクエストする」もなくなってるっぽい。。
※さらに、Google IdentityServicesはnpmでの提供も型定義もないよ(´ω｀)

インストール

まずはインストール。
JavaScript版のClient Libraryは、
https://apis.google.com/js/api.jsなので、
scriptタグで追加。

const config: NuxtConfig = {
  head: {
    script: [{ src: "https://apis.google.com/js/api.js" }]
  }
}

追加方法はいろいろあり、onMountでDOMに挿入する方法でもOK。

型定義の設定

VSCode+TypeScriptなので、型の補完ができるようにしたい。
型定義が提供されているので、インストールする。

$  npm i -D @types/gapi @types/gapi.auth2

今回はOAuthだけなので、@types/gapi.auth2だけだけど、
使いたいAPIごとに追加が必要。

次に、tsconfig.jsonのtypesに、インストールした型定義を追加する。

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "gapi",
      "gapi.auth2",
      "./types"
    ]
  }
}

使い方

使い方はこんな感じ。loadして、initして、やっと使える。

gapi.load()は、callbackしかないので、Promiseで包んでいる。

function async sign() {
  // API Clientの読み込み
  await loadGapiClient();
  // API Clientの初期化
  await initGapiClient();
  
  // OAuth2での認証
  const auth = gapi.auth2.getAuthInstance();
  const user = await gAuth.signIn();
}

function loadGapiClient() {
  return new Promise<void>((resolve, reject) => {
    gapi.load("client:auth2", () => resolve());
  });
}

function async initGapiClient() {
  await gapi.client.init({
    apiKey: process.env.API_KEY,
    clientId: process.env.GAPI_CLIENT_ID,
    scope: "https://www.googleapis.com/auth/drive.readonly",
    discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"]
  });
}

API_KEYやGAPI_CLIENT_IDは、
GCPコンソールの「APIとサービス>認証情報」にある、
「APIキー」と、「OAuth 2.0 クライアント ID」を設定。

Firebaseを利用していて、Firebase AuthのGoogle認証を有効にしていると、
どちらも作成されているので、それを利用すればOK。

また、APIを呼び出す場合はlocalhostであっても、
「OAuth 2.0 クライアント ID」の「承認済みのJavaScript生成元」に設定する必要がある。
「OAuth 2.0 クライアント ID」の編集ボタンから追加/変更が可能。

本番環境では審査が必要な場合も

利用するスコープによっては、審査が必要なので注意。

プライベートユーザーデータへのアクセスをリクエストする
気密性の高いスコープなどの場合、検証して貰う必要がある。

が、Youtubeに動画を用意したりなど、かなり大変。。

以下を参考にするのが良さそう。。

以上!!

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Vue/TypeScriptでGoogle API Client Library for JavaScriptをつかう

インストール

型定義の設定

使い方

本番環境では審査が必要な場合も

参考にしたサイトさま