React应用通过IAP认证后，如何获取令牌认证GCS客户端库？

核心逻辑 #

IAP的HttpOnly Cookie确实无法通过前端JS读取，但用户已通过IAP完成Google账号认证，可直接利用Google OAuth 2.0客户端机制获取当前用户的Access Token，以此认证GCS客户端库，无需依赖IAP的Cookie。

具体步骤 #

1. 配置GCP OAuth客户端ID #

在GCP控制台「API和服务」→「凭据」页面，创建Web应用类型的OAuth客户端ID：

• 将你的Cloud Run应用域名加入「已授权的JavaScript来源」
• 若使用授权码流（推荐PKCE模式），把同一域名加入「已授权的重定向URI」

2. 集成Google Auth到React应用 #

使用官方维护的@react-oauth/google库获取Access Token：

• 安装依赖：

  npm install @react-oauth/google @google-cloud/storage
  

• 初始化Auth Provider（入口文件如index.js）：

  import { GoogleOAuthProvider } from '@react-oauth/google';
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './App';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <GoogleOAuthProvider clientId="你的OAuth客户端ID">
      <App />
    </GoogleOAuthProvider>
  );
  

• 在上传组件中获取令牌并初始化GCS客户端：

  import { useGoogleLogin } from '@react-oauth/google';
  import { Storage } from '@google-cloud/storage';
  import { useEffect, useState } from 'react';
  
  export default function FileUpload() {
    const [selectedFile, setSelectedFile] = useState(null);
    const login = useGoogleLogin({
      onSuccess: async (tokenRes) => {
        if (!selectedFile) return;
        
        // 用Access Token初始化GCS客户端
        const storage = new Storage({
          credentials: { access_token: tokenRes.access_token },
        });
  
        // 上传文件到GCS存储桶
        const bucket = storage.bucket('你的GCS存储桶名称');
        const file = bucket.file(selectedFile.name);
        
        await file.save(selectedFile, {
          contentType: selectedFile.type,
          // 可选：设置文件访问权限，比如public-read
          // acl: 'public-read'
        });
  
        alert('文件上传成功');
      },
      // 按需配置权限范围，这里是读写GCS的权限
      scope: 'https://www.googleapis.com/auth/devstorage.read_write',
      // 因为用户已通过IAP登录，用prompt:none直接获取令牌，不弹出登录框
      prompt: 'none',
    });
  
    useEffect(() => {
      // 页面加载时自动获取令牌
      login();
    }, [login]);
  
    const handleFileChange = (e) => {
      setSelectedFile(e.target.files[0]);
    };
  
    return (
      <div>
        <input type="file" onChange={handleFileChange} />
        <button onClick={login} disabled={!selectedFile}>
          上传到GCS
        </button>
      </div>
    );
  }
  

3. 配置GCS IAM权限 #

确保通过IAP登录的用户（或其所属群组）在目标GCS存储桶上拥有对应IAM权限，比如：

• roles/storage.objectCreator：仅允许上传文件
• roles/storage.objectAdmin：允许读写管理文件

4. 补充配置 #

• GCS CORS规则：如果存储桶未配置CORS，需在GCS控制台添加规则，允许你的Cloud Run域名发起PUT、POST等请求。
• 令牌自动刷新：@react-oauth/google会自动处理Access Token的过期刷新，无需手动实现。

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