使用 Google（Classroom、Docs、Sheets、Drive）API 架构实现端到端加密

Question

是否可以在客户端代码中实现 Google OAuth，以便我可以使用 OAuth 对象调用 googleapi，如下所示：

const studentData = await classroom.courses.students.list({
  courseId,
  auth: authClient,
});

为了实现E2EE，我将很多原本位于Node js后端的代码迁移到了Vite前端。我的理解是，要拥有完整的 E2EE，后端不应处理包含上面的 Students.list 等数据的 API 调用。这个 authClient 是用

创建的

const authClient = new google.auth.OAuth2(
  process.env.GOOGLE_CLIENT_ID,
  process.env.GOOGLE_CLIENT_SECRET,
  process.env.GOOGLE_REDIRECT_URL,
);

但是，我无法在我的前端公开客户端机密。我尝试过仅使用访问令牌，但失败并出现 401 需要登录错误：

const studentData = await classroom.courses.students.list({
  courseId,
  access_token: req.user.accessToken,
});

"code": 401,
"message": "Request is missing required authentication credential. Expected OAuth 2 
 access token, login cookie or other valid authentication credential. See
 https://developers.google.com/identity/sign-in/web/devconsole-project.",

响应通过并且数据以任何方式记录到控制台（不确定为什么），但 Gaxios 错误阻止代码按预期执行。

可以通过使用正确的端点直接获取它来修复此问题：

await (fetch(
  `https://classroom.googleapis.com/v1/courses/${courseId}/students`,
  {
    headers: {
      Authorization: `Bearer ${req.user.accessToken}`,
    },
  },
) as unknown as GaxiosPromise<classroom_v1.Schema$ListStudentsResponse>);

但是我丢失了一些必须手动输入的信息，如图所示。

我尝试使用 key 属性，但它给出了此错误：

await classroom.courses.students.list({
  courseId,
  key: "API_KEY",
});

此 API 不支持 API 密钥。预期的 OAuth2 访问令牌或其他 断言主体的身份验证凭证。看 https://cloud.google.com/docs/authentication

我计划在客户端使用 Firebase 身份验证与 Google 提供商，因此我在前端获得了 access_token。是否有类似的方法从 Firebase Auth 获取 OAuth 对象？

我想知道我是否误解了实现 E2EE 的选项，或者我是否缺少某些配置。

Answer 1

Firebase Auth 提供的访问令牌可以替换您通常在 Node.js 服务器中使用的 OAuth2Client：

     const result = await signInWithPopup(auth, provider);
     const credential = GoogleAuthProvider.credentialFromResult(result);

     const token = credential?.accessToken;
     const studentData = await classroom.courses.students.list({
        courseId,
        auth: token,
      });

这很奇怪，因为当我尝试使用从 Passport-google-oauth2 获得的访问令牌时，它会抛出错误。

它在第一次后也停止工作，因为据我所知，googleapis 包是用于服务器环境的，而 Vite 开始抛出错误。

如何使用 React、Redux 和 Webpack 实现 Google API

手动输入获取请求是目前最好的解决方案。