WebOffice 开放平台主题
开始
本节将为您介绍 WebOffice 在线预览编辑服务的接入流程，为方便理解，我们会先为您介绍整体流程的核心思路，在有了大概的思路后，再来带您一步一步的走完所有步骤。
提示
在开始接入之前，如果想要快速体验一下 WebOffice 服务，探寻本服务与您业务场景的契合度，您可以直接试试我们官网提供的WebOffice 功能体验。
核心思路
WebOffice 文档的预览和编辑需要对实体文件进行读取和存储，为了给接入方业务提供最大的灵活度，WebOffice 并没有耦合文件系统相关的逻辑。因此，建立一个回调服务专门用于 WebOffice 服务和文件系统之间的通信是接入的关键点。
其次，我们的 WebOffice 以在线网页为显示载体，它需要在您的业务前端网页中进行文档初始化，为此，我们专门提供了 WebOffice SDK 用来完成这一步骤。
基于以上两点，接入 WebOffice 服务的三个要素如下：
- 创建 WebOffice 应用，此应用为在线文档编辑服务的业务对象，是您进行后续接入步骤的前提
- 服务端实现回调服务，完成 WebOffice 与文件系统之间的通讯
- 前端集成 WebOffice SDK，在您的网页中实现文档的显示以及后续 API 的调用
WebOffice 服务和您的网页应用及服务端的交互如下图所示：
完整流程
步骤 1: 登录 WPS 账号
在使用 WebOffice 服务前，需要先登录您的 WPS 账号。（如果您已登录，请跳过该步骤）
步骤 2: 开发者认证
进入WebOffice 控制台，如果您之前没有认证过开发者，需要在这里进行开发者认证。
填写开发者信息，您需要根据字段提示如实填写您所在企业的信息，并上传一张符合要求的营业执照。
字段说明
| 字段名 | 是否必填 | 说明 | 是否需要审核 |
|---|---|---|---|
开发者名称 | 是 | 在 WebOffice 开放平台中备案的名称，建议和营业执照中的名称保持一致，最大支持 20 个汉字，命名需符合国家有关安全要求 | 是 |
邮箱 | 是 | 用于接收审核结果、开放平台相关通知等信息，请确保邮箱能正常收取邮件 | 是 |
联系电话 | 是 | 常用联系方式，请保持电话畅通，以便需要与您沟通需求或是出现紧急服务情况下我们能联系到您 | 是 |
官网 | 是 | 您所在企业的官方网站，将作为我们了解您的企业信息的辅助材料，请提供 https 安全协议的地址，否则会导致审核失败 | 是 |
营业执照 | 是 | 您所在企业的在有效期内、合法的营业执照，请提供高清大图，上传图片要求：PNG/JPG 格式且小于 10MB | 是 |
所属行业 | 是 | 企业所从属的行业类别，请保持和企业实际经营范围一致 | 是 |
规模 | 是 | 企业的人员规模 | 否 |
提交审核
在您填写信息完毕并点击 【创建】 按钮之后，我们将会在 1 个工作日内对您提交的资料进行安全合规审核，审核结果通过预留的邮箱告知您，请留意查收邮件。
提示
您也可以通过 【控制台-开发者-查看开发者信息】 右上角【开发者】入口 查看审核状态 
步骤 3: 创建测试应用
在 WebOffice 控制台完成开发者认证后即可创建测试应用，测试应用可用于接入方体验 WebOffice、格式转换服务的功能。按照要求填写信息后，点击创建即可。创建完成后可在应用信息 tab 下查看应用的 AppID 和 AppSecret。
详细说明请参考控制台接入流程说明
步骤 4: 服务端实现回调服务
前文中提到了回调服务的实现是接入 WebOffice 服务的关键点，为帮助您快速完成，我们为您准备了相关DEMO以供您参考。同时，在服务端回调章节中，我们对该服务的实现细节进行了详细的说明，您可以先阅读一遍文档，然后再去看 DEMO 源码，以便更快的上手。
步骤 5: 回调服务配置
在您的回调服务项目开发到一定程度后，就可以将其部署至公网，然后进入WebOffice 控制台的回调配置栏下，首先配置好您的回调网关，然后就可以对您的接口进行在线调试，根据返回的错误信息来一步一步完善您的回调服务。
步骤 6: 集成 WebOffice SDK
回调服务实现后，就可以开始在您的前端网页内集成 WebOffice SDK，然后通过 SDK 来完成 WebOffice 文档的初始化渲染。我们在前端 SDK 快速开始这一章节对这个过程进行了详细的介绍，请按照我们的要求依次下载、引用和初始化。
提示
如果文档没有按照预期渲染或者页面出现报错，您可进入 WebOffice 控制台的日志查询模块，根据日志信息排查问题原因。
如下为前端通过 SDK 初始化 WebOffice 文档的示例代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebOffice</title>
</head>
<script src="./web-office-sdk-solution.umd.js"></script>
<body>
<script>
window.onload = () => {
const instance = WebOfficeSDK.init({
officeType: WebOfficeSDK.OfficeType.Writer,
appId: 'xxxxx',
fileId: 'xxxxx'
})
}
</script>
</body>
</html>
步骤 7：充值
以上步骤完成后，说明您已成功将 WebOffice 文档渲染至业务前端，在相关功能符合预期且测试完成后，便可以着手进行正式应用的创建，不过在此之前，您需要先进行充值，为不影响服务正常使用，请确保账户余额 ≥1500 元。
步骤 8：创建正式应用
正式应用与测试应用的创建步骤基本一致，只不过多了一个上传系统截图的选项，您需要并提交测试应用使用 WebOffice 的系统截图，等待官方审核通过后即可上线应用，审核结果将在 1 个工作日 内完成并通过邮件告知您。
审核通过后，与测试应用一样，您同样需要对此应用进行回调配置，最后将此应用的 AppID 作为参数传递至文档初始化函数中，即可通过正式应用完成文档的渲染。
详细截图说明请参考控制台接入流程说明
步骤 9：出账开票
创建正式应用后，您可以在控制台中自助完成充值、查看每月各应用产生的费用账单、申请发票等操作。具体操作指南详见充值计费。
