如何在Angular 14中通过服务账号使用非公开Google Sheets作为只读数据库

1. 服务账号与表格权限配置 #

• 登录Google Cloud控制台，创建服务账号并生成JSON格式的密钥文件。
• 将服务账号的邮箱（格式类似xxx@xxx.iam.gserviceaccount.com）添加为目标Google Sheets文档的只读协作者，无需将表格设为公开。

2. Angular项目集成方案 #

核心原则 #

浏览器环境下不能直接使用服务账号密钥（会暴露敏感信息），必须通过后端代理中转请求，再由Angular前端调用后端接口获取数据。

步骤1：搭建后端代理（以Node.js/Express为例） #

编写接口处理Sheets API请求：

const { google } = require('googleapis');
const express = require('express');
const app = express();

// 导入服务账号密钥
const serviceAccount = require('./your-service-account-key.json');

// 初始化授权
const auth = new google.auth.GoogleAuth({
  credentials: serviceAccount,
  scopes: ['https://www.googleapis.com/auth/spreadsheets.readonly']
});

const sheets = google.sheets({ version: 'v4', auth });

// 定义获取表格数据的接口
app.get('/api/sheets-data', async (req, res) => {
  try {
    const response = await sheets.spreadsheets.values.get({
      spreadsheetId: '你的表格ID',
      range: 'Sheet1!A1:Z100' // 按需调整数据范围
    });
    res.json(response.data.values);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3000, () => console.log('后端服务启动在3000端口'));

步骤2：Angular前端调用接口 #

在Angular组件中通过HttpClient请求后端数据：

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sheets-viewer',
  template: `
    <div *ngIf="sheetData">
      <table>
        <tr *ngFor="let row of sheetData">
          <td *ngFor="let cell of row">{{ cell }}</td>
        </tr>
      </table>
    </div>
  `
})
export class SheetsViewerComponent implements OnInit {
  sheetData: any[][] | undefined;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<any[][]>('http://localhost:3000/api/sheets-data').subscribe({
      next: (data) => this.sheetData = data,
      error: (err) => console.error('数据获取失败:', err)
    });
  }
}

3. 关键注意事项 #

• 服务账号仅需授予只读权限，最小化权限风险。
• 严格控制Sheets API的range参数，只请求必要的数据范围，提升加载效率。
• 生产环境需配置后端CORS规则，确保Angular前端可正常跨域请求。

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