Google Drive共享对话框报错：CSP与401认证问题排查

问题现象 #

• 按Google Drive API官方文档实现的共享对话框，UI加载正常，但选择「知道链接的任何人」或获取联系人列表时弹出「抱歉，发生内部错误，请求未完成」提示
• 控制台核心报错：
  • POST https://peoplestack-pa.clients6.google.com/$rpc/peoplestack.PeopleStackAutocompleteService/Autocomplete 401
  • Refused to frame 'https://contacts.google.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://drive.google.com".
  • "status": 401, "statusText": "Unauthorized", "message": "Login Required"
• 已确认Bearer Token有效（Postman可正常调用Drive API），且通过Helmet配置了相关CSP规则，但问题仍存在

解决方案 #

1. 修正gapi初始化时机与方式

NextJS环境下必须在客户端组件中初始化gapi，避免SSR阶段的异步加载问题，确保Auth2状态完全就绪后再渲染共享对话框：

import { useEffect } from 'react';

const ShareDialog = () => {
  useEffect(() => {
    const initGapiClient = async () => {
      await window.gapi.load('client:auth2', () => {
        window.gapi.auth2.init({
          client_id: '你的OAuth客户端ID',
          scope: 'https://www.googleapis.com/auth/drive.file'
        }).then(() => {
          // Auth初始化完成后再渲染共享对话框
          renderShareButton();
        });
      });
    };

    // 动态加载gapi脚本
    if (!window.gapi) {
      const script = document.createElement('script');
      script.src = 'https://apis.google.com/js/api.js';
      script.onload = initGapiClient;
      document.body.appendChild(script);
    } else {
      initGapiClient();
    }
  }, []);

  const renderShareButton = () => {
    window.gapi.drive.share.render({
      fileId: '目标文件ID',
      container: 'share-button-container',
      // 显式传入当前用户的Auth Token
      auth: window.gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse().access_token
    });
  };

  return <div id="share-button-container"></div>;
};

export default ShareDialog;

2. 完善CSP配置细节

检查Helmet的CSP规则，修正域名格式并补充必要的资源权限：

import helmet from 'helmet';

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    helmet.contentSecurityPolicy({
      directives: {
        defaultSrc: ["'self'"],
        frameSrc: [
          "'self'",
          "https://contacts.google.com",
          "https://drive.google.com",
          "https://*.clients6.google.com"
        ],
        frameAncestors: [
          "'self'",
          "https://drive.google.com",
          "https://contacts.google.com"
        ],
        connectSrc: [
          "'self'",
          "https://*.clients6.google.com",
          "https://www.googleapis.com"
        ],
        scriptSrc: ["'self'", "https://apis.google.com"],
        // 其他必要规则根据业务需求添加
      }
    });
  }, []);

  return <Component {...pageProps} />;
}

注意：域名不要带末尾斜杠，否则会导致CSP规则不匹配

3. 验证OAuth2权限范围

• 登录Google Cloud Console，确认OAuth客户端的权限范围包含https://www.googleapis.com/auth/drive或https://www.googleapis.com/auth/drive.file
• 在OAuth consent screen中，确保该scope已添加并发布（测试环境可添加测试用户）

4. 清除缓存重置状态

• 清除浏览器的本地存储、会话存储及缓存
• 强制刷新页面，避免旧的gapi缓存导致Auth状态异常

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