Vue3でGoogle APIを使う

ライブラリをロードする

Google API Client Library for JavaScriptを使う

Google APIは専用のライブラリをGoogle自身が開発していて、JavaScript版もあります。

Google API Client Library for JavaScript

こちらをVue 3でロードすれば、Vue 3でも使えます。Vue 3で外部ライブラリをロードする際は、基本的にはプラグインにする必要がありますが、強制的にロードさせることもできます。

Vue.jsのコンポーネントで外部scriptをロードする方法

ラッパープラグインを使う

ただ、Vue 3に対応したラッパープラグインを使った方が楽なところもあります。問題は、Vue 3に対応したラッパープラグインが少ないことですが、「vue-gapi」というプラグインはバージョン2でVue 3に対応しています。

vue-gapi

ドキュメントがわかりづらいですが、基本的にはラッパーなので、Google API Client Library for JavaScriptと使い方は一緒です。

実際に使ってみる

今回はvue-gapiを使ってVue 3でGoogle APIを呼んでみます。

main.jsでロードする

プラグインをインストールして、

yarn add vue-gapi

main.jsでロードします。

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import VueGapi from 'vue-gapi'

const app = createApp(App)

app.use(VueGapi, {
  apiKey: 'APIキー',
  clientId: 'xxxxxxxxx.apps.googleusercontent.com',
  discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
  scope: 'https://www.googleapis.com/auth/webmasters.readonly https://www.googleapis.com/auth/drive.appdata',

app.mount('#app')

Google APIの「APIキー」や「クライアントID」などの必須キーの取得は他に詳しいサイトがたくさんあるので、そちらを調べてみてください。

ポイントとしては、discoveryDocsとscopeです。ここはGoogleの公式から必要なものを引っ張ってきます。

Discovery Document: list

discoveryDocsは、上記のページの右側に表示される「Try this method」で一覧が出るので、そこで探すことができます。

scopeについては、下記のページにまとまっています。

GoogleAPIのOAuth2.0スコープ

ここまでやれば、Vue 3プロジェクトでGoogle APIを呼び出す準備ができました。

実際にコンポーネントで使ってみる

ということで、コンポーネントで使ってみます。

vue-gapiプラグインはグローバルにロードしているので「this.$gapi」でコンポーネントからアクセスできます。

this.$gapiはブラウザ向けJavascript Google APIライブラリの「gapi()」に相当するので、基本的に同じものが使えます。

一部、よく使うものは専用のラッパーが用意されているのでそちらを使ってもOKです。

$gapi | vue-gapi

まずはログイン周りから。

ログイン状態のチェック。

await this.$gapi.listenUserSignIn(async (isSignedIn) => {
  if(isSignedIn){
    // 何かの処理
  }else{
    // 何かの処理
  }
})

ログイン・ログアウト関数。

methods: {
  login() {
    this.$gapi.login();
  },
  logout() {
    this.$gapi.logout();
  }
}

簡単ですね。

続いて、APIを叩いてみましょう。

discoveryDocsがある場合は、「this.$gapi.getGapiClient()」でクライアントをロードしておけば、「client()」以下にdiscoveryDocsでロードしたメソッドが格納されます。

例えば、Google Driveなら

const gapi = await this.$gapi.getGapiClient();
const params = {
  fields: "nextPageToken, files(id, name, modifiedTime, size, description)",
  pageSize: 100,
  orderBy: "modifiedTime desc",
};
const googleDriveFileList = await gapi.client.drive.files.list(params);

こんな感じです。先程のmain.jsでGoogle Drive用のdiscoveryDocsをロードさせておいたので、clientの中に「drive」メソッドとして収納されています。

逆に、discoveryDocsがないAPIの場合は、「client.request()」でGoogle APIのURLを直接叩くことが出来ます。

const gapi = await this.$gapi.getGapiClient();

await gapi.client.request({
  path: '/upload/drive/v3/files/' + gfileId,
  method: 'PATCH',
  params: {
    uploadType: 'media'
  },
  name: "hoge.txt",
  body: bodyData,
});

こんな感じです。

上記のGoogle DriveにアップロードするAPIは、discoveryDocsからは使えないので、client.request()でAPIコールをしている形です。

簡単にですが、Vue 3でGoogle APIを使う方法でした。

Vue 3のアプリで、Googleログインを実装する場合や、Google DriveのappDataFolderを使いたい時なんかは、この方法で簡単にGoogle APIが使えます。