如何在Vue3应用程序中使用Google Calendar API

Question

最近，我正在构建vue应用程序，需要集成谷歌日历。 我在谷歌云上创建了项目并获取 API 密钥和客户端 ID。 但我担心，如何在 vue 应用程序中使用这个 api 密钥。 我找到了两个解决方案gapi和vue-gapi。 但我找不到如何在 vue3 和 vue-gapi 中使用gapi。

请让我知道如何将谷歌日历集成到我的 vue3 项目中。 预先感谢。

Answer 1

我设法让它作为单个组件工作，而不使用外部库。

我使用了 Google 快速入门指南 (https://developers.google.com/calendar/api/quickstart/js) 中的代码以及已弃用的 vue-gapi (https://www.npmjs) 中的一些代码。 com/package/vue-gapi）。

<template>
<div @click="handleAuthClick">Click here</div>
</template>

<script setup>
import { onMounted } from 'vue';

const CLIENT_ID = 'xxxxx';
const API_KEY = 'xxxxx';
const DISCOVERY_DOC = 'https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest';
const SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';

let tokenClient;
let gapiInited = false;
let gisInited = false;

function gapiLoaded() {
    window.gapi.load('client', initializeGapiClient);
}

async function initializeGapiClient() {
    await window.gapi.client.init({
        apiKey: API_KEY,
        discoveryDocs: [DISCOVERY_DOC],
    });
    gapiInited = true;
    maybeEnableButtons();
}

function gisLoaded() {
    console.log('gisLoaded')
    tokenClient = window.google.accounts.oauth2.initTokenClient({
        client_id: CLIENT_ID,
        scope: SCOPES,
        callback: '',
    });
    gisInited = true;
    maybeEnableButtons();
}

function maybeEnableButtons() {
    if (gapiInited && gisInited) {
        console.log('GAPI initialised')
    }
}

function handleAuthClick() {
    if (gapiInited && gisInited) {
      tokenClient.callback = async (resp) => {
          if (resp.error !== undefined) {
          throw (resp);
          }
          await listUpcomingEvents();
      };

      if (window.gapi.client.getToken() === null) {
          tokenClient.requestAccessToken({prompt: 'consent'});
      } else {
          tokenClient.requestAccessToken({prompt: ''});
      }
    }
}

function handleSignoutClick() {
    const token = window.gapi.client.getToken();
    if (token !== null) {
        window.google.accounts.oauth2.revoke(token.access_token);
        window.gapi.client.setToken('');
    }
}

async function listUpcomingEvents() {
  let response;
  try {
      const request = {
      'calendarId': 'primary',
      'timeMin': (new Date()).toISOString(),
      'showDeleted': false,
      'singleEvents': true,
      'maxResults': 10,
      'orderBy': 'startTime',
      };
      response = await window.gapi.client.calendar.events.list(request);
  } catch (err) {
      console.log('GAPI error:' + err.message)
      return;
  }

  const events = response.result.items;
    if (!events || events.length == 0) {
        console.log('GAPI: No events found.')
        return;
    }
    const output = events.reduce(
        (str, event) => `${str}${event.summary} (${event.start.dateTime || event.start.date})\n`,
        'Events:\n');
    console.log('GAPI: ' + output)
}

onMounted(()=>{
  let gapiScript = document.createElement('script')
  gapiScript.defer = true
  gapiScript.async = true
  gapiScript.onreadystatechange = gapiScript.onload = function () {
    const interval = setInterval(function () {
      if (!gapiScript.readyState || /loaded|complete/.test(gapiScript.readyState)) {
        clearInterval(interval)
        if (window.gapi) {
          gapiLoaded()
        } else {
          console.log('Failed to load gapi')
        }
      }
    }, 100)
  }
  gapiScript.src = 'https://apis.google.com/js/api.js'
  document.head.appendChild(gapiScript)

  let gisScript = document.createElement('script')
  gisScript.defer = true
  gisScript.async = true
  gisScript.onreadystatechange = gisScript.onload = function () {
    const interval = setInterval(function () {
      if (!gisScript.readyState || /loaded|complete/.test(gisScript.readyState)) {
        clearInterval(interval)
        if (window.google && window.google.accounts) {
          gisLoaded()
        } else {
          console.log('Failed to load gis')
        }
      }
    }, 100)
  }
  gisScript.src = 'https://accounts.google.com/gsi/client'
  document.head.appendChild(gisScript)
})

</script>

<style></style>