Vue JS 3 + Firebase：如何调用需要身份验证的 Cloud Run Function（第二代 Firebase Function）

Question

1. 我的应用程序是使用 Vue JS 3 创建的，并且 firebase 安装为 依赖性。

2. 我创建了一个 firebase 应用程序来处理后端。到 处理来自我正在创建的 Vue JS 应用程序的其余 api 调用 firebase 功能。

3. 该函数在 package.json 中有以下依赖项：

   “依赖关系”：{ “cors”：“^2.8.5”， "express": "^4.21.2", “firebase-admin”：“^12.6.0”， “firebase-functions”：“^6.0.1” },

4. functions文件夹中的index.js如下所示：

const {onRequest} = require("firebase-functions/v2/https");
const {getAuth} = require("firebase-admin/auth");

const express = require("express");
const app = express();

// Add middleware to authenticate requests
app.use(async (req, res, next) => {
  const authHeader = req.headers.authorization || "";
  const token = authHeader.split("Bearer ")[1];

  if (!token) {
    return res.status(401).json({error: "Unauthorized"});
  }

  try {
    const decodedToken = await getAuth().verifyIdToken(token);
    req.user = decodedToken;
    next();
  } catch (error) {
    console.error("Error verifying token:", error);
    res.status(403).json({error: "Forbidden"});
  }
});

app.get("/hello", (req, res) => {
  res.json({message: "Hello, world!"});
});

// Expose Express API as a single Cloud Function:
exports.api = onRequest(app);

这里函数的名称是：“api”。 现在，此设置在测试时在本地运行良好。

部署函数后，函数 url 如下所示：“https://REGION-MY-APP-NAME.cloudfunctions.net/api”。

现在，在 Vue JS 3 应用程序中，使用 axios 我尝试达到上述终点并使用 firebase 方法生成如下所示的令牌：

    const userCredential = await signInWithEmailAndPassword(auth, emailId.value, password.value);
const token = await userCredential.user.getIdToken(); // Get the token

但这会在浏览器中出现 CORS 错误，（注意：我尝试在函数代码中添加 cors 策略以允许所有来源，但没有帮助）

另一方面，在Cloud run Function日志中，它说：

“请求未经过身份验证。要么允许未经身份验证 调用或设置正确的授权标头。阅读更多内容 https://cloud.google.com/run/docs/secure/authentication 其他 故障排除文档可在以下位置找到： https://cloud.google.com/run/docs/troubleshooting#unauthorized-client”

收到此错误后，我也从我的index.js 中删除了以下代码并进行了尝试。但给出了同样的错误：

// Add middleware to authenticate requests
app.use(async (req, res, next) => {
  const authHeader = req.headers.authorization || "";
  const token = authHeader.split("Bearer ")[1];

  if (!token) {
    return res.status(401).json({error: "Unauthorized"});
  }

  try {
    const decodedToken = await getAuth().verifyIdToken(token);
    req.user = decodedToken;
    next();
  } catch (error) {
    console.error("Error verifying token:", error);
    res.status(403).json({error: "Forbidden"});
  }
});

我知道，功能设置下有一个“允许未经身份验证的调用”选项。但由于一些政策限制我无法这样做。

我也知道我的 Vue JS 3 应用程序中的令牌生成方法存在一些问题。我找到了一个在node js中生成令牌的链接（https://cloud.google.com/docs/authentication/get-id-token#node.js）

我的问题是我的前端只有一个 Vue JS 3 应用程序，我想使用这个第二代函数作为我的后端，并使用 Express js 来执行后端相关任务，例如从 Cloud FireStore 存储和检索数据以及相关的事情。但卡在这个身份验证错误。需要帮助解决此 403 身份验证错误。

如果需要任何其他信息。请告诉我，我会提供。

Answer 1

我在试图弄清楚如何允许“ 允许未经身份验证的调用”位于： https://stackoverflow.com/a/78545216/5503408