使用 Google Picker API 后尝试下载文件时出现错误 401

Question

我有一个 react 应用程序，它允许用户通过管道输入特定的 Google Doc，然后我们分析其中的内容。对于第 1 步，选择文档，我使用的是 this nifty npm package，它还返回给我一个“OAuth 令牌”，我认为它是一个 access_token，我可以使用它来进行 API 调用。我将返回的令牌和 Picker API 返回的数据设置为我的组件中的状态变量，如下所示

<GooglePicker clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
  developerKey={process.env.REACT_APP_GOOGLE_API_KEY}
  scope={SCOPES}
  onAuthenticate={(token: any) => {
    setGoogleToken(token)
  }}
  onChange={(data: any) => {
    setGoogleData(data);
    nextOnboardingStage();
  }}
  onAuthFailed={(data: any) => console.log('on auth failed:', data)}
  multiselect={true}
  navHidden={true}
  authImmediate={false}
  mimeTypes={['application/vnd.google-apps.document']}
  viewId={'DOCS'}>
  <MyCustomButton />
</GooglePicker>

然后我尝试调用Drive API export function在这个函数中下载所述文件

const downloadGoogleDoc = async (authToken: string, fileID: string) => {
  const res = await axios.get(`https://www.googleapis.com/drive/v3/files/${fileID}/export`, {
    headers: {
      'Authorization': `token ${authToken}`
    }
  });
  console.log(res);
};

但是，我在执行此操作时遇到 401 错误。有人能指出我在哪里失去了身份验证吗？非常感谢

---

编辑我的整个组件在下面

const SCOPES = ['https://www.googleapis.com/auth/drive.readonly'];

const Project: React.FC<ProjectInput> = () => {
  const [googleToken, setGoogleToken] = useState<string>();
  const [googleData, setGoogleData] = useState<any>({});

  const [documentData, setDocumentData] = useState();

  const downloadGoogleDoc = async (authToken: string, fileID: string) => {
    try {
      const res = await axios.get(`https://www.googleapis.com/drive/v3/files/${fileID}/export`, {
        headers: {
          'Authorization': `Bearer ${authToken}`
        }
      });
      console.log(res);
    } catch(e) {
      console.log(e);
      console.log(e.message);
    }
  };

  console.log(googleToken);
  console.log(googleData);

  const MyCustomButton = () => {
    return (
      <button className="mx-8 my-2 p-2 rounded bg-blue-500 text-white">
        Select From Google Drive
      </button>
    )
  }

  if (googleToken && googleData.docs) {
    downloadGoogleDoc(googleToken, googleData.docs[0].id);
  }

  return (
    <div className={`ml-${sideBarWidth}`}>
        <FadeIn>
          <div className="flex flex-col min-h-screen bg-gray-500 py-6 justify-center sm:py-12">
            <div className="py-3 sm:max-w-xl sm:mx-auto">
              <div className="bg-white min-w-1xl flex flex-col rounded-xl shadow-lg">
                <div className="flex">
                  <div>
                    <div>
                      <div className="px-8 py-5">
                        <h2 className="text-gray-800 text-3xl font-semibold">Great! Select the document you'd like us to scan</h2>
                      </div>
                    </div>
                    <GooglePicker clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
                      developerKey={process.env.REACT_APP_GOOGLE_API_KEY}
                      scope={SCOPES}
                      onAuthenticate={(token: any) => {
                        setGoogleToken(token)
                      }}
                      onChange={(data: any) => {
                        setGoogleData(data);
                        nextOnboardingStage();
                      }}
                      onAuthFailed={(data: any) => console.log('on auth failed:', data)}
                      multiselect={true}
                      navHidden={true}
                      authImmediate={false}
                      mimeTypes={['application/vnd.google-apps.document']}
                      viewId={'DOCS'}>
                      <MyCustomButton />
                    </GooglePicker>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </FadeIn>
    </div>
  );
};

export default Project;

---

编辑

正如@Tanaike 所说，我需要在我的请求中包含 MimeType，工作功能如下

  const downloadGoogleDoc = async (authToken: string, fileID: string) => {
    try {
      const params = new URLSearchParams([['mimeType', 'text/html']]);
      const res = await axios.get(`https://www.googleapis.com/drive/v3/files/${fileID}/export`, {
        params,
        headers: {
          'Authorization': `Bearer ${authToken}`
        }
      });
      console.log(res);
    } catch(e) {
      console.log(e);
      console.log(e.message);
    }
  };

Answer 1

我相信你的目标和你的情况如下。

• 你想知道401出错的原因。
• 从您的脚本中，我认为您可能想要下载一个不是 Google Docs 文件的文件（文档、电子表格、幻灯片等）。
  • 因为下载Google Docs文件时，endpoint不正确。在Drive API v3中使用“文件：导出”的方法时，需要使用mimeType进行导出。
  • 但是根据您的回复，我了解到您想使用“文件：导出”的方法下载 Google Docs 文件。
• 您的访问令牌可用于从 Google Drive 下载文件。

修改点：

• 当我看到您的以下脚本时，我注意到除了端点之外的一个修改点。

    const res = await axios.get(`https://www.googleapis.com/drive/v3/files/${fileID}/export`, {
      headers: {
        'Authorization': `token ${authToken}`
      }
    });
  

  • 在这种情况下，token 不正确。请修改为Bearer。我认为这是错误401的原因。

• 当使用catch时，可以检索到错误信息。

• 如果您下载二进制文件，则直接检索二进制数据。当时使用responseType: 'arrayBuffer'和responseType: 'blob'时，分别以数组缓冲区和blob形式检索数据。

当以上几点反映到你的脚本中时，它变成如下。

修改后的脚本：

从：

const res = await axios.get(`https://www.googleapis.com/drive/v3/files/${fileID}/export`, {
  headers: {
    'Authorization': `token ${authToken}`
  }
});

至：

const mimeType = "###"; // Please set the mimeType.
const res = await axios.get(`https://www.googleapis.com/drive/v3/files/${fileID}/export?mimeType=${mimeType}`, {
  // responseType: `arrayBuffer`, // or 'blob'
  headers: {
    'Authorization': `Bearer ${authToken}`
  }
}).catch(err => console.log(err.response));
console.log(res);  // or res.data

注意：

• 在这个修改后的脚本中，它假设您的访问令牌可用于从 Google Drive 下载文件。所以请注意这一点。

• 当您使用“文件：导出”的方法时，请使用 Google Docs 文件作为文件 ID。请注意这一点。 Ref

参考资料：

• Files: export
• Files: get
• Download files