Microsoft 文件浏览器 SDK(预览版)

Microsoft 文件浏览器 SDK 提供可重用的 React 组件,用于使用 Microsoft Graph 构建文件体验。 通过使用 SDK,任何 React 应用程序可通过提供有效的 access_token 来呈现文件并对文件执行操作。 在本指南中,我们将介绍如何让 React 应用快速呈现 Microsoft Graph 的“文件浏览器”组件。

设置

1. 添加“Microsoft 文件浏览器”作为依赖项

为了使用 SDK,你将需要向项目中添加 @microsoft/file-browser 作为依赖项。 使用 NPM,你可通过运行以下命令来添加依赖项:

$ npm i --save @microsoft/file-browser

2. 添加 SDK 同级依赖项

Microsoft 文件浏览器 SDK 依赖于若干同级依赖项。 捆绑包要求其使用者提供 reactreact-dom。 如果正在使用 TypeScript,则包还依赖 Reactoffice-ui-fabric-react 的键入。 office-ui-fabric-react 组合本身包括在捆绑包中。

下面是一个示例 package.json 节选,显示 @microsoft/file-browser 上具有应在项目中匹配的相应同级依赖项的依赖项:

"dependencies": {
  "@microsoft/file-browser": "~1.0.0-preview.0",
  "office-ui-fabric-react": "^5.123.0",
  "react": "^16.5.2",
  "react-dom": "^16.5.2",
},
"devDependencies": {
  "@types/react": "^16.4.14",
  "@types/react-dom": "^16.0.7"
}

3. 呈现文件浏览器

向 React 项目中添加了所需的依赖项后,即可呈现 GraphFileBrowser 组件。 若要成功获取并显示文件,组件需要通过必需的 getAuthenticationToken 属性返回有效的 access_token。下面是一个示例实现:

class App extends React.Component {
  public render() {
    return (
      <GraphFileBrowser 
        getAuthenticationToken={this.getAuthenticationToken} />
    );
  }

  private getAuthenticationToken() {
    return Promise.resolve('<access_token>');
  }
}

在上面的示例中,你需要将 <access_token> 替换为有效的访问令牌来进行身份验证。 快速测试有效令牌的一种方式是登录到 Microsoft Graph 资源管理器。 登录之后,你可以从 access_token 查询参数中复制你的帐户的访问令牌。

有关为 Microsoft Graph 获取有效身份验证令牌的详细信息可在本教程中找到。

后续步骤

详细了解如何使用文件浏览器选择文件自定义文件浏览器