如何正确配置 OneDrive / SharePoint 文件选取器以与内部 Sharepoint 存储一起使用？

Question

背景

我已遵循 Microsoft 的所有文档，并查看了他们的几个示例。看来我做的一切都是正确的。到目前为止我采取的步骤如下。

配置

这是一个商业共享点，因此基本网址是

https://{tenant}-my.sharepoint.com/_layouts/15/FilePicker.aspx

。我已经验证我可以通过手动导航到该控件来访问文件选择器，没有任何问题。

我们通过使用

https://{tenant}-my.sharepoint.com/.default

范围刷新 AAD Graph 令牌来获取 SharePoint 令牌。除了我的应用程序所需的其他范围之外，图形令牌还具有以下内容：

• 用户.阅读
• 文件.读取
• 文件.读取.全部
• 站点.阅读.全部

我的应用程序是一个图形应用程序，但为了以防万一，我还添加了 Sharepoint 委派权限

• 我的文件.阅读
• 所有站点.阅读

令牌按预期刷新，我收到一个 jwt，其中包含以下属性：

"aud": "https://{tenant}-my.sharepoint.com",
"scp": "User.Read Files.Read Files.Read.All Sites.Read.All ..."

然后，我使用以下内容配置选择器，但是，它永远不会到达

initializeMessageListener

事件。

const click = (e: MouseEvent<HTMLButtonElement>) => {
  e.preventDefault();

  const win = window.open("", "Picker", "width=800,height=600");

  if (!win) {
    throw new Error("Could not open picker window");
  }

  setupPicker(win);
};

const setupPicker = async (win: Window) => {
  const options: IFilePickerOptions = {
    sdk: "8.0",
    entry: {
      sharePoint: {},
    },
    authentication: {},
    messaging: {
      origin: window.location.origin, // http://localhost:5173
      channelId: "27", // hard-coded for now, as in the samples
    },
    typesAndSources: {
      mode: "files",
    },
  };

  const queryString = new URLSearchParams({
    filePicker: JSON.stringify(options),
  });

  const accessToken = `Bearer ${await getAccessToken()}`; // access token with properties above
  const url = `${baseUrl}?${queryString}`;

  const form = win.document.createElement("form");
  form.setAttribute("action", url);
  form.setAttribute("method", "POST");
  win.document.body.appendChild(form);

  const input = win.document.createElement("input");
  input.setAttribute("type", "hidden");
  input.setAttribute("name", "access_token");
  input.setAttribute("value", accessToken);
  form.appendChild(input);

  win.addEventListener("message", initializeMessageListener);
  form.submit();
};

const initializeMessageListener = async (event: MessageEvent) => {
  console.log(event);

  // ideally I would setup the port here, but I never receive any messages from the window
};

我从来没有从窗口收到任何消息。在前 40 秒内，它显示一个空的共享点选择器。之后，它超时，我收到设置超时错误。

我的直觉告诉我，消息传递可能存在某种配置问题。我正在使用

window.location.origin

，在本例中解析为

http://localhost:5173

...这是我的本地应用程序。我不明白为什么我收不到消息。

使用 v1.0 REST API

我拿走了我的 sharepoint 令牌，并尝试在

处调用 sharepoint api

https://{tenant}-my.sharepoint.com/_api/web/folders

我收到了

403 Access Denied

回复。

我可以调用以下端点，其中

/my

是“我的文件”的服务器相对路径。

https://{tenant}-my.sharepoint.com/_api/web/GetFolderByServerRelativeUrl('/my')/Files

但是，它返回一个空对象（这是不准确的）

{
    "d": {
        "results": []
    }
}

如果我尝试直接访问该文件夹，我会得到

403 Access Denied

使用 v2.0 REST API

如果我使用原始图形令牌，我能够调用以下 URL 来获取我的用户帐户的驱动器内容：

https://graph.microsoft.com/v1.0/me/drives
https://graph.microsoft.com/v1.0/me/drives/{id}/root/children

Answer 1

我想知道您是否能够解决这个问题，因为我也陷入了同一步骤，并且文件选择器的行为完全相同。