从 next.js 应用程序的 onedrive 检索文件

Question

我正在使用 react-onedrive-filepicker 从位于 OneDrive 上的选定文件中检索文件内容。

我的代码是这样的：

<ReactOneDriveFilePicker
 clientID={process.env.NEXT_PUBLIC_MICROSOFT_CLIENT_ID}
 action="query"
 multiSelect={false}
 advanced={{
     redirectUri: "https://graph.microsoft.com/v1.0/me/"
 }}
 onSuccess={(result) => {
     alert(JSON.stringify(result));
 }}
 onCancel={(result) => {
     alert(JSON.stringify(result));
 }}
>
 <Button className="btn btn-md btn-primary">MSOneDrive</Button>
</ReactOneDriveFilePicker>

我实际上遇到了这个错误

我在这里不知所措，因为我不知道应该期待什么 URI 也不知道如何传递它...我已经在我的 Azure 应用程序上注册了 https://login.live.com/oauth20_desktop.srf，但它似乎不是显示用户 OneDrive 文件夹的正确地址...

我哪里错了？

我也在 react-onedrive-filepicker GitHub 上开了一个 issue，但我担心 repo 可能没有维护..

编辑

我现在将 MS Graph 的 redirectUri 值传递给组件，但它声称 redirect uri is not in the same domain as picker sdk...现在，它看起来像一个永无止境的循环：

我无法将页面 URL 放置在托管选择器的位置，因为它是一个动态地址...
但即使我将本地 URI 放在那里，又有什么意义呢？我不会看到我的用户的 OneDrive 文件...

令人印象深刻的是让 Google 选择器工作是多么容易，而让 MS 工作是多么困难...

Answer 1

转到您（我假设）在 Azure 中打开的客户端应用程序，您需要注册您选择的基本 URI - 您可以在此处查看完整指南：

https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app

在“添加重定向 URI”下

Answer 2

TL;DR

您的应用程序 URL 应该是您可以在浏览器中访问您的应用程序的路径。此 URL 必须在 Azure 客户端配置以及您的 ReactOneDriveFilePicker 组件中注册为重定向 URI。

要访问 Microsoft API，需要执行不同的步骤。首先，您必须向 Microsoft 注册您的应用程序。然后用户授权您的应用程序访问他们的数据，然后您才被允许访问这些文件。您的挣扎实际上可能来自授权步骤。 Microsoft 使用 the OAuth protocol for managing access to their API resources (Docs: Auth and available auth flows)，在此期间用户被重定向到 Microsoft 站点，授权您的应用程序并被重定向回您的应用程序：

（图表来自 ArchitectXChange.com）

只有这样，您才能访问 API 资源，在您的情况下是 OneDrive 文件。

重定向 URI 现在指的是 您的文件选择器 所在的确切地址。假设您是运行您在 localhost 上的应用程序，路径为 /onedrive-filepicker，那么您的重定向 URI 将是 http://localhost/onedrive-filepicker，因为这是您的按钮所在的位置。现在您必须将此 URL 放入 Azure 的应用程序注册中，以便 Azure 确保没有人代表您的应用程序开玩笑。当然，您必须在使用 redirectUri 属性.

调用 API 时确认重定向 URI

您可以在此找到更多信息 in the OneDrive File Picker SDK docs and on their set up section.

编辑：如果您的选择器有一个动态的 url，您将需要一些固定的重定向路由。这可以是 http:///localhost/redirect。在开始 Auth 流程之前，您必须存储当前的 state/route，例如在本地存储中。重定向完成后，您完成授权并再次将用户重定向到之前存储的 state/route.

将用户重定向到您自己的应用程序而不是他们的 OneDrive 的关键在于，您的应用程序想要访问这些文件。如果用户被重定向到 OneDrive，也许他们会看到他们的文件，但 OneDrive 不知道如何将信息发送回您的应用程序。如果您重定向到您的应用程序，它会保持对 UI 的控制，可以提示用户 select 一个文件并使用 OneDrive SDK.[= 接收 selected 文件17=]

也许它会帮助您按照 Microsoft 文档立即使用 SDK，而不是在未记录的 third-party 组件上构建。

从 next.js 应用程序的 onedrive 检索文件

retrive file from one drive from a next.js application

filepicker

reactjs

onedrive

next.js

TL;DR