如何开始将 wopi 协议与 Office for web 集成?使用azure部署wopi主机

问题描述

我有一个 vuejs 应用程序,我想在其中使用 office for web 提供编辑文档。我查看了官方的 wopi 文档和一些现有的 wopi 实现。 wopi 官方文档缺少“如何开始”。在继续之前,我想清除一些疑问

基础设施:我有 vuejs 应用程序,后端有 .NET 5 api,我使用 azure 环境进行部署(azure 应用程序服务),文档存储在 blob 存储中。我的第一个问题是关于将 wopi 主机列入白名单。如果我正确理解文档,vuejs 将是 wopi 客户端,.net core api 将是 wopi 主机?。然后我必须将 api 域列入白名单?

其次,在microsoft code sample他们说You cannot simply clone and run this sample locally....localhost probably won't work。我想问一下,为了测试我的代码,我每次进行更改时都必须部署它吗?如果是这样,我将如何调试它?

最后,我读到有人提到部署和运行 wopi 需要 Office Online Server 2016,如here 所述。这不适用于 azure 部署吗?

另外我已经注册Cloud Storage Partner Program

解决方法

让我们从头开始。

最后,我读到有人提到需要 Office Online Server 2016 来部署和运行 wopi,如此处所述。

您可以通过云存储合作伙伴计划 (CSPP) 部署 Office Online Server 或使用 Office Online。

vuejs 将成为 wopi 客户端,.net core api 将成为 wopi 主机?

不,Office Online Server 或通过 CSPP 的 Office Online 将始终扮演“WOPI 客户端”的角色。您的 .NET 后端将是“WOPI 主机”,而您的 Vue.js 应用程序将服务于 WOPI host page/frame(此上下文中的“主机”一词与 WOPI 主机无关)。

然后我必须将 api 域列入白名单?

我的理解是,您主要需要将 WOPI 主机页面的域(在您的情况下为 Vue.js 应用程序)列入白名单。但如果它在子域上运行,您的 WOPI 主机(.NET 后端)也需要它。阅读更多here

其次,在微软代码示例中,他们说您不能简单地在本地克隆和运行此示例....localhost 可能不起作用。我想问一下,为了测试我的代码,我每次进行更改时都必须部署它吗?如果是这样,我将如何调试它?

不,你没有。确保您的 WOPI 主机可从 Internet 公开访问 - 例如公共 IP,带有保留域 (ngrok) 的 for as little as $5。并确保将 IP/域添加到 Test environment 白名单。然后就可以在本地调试了。

这不适用于 azure 部署吗? 如果您选择使用 Office Online Server 2016,则可以将其部署到任何您想要的地方。如果将其部署到 Azure,请确保将 vnet 配置为只能由您的应用/资源访问。