GCP静态站点调用私有Cloud Function遇403权限问题求助

1. 核心问题原因 #

本地静态页面调用返回403，本质是你从Identity Platform获取的ID令牌未被Cloud Function的IAM权限认可，或是令牌使用方式有误。

2. 配置Cloud Function IAM权限 #

因为Function必须保持私有，需给Identity Platform用户分配调用权限：

• 打开GCP控制台，定位到你的Cloud Function
• 进入「权限」标签页，点击「添加」
• 输入Identity Platform用户的邮箱（或对应身份池用户ID），选择角色Cloud Functions Invoker（roles/cloudfunctions.invoker）
• 保存设置

3. 正确使用Identity Platform ID令牌 #

从Identity Platform获取的ID令牌，需在请求Function时放在Authorization: Bearer <ID_TOKEN>请求头中，注意两个关键点：

• 令牌受众（Audience）必须匹配Function的URL，或在IAM中明确允许该令牌对应的身份调用
• 令牌有效期默认1小时，前端需处理过期刷新逻辑

4. 本地静态页面前端代码示例 #

以下是集成Identity Platform登录并调用Function的基础HTML+JS代码，替换你的配置信息即可使用：

<!DOCTYPE html>
<html>
<body>
  <form id="submitForm">
    <input type="text" id="inputText" placeholder="输入字符串">
    <button type="submit">提交</button>
  </form>
  <div id="result"></div>

  <script>
    // 替换为你的实际配置
    const FUNCTION_URL = "https://<REGION>-<PROJECT_ID>.cloudfunctions.net/<FUNCTION_NAME>";
    const IDP_CLIENT_ID = "<YOUR_IDENTITY_PLATFORM_CLIENT_ID>";

    // 从Identity Platform获取ID令牌（示例用邮箱密码登录，可根据你的认证方式调整）
    async function getIdToken(email, password) {
      const response = await fetch(`https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${IDP_CLIENT_ID}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password, returnSecureToken: true })
      });
      const data = await response.json();
      return data.idToken;
    }

    // 表单提交处理逻辑
    document.getElementById("submitForm").addEventListener("submit", async (e) => {
      e.preventDefault();
      const inputText = document.getElementById("inputText").value;
      
      // 替换为实际用户登录信息，或集成前端登录UI
      const idToken = await getIdToken("user@example.com", "user_password");

      try {
        const response = await fetch(FUNCTION_URL, {
          method: "POST",
          headers: {
            "Authorization": `Bearer ${idToken}`,
            "Content-Type": "text/plain; charset=utf-8"
          },
          body: inputText
        });

        if (response.ok) {
          const result = await response.text();
          document.getElementById("result").textContent = "返回结果：" + result;
        } else {
          document.getElementById("result").textContent = `错误：${response.status} ${response.statusText}`;
        }
      } catch (error) {
        document.getElementById("result").textContent = "请求失败：" + error.message;
      }
    });
  </script>
</body>
</html>

5. 本地测试注意事项 #

• 跨域问题处理：
  • 在GCP控制台给Cloud Function配置CORS，允许本地域名（如http://localhost:8080）的请求
  • 或用带CORS代理的本地静态服务器（如http-server --cors）启动页面
• 令牌有效性验证：使用命令gcloud auth verify-id-token <ID_TOKEN>检查令牌是否有效、受众是否正确

6. 你的Java Function无需修改 #

当前代码已正确处理POST请求，只要请求通过认证（令牌有效且有权限），就能正常返回输入字符串。

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