如何在Vue3应用中集成Google Calendar API

以下是两种在Vue3项目中集成Google Calendar的可行方案，基于你已有的API密钥和Client ID：

方案一：直接使用 Google API JavaScript 客户端（gapi） #

这是最原生的实现方式，无需依赖第三方Vue库，灵活性高。

1. 加载gapi脚本
   在项目的public/index.html中添加Google API脚本：

<script src="https://apis.google.com/js/api.js"></script>

2. 在Vue组件中初始化并使用
   创建组件或封装一个可复用的逻辑，示例代码如下：

<template>
  <div>
    <button v-if="!isSignedIn" @click="signIn">登录Google账号</button>
    <button v-else @click="fetchEvents">获取我的日历事件</button>
    <ul v-if="calendarEvents.length">
      <li v-for="event in calendarEvents" :key="event.id">
        {{ event.summary }} - {{ event.start.dateTime || event.start.date }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const isSignedIn = ref(false)
const calendarEvents = ref([])
const API_KEY = '你的API密钥'
const CLIENT_ID = '你的Client ID'
const SCOPE = 'https://www.googleapis.com/auth/calendar.readonly' // 按需调整权限

// 初始化gapi客户端
const initGapi = async () => {
  await new Promise(resolve => window.gapi.load('client:auth2', resolve))
  
  await window.gapi.client.init({
    apiKey: API_KEY,
    clientId: CLIENT_ID,
    discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"],
    scope: SCOPE
  })

  const authInstance = window.gapi.auth2.getAuthInstance()
  isSignedIn.value = authInstance.isSignedIn.get()
  
  // 监听登录状态变更
  authInstance.isSignedIn.listen(status => isSignedIn.value = status)
}

// Google账号登录
const signIn = () => {
  window.gapi.auth2.getAuthInstance().signIn()
}

// 获取日历事件
const fetchEvents = async () => {
  if (!isSignedIn.value) return
  try {
    const response = await window.gapi.client.calendar.events.list({
      calendarId: 'primary', // 默认获取主日历，可指定其他日历ID
      timeMin: new Date().toISOString(),
      showDeleted: false,
      singleEvents: true,
      maxResults: 10,
      orderBy: 'startTime'
    })
    calendarEvents.value = response.result.items
  } catch (err) {
    console.error('获取日历事件失败:', err)
  }
}

onMounted(() => initGapi())
</script>

方案二：结合Vue3登录库+手动调用日历API #

由于vue-gapi对Vue3支持有限，可使用vue3-google-signin处理登录逻辑，再配合gapi调用日历接口：

1. 安装依赖

npm install vue3-google-signin

2. 全局配置
   在src/main.js中初始化插件：

import { createApp } from 'vue'
import App from './App.vue'
import { GoogleSignInPlugin } from 'vue3-google-signin'

createApp(App)
  .use(GoogleSignInPlugin, {
    clientId: '你的Client ID'
  })
  .mount('#app')

3. 组件中使用

<template>
  <div>
    <GoogleSignInButton @success="handleSignInSuccess" />
    <button v-if="isSignedIn" @click="fetchEvents">获取日历事件</button>
    <div v-for="event in events" :key="event.id">{{ event.summary }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { GoogleSignInButton, useGoogleSignIn } from 'vue3-google-signin'

const { isSignedIn } = useGoogleSignIn()
const events = ref([])
const API_KEY = '你的API密钥'

// 初始化日历API客户端
const initCalendarClient = async () => {
  await new Promise(resolve => window.gapi.load('client', resolve))
  await window.gapi.client.init({
    apiKey: API_KEY,
    discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"]
  })
}

// 处理登录成功
const handleSignInSuccess = () => {
  console.log('登录成功')
}

// 获取日历事件
const fetchEvents = async () => {
  try {
    const res = await window.gapi.client.calendar.events.list({
      calendarId: 'primary',
      maxResults: 10
    })
    events.value = res.result.items
  } catch (err) {
    console.error(err)
  }
}

onMounted(() => initCalendarClient())
</script>

关键注意事项 #

• 确保在Google Cloud控制台中启用了Google Calendar API（API库中搜索并启用）
• API密钥需配置HTTP referrer限制，仅允许你的项目域名访问，避免密钥泄露
• Client ID需在OAuth同意屏幕中配置正确的授权域名（本地开发可添加http://localhost:5173）
• 权限Scope按需选择：只读用calendar.readonly，读写用calendar，避免请求不必要的权限

内容的提问来源于stack exchange，提问作者Branch