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 依赖于若干同级依赖项。 捆绑包要求其使用者提供 react 和 react-dom。
如果正在使用 TypeScript,则包还依赖 React 和 office-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 获取有效身份验证令牌的详细信息可在本教程中找到。
后续步骤
详细了解如何使用文件浏览器选择文件或自定义文件浏览器。