Web应用中如何用JavaScript+服务账户调用Google Calendar API？

阿华AIGC实验室

2026-5-15

使用服务账户实现无登录访问Google Calendar API（JavaScript方案）

嘿，我明白你现在的困惑——Google官方的JS快速入门大多是针对用户登录场景的，服务账户这块确实没太多前端相关的指引，而且这里有个关键安全点得先讲清楚：服务账户的私钥绝对不能直接放在前端JS代码里（因为前端代码是完全公开的，泄露私钥会导致你的Google资源被滥用）。所以正确的方案是：用后端（比如Node.js）来持有服务账户密钥并调用Calendar API，前端再通过请求自己的后端接口来获取日历数据。

下面是具体的实施步骤：

1. 先完成服务账户的基础配置

登录Google Cloud控制台，创建或选择你的项目，然后启用「Google Calendar API」
在「IAM与管理」→「服务账户」页面，创建一个新的服务账户，下载对应的JSON密钥文件（保存好，这个文件包含敏感信息，别泄露）
打开你要展示的目标Google日历，进入「设置和共享」→「添加人员和群组」，把服务账户的邮箱（在密钥文件里的client_email字段）添加进去，权限设置为「查看者」（如果需要修改的话选更高权限，但展示数据只需要查看者）

2. 用Node.js写后端代理（核心部分）

因为前端不能直接用服务账户，咱们用Node.js来做中间层，它和JS生态一致，对你来说上手也快：

初始化项目：npm init -y，然后安装依赖：npm install googleapis cors express
创建一个server.js文件，代码示例如下：

const express = require('express');
const cors = require('cors');
const { google } = require('googleapis');
const serviceAccount = require('./path/to/your/service-account-key.json'); // 替换成你的密钥文件路径

const app = express();
app.use(cors()); // 处理跨域，根据你的前端域名可以配置更严格的规则

// 初始化服务账户认证
const auth = new google.auth.JWT(
  serviceAccount.client_email,
  null,
  serviceAccount.private_key,
  ['https://www.googleapis.com/auth/calendar.readonly'] // 只请求只读权限，更安全
);

// 获取日历事件的接口
app.get('/api/calendar-events', async (req, res) => {
  try {
    const calendar = google.calendar({ version: 'v3', auth });
    const response = await calendar.events.list({
      calendarId: 'your-calendar-id@group.calendar.google.com', // 替换成你的目标日历ID
      timeMin: new Date().toISOString(),
      maxResults: 10, // 控制返回的事件数量
      singleEvents: true,
      orderBy: 'startTime',
    });
    res.json(response.data.items);
  } catch (error) {
    console.error('获取日历数据失败:', error);
    res.status(500).json({ error: 'Failed to fetch calendar events' });
  }
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

启动后端：node server.js

3. 前端请求后端接口展示数据

现在前端就可以通过简单的JS代码请求后端接口，拿到数据后渲染到页面上：

// 前端JS代码示例
async function fetchCalendarEvents() {
  try {
    const response = await fetch('http://localhost:3001/api/calendar-events');
    const events = await response.json();
    
    // 渲染事件到页面，比如插入到某个div里
    const eventsContainer = document.getElementById('calendar-events');
    events.forEach(event => {
      const eventElement = document.createElement('div');
      eventElement.innerHTML = `
        <h3>${event.summary}</h3>
        <p>开始时间: ${new Date(event.start.dateTime || event.start.date).toLocaleString()}</p>
      `;
      eventsContainer.appendChild(eventElement);
    });
  } catch (error) {
    console.error('加载日历数据失败:', error);
  }
}

// 页面加载时调用
window.onload = fetchCalendarEvents;