SharePoint Embedded 应用程序中的 Fluid Framework

集成 Fluid Framework 和 SharePoint Embedded ，以无缝高效地将文档协作合并到应用程序中。

背景

Fluid Framework 是用于分发、同步和保存共享数据的客户端库的集合。 这些库允许多个客户端同时实时创建和作共享数据结构。 Fluid Framework 允许开发人员对共享数据使用与本地数据相同的做法，例如，Fluid 对象的工作方式与本地 TypeScript 对象相同。

快速入门

开始在 Fluid Sample Apps 目录中生成。 需要先 创建 SharePoint Embedded 应用程序。

SharePoint Embedded 入门

通过创建用于 试用目的的容器类型，免费试用 SharePoint Embedded。

1. Microsoft 365 租户设置免费试用版。 或者，如果具有管理员凭据，则可以使用现有租户。
2. 登录到 SharePoint Embedded Visual Studio Code 扩展，并按照步骤创建用于试用的应用程序和容器类型。

先决条件

若要开始使用 Fluid Framework 进行生成，需要：

1. 管理员凭据：需要 Microsoft 365 租户的管理凭据。
2. SharePoint Embedded 应用程序：确保在 Microsoft Entra ID 中注册应用程序。 如果没有 SharePoint Embedded 应用程序，请参阅 前面的部分。
3. 应用程序 (客户端) ID：获取 ClientID SharePoint Embedded 应用程序的 。
4. 容器类型信息：
   • 标识与 ContainerTypeId 应用的容器类型关联的 。
5. 容器：
   • 确保 至少有 一个容器类型与 SharePoint Embedded 应用程序关联的相同容器类型。

Fluid 入门

访问应用信息

需要 ClientID 应用程序中的 以及 ContainerTypeId 与该应用程序上创建的容器关联的 。

ClientID在使用 Fluid Framework 和文档时，对于获取正确的访问令牌至关重要。 ContainerTypeId对于访问与 SharePoint Embedded 应用程序关联的容器，是必需的。

如果使用了 Visual Studio Code 扩展，则可以导出 Postman 环境，以便轻松查看 ContainerTypeId 和 ClientID。

否则，可以使用 PowerShell cmdlet 访问 。ContainerTypeIdGet-SPOContainerType ClientID可通过导航到“标识>应用注册>应用程序”“所有应用程序>”查看应用程序概述，在 Microsoft Entra ID中可用。

运行 Fluid 示例应用：项计数器

现在，可以使用 Fluid Sample App Item Counter 进行测试并开始生成。

步骤：

1. 收集 SharePoint ClientIDContainerTypeId Embedded 应用程序和租户管理员凭据

2. 更改为要克隆 Fluid Examples 存储库的目录

3. 通过执行 命令克隆存储库： git clone https://github.com/microsoft/FluidExamples.git

4. 导航到 “项计数器” 目录 cd .\FluidExamples\item-counter-spe\

5. 创建一个空 的 .env 文件并输入 ClientID 和 ContainerTypeId ，没有空格，如下所示：

   SPE_CLIENT_ID=YOUR_CLIENTID
   
   SPE_CONTAINER_TYPE_ID=YOUR_CONTAINERTYPE_ID
   

6. npm install

7. npm run dev

8. Webpack 完成后，请转到 https://localhost:8080

9. 使用租户的管理员凭据登录

10. 在弹出窗口中为应用授予管理员同意

11. 将完整 URL 复制到另一个浏览器选项卡，或将其发送给具有同一租户凭据的人员。 这些凭据可以是用户凭据，只要它们位于同一租户上。 两个浏览器上项计数器的实时更改显示数据在客户端之间同步。

12. 恭喜你的第一个 Fluid App 运行！ 可以在项目计数器 自述文件中找到更多详细信息。