集成页面

> 该功能可以实现将易企秀的指定界面嵌入企业自有产品，低成本实现产品深度融合。

# 页面集成步聚
1. 实现[单点登录](https://hc.eqxiu.cn/doc/22/ "单点登录")对接，当易企秀界面登录失效时会自动通过单点登录完成登录；
2. 在需要嵌入易企秀页面的地方通过iframe技术嵌入对应页面；

- 实现原理
![](/media/202206/2022-06-06_154603_942837.png)

3. 易企秀无感登陆中转页
- 使用说明：当内嵌易企秀，配置的三方中转页与易企秀域名存在跨域时，通过postMessage发送消息，告知父页面登陆过期
- 中转页地址：https://xxx【客户自定义域名前缀】.eqxiu.cn/index_loading.html
- 配置方式：
![](/media/202604/2026-04-08_155102_6521650.2489356256238442.png)
- 代码片段：
```javascript
window.parent.postMessage(
	{
		eventType: 'EQS_AUTH_TRANSIT', // 事件类型
		params: {
			redirectUrl: '' // 授权信息过期时退出的链接，拿到用户信息后拼接Authorization，跳回来的链接
		}
	},
	'*'
)
```

# 可集成页面列表
### 平台模版&我的\企业作品&作品回收站参数说明：
| 参数名称 | 备注 |
| --- | --- |
|  useType| 展示应用类型，eg:?useType=hd 多个 useType=hd,h5 可以选择性组合应用|
| hideBar | 隐藏应用类型，默认为显示，eg:?hideBar=1,模版集成时会去除应用类型展示|
| hideBack |  隐藏页面的返回按钮，默认展示，eg:?hideBack=1，例如回收站，直接集成。设置无返回按钮 |
| noheader | 隐藏页面头部含logo区域，默认展示，eg:?noheader=true: 表示隐藏头部 |

内容中台可集成的页面列表如下：

| **页面** | **地址** |
| --- | --- |
| 作品列表全页面 | https://www.eqxiu.cn/embed/creation?secretId=SECRET_ID&Authorization=AUTHORIZATION&type=TYPE |
|我的作品全页面| https://www.eqxiu.cn/embed/creation?secretId=SECRET_ID&Authorization=AUTHORIZATION&myProductType=group&hideCreationStatus=${hideCreationStatus}&showSearchInput=${showSearchInput}<br>hideCreationStatus参数说明：指定作品的发布状态是否显示，默认hideCreationStatus不传或者为空展示发布状态；showSearchInput参数说明：指定作品名称搜索框是否显示，此参数与hideBar参数共同使用，单独使用没有作用，默认showSearchInput不传或者为空作品名称搜索框不展示 |
|我的作品分类页|https://www.eqxiu.cn/embed/creation?secretId=SECRET_ID&Authorization=AUTHORIZATION&myProductType=type|
|我的作品作品页| https://www.eqxiu.cn/embed/creation?secretId=SECRET_ID&Authorization=AUTHORIZATION&myProductType=list（支持&type=hd等作品类型过滤）|
|企业模板分类页| https://www.eqxiu.cn/embed/enterpriseTemplate?secretId=SECRET_ID&Authorization=AUTHORIZATION&myBusinessType=type   |
|企业模板作品页|https://www.eqxiu.cn/embed/enterpriseTemplate?secretId=SECRET_ID&Authorization=AUTHORIZATION&myBusinessType=list|
|企业资源企业素材页|https://www.eqxiu.cn/qyMaterial/business?secretId=SECRET_ID&Authorization=AUTHORIZATION&tab=${tab}<br>tab参数说明：指定显示菜单值包含material:素材;template:模版;prize:奖品;也可以组合使用，例如tab=material,template展示素材以及模版。默认tab不传或者为空展示全部|
|企业资源企业模版页|https://www.eqxiu.cn/qyMaterial/enterprise?secretId=SECRET_ID&Authorization=AUTHORIZATION&tab=${tab}<br>tab参数说明：指定显示菜单值包含material:素材;template:模版;prize:奖品;也可以组合使用，例如tab=material,template展示素材以及模版。默认tab不传或者为空展示全部|
|企业资源企业奖品页|https://www.eqxiu.cn/qyMaterial/prizeManage?secretId=SECRET_ID&Authorization=AUTHORIZATION&tab=${tab}<br>tab参数说明：指定显示菜单值包含material:素材;template:模版;prize:奖品;也可以组合使用，例如tab=material,template展示素材以及模版。默认tab不传或者为空展示全部|
| 仅平台模板页面 | https://www.eqxiu.cn/embed/template?secretId=SECRET_ID&Authorization=AUTHORIZATION&type=TYPE|
| 仅企业模板页面 | https://www.eqxiu.cn/embed/template/enterprise?secretId=SECRET_ID&Authorization=AUTHORIZATION&type=TYPE |
| 企业模板&平台模板页面(tab切换) | https://www.eqxiu.cn/embed/all/template/platform?secretId=SECRET_ID&Authorization=AUTHORIZATION&type=TYPE |
| 作品数据统计页面 | https://www.eqxiu.cn/embed/datapage/${creationId}?secretId=SECRET_ID&Authorization=AUTHORIZATION |
| 互动编辑器页面 | https://www.eqxiu.cn/gc/${creationId}?secretId=SECRET_ID&Authorization=AUTHORIZATION |
| 表单编辑器页面 | https://www.eqxiu.cn/fe/${creationId}?secretId=SECRET_ID&Authorization=AUTHORIZATION |
| H5编辑器页面 | https://www.eqxiu.cn/c/${creationId}?secretId=SECRET_ID&Authorization=AUTHORIZATION |
| 长页编辑器页面 | https://www.eqxiu.cn/lc/${creationId}?secretId=SECRET_ID&Authorization=AUTHORIZATION |
| 海报编辑器页面 | https://www.eqxiu.cn/design/${creationId}?secretId=SECRET_ID&Authorization=AUTHORIZATION |
| [图片素材编辑页面](https://hc.eqxiu.cn/doc/1108 "图片素材编辑页面") | https://www.eqxiu.cn/design/create/blank?secretId=SECRET_ID&Authorization=AUTHORIZATION&filePath=filePath&width=width&height=height|
| [图片素材美化页面](https://hc.eqxiu.cn/doc/1108 "图片素材美化页面") | https://www.eqxiu.cn/design/tool/photo?secretId=SECRET_ID&Authorization=AUTHORIZATION&filePath=filePath|
| 移动端 | https://www.eqxiu.cn/wpeip/mall/home?secretId=SECRET_ID&Authorization=AUTHORIZATION&mallType=${mallType}<br>mallType参数说明：h5、hd-互动、h2-海报、h5e-表单 |
| 数据页无布局页面 |`https://www.eqxiu.com/embed/datapage/${creationId}?nolayout&tag=formData`；直接打开指定作品的数据分析页面，**不展示页面左侧菜单与顶部导航栏**，tag参数详见下面**数据页无布局URL 参数说明** |
| 其它通用页面 | 需在需要集成的页面URL中，添加一个 URL Query Param: nolayout=1，嵌入的页面将隐藏原生的菜单栏|

#### 数据页无布局URL参数说明

| 参数           | 类型     | 必填 | 说明                                                                                                        |
| -------------- | -------- | ---- | ----------------------------------------------------------------------------------------------------------- |
| `creationId` | string   | 是   | 路径参数，作品 ID。作品未发布时会弹出提示                                                                   |
| `nolayout`   | 无值标志 | 否   | 存在即生效（`?nolayout` 或 `?nolayout=1` 均可）。隐藏页面左侧菜单、顶部导航栏及返回按钮，内容区占满全宽 |
| `tag`        | string   | 否   | 指定展示的数据菜单，取值为语义字段（见tag取值对照表）。缺省时展示默认菜单（基础数据/活动管理）               |

#### tag 取值对照表
```
注意：数据菜单列表与作品类型相关（H5 作品 / 长页面 / 表单 / 互动活动），下表"适用类型"列标注了各菜单支持的作品类型。传入该作品类型下不存在的 `tag` 时，页面停留在默认菜单，**不会报错**。
```
* 数据概况
| 语义字段 | 菜单名称 | 适用类型 |
| --- | --- | --- |
| `baseData` | 访问数据（基础数据） | H5 / 长页面 / 表单（默认） |
| `activityManager` | 活动管理 | 互动活动（默认） |
| `zhuliManager` | 助力管理 | 互动活动-助力类（默认） |

* 数据明细
| 语义字段                      | 菜单名称            | 适用类型                              |
| ----------------------------- | ------------------- | ------------------------------------- |
| `visitorDetails`            | 授权访客明细            | H5 / 长页面 / 表单 / 互动活动         |
| `formData`                  | 表单明细            | H5 / 长页面 / 表单 / 互动活动(签到类) |
| `form-data-new`             | 表单明细（新）      | H5                                    |
| `sign-up-detail`            | 报名签到明细        | 表单 / H5                             |
| `collectionForm`            | 表单汇总            | 互动活动                              |
| `rankList`                  | 游戏排行榜            | H5 / 互动活动                         |
| `signInDetail`              | 签到明细            | H5 / 互动活动                         |
| `signRankList`              | 打卡签到排行榜      | 互动活动(签到类)                      |
| `h5Comments`                | 留言明细            | H5                                    |
| `formComments`              | 留言明细            | 表单                                  |
| `likeDetails`               | 点赞明细            | H5                                    |
| `challengeDetail`           | 闯关明细            | H5                                    |
| `defineTaskDetail`          | 任务明细（新）      | H5 / 互动活动                         |
| `taskDetail`                | 任务明细            | 互动活动                              |
| `participantList`           | 参与用户 / 抽奖明细 | H5 / 互动活动                         |
| `prizeRoster`               | 中奖名单            | H5 / 互动活动                         |
| `theAudit`                  | 投票报名审核        | 表单                                  |
| `voteItemManage`            | 投票选项管理        | 表单                                  |
| `campaign-win-detail`       | 竞猜中奖明细        | H5                                    |
| `guessingDetail`            | 竞猜明细            | H5                                    |
| `prize-distribute-detail`   | 发奖明细            | H5 / 表单(含优惠券)                   |
| `lotteryDetail`             | 开奖明细            | H5                                    |
| `order-data-detail`         | 订单数据            | H5                                    |
| `campaign-task-detail`      | 活动任务明细        | H5                                    |
| `campaign-ai-detail`        | 活动图片生成明细    | H5                                    |
| `campaign-group-buy-detail` | 拼团明细            | H5                                    |
| `campaign-team-up-detail`   | 组队明细            | H5                                    |
| `campaign-sign-detail`      | 签到明细            | H5                                    |
| `campaign-rank-list`        | 活动排行榜          | H5                                    |
| `campaign-game-record`      | 游戏记录            | H5                                    |
| `campaign-lottery-detail`   | 抽奖明细            | H5                                    |
| `riskDetail`                | 风险明细            | H5 / 表单 / 互动活动                  |
| `zhuliTargets`              | 达成目标管理        | 互动活动-助力类                       |

* 数据分析
| 语义字段               | 菜单名称   | 适用类型 |
| ---------------------- | ---------- | -------- |
| `behaviorPortrait`   | 行为画像   | 全部类型 |
| `transmissonContext` | 传播脉络   | 全部类型 |
| `voteRank`           | 投票排行榜 | 表单     |
| `vote-trend`         | 投票趋势   | 表单     |
| `form-statistics`    | 表单统计   | 表单     |

“互动编辑器页面”提供了一组参数（将以下任一参数拼到URL上），可以用来控制页面是否可编辑的效果：
```
approval=disableEdit 作品状态为审批中时，隐藏保存和发布按钮，禁用编辑
approval=disablePage 作品状态为审批中时，禁用整个页面
disableEdit=1 作品在任何状态时，隐藏保存和发布按钮，禁用编辑
disablePage=1 作品在任何状态时，禁用整个页面
```

## 参数说明
- SECRET_ID为请求密钥ID，从控制台密钥管理处获得；
- AUTHORIZATION为当前登录用户SessionId,通过[静默登录接口](https://hc.eqxiu.cn/doc/25/ "静默登录接口")获得
- TYPE为编辑器品类标识，参见[作品类型字典](https://hc.eqxiu.cn/doc/18/ "作品类型字典")
- ${creationId}为作品ID，可从[作品列表接口](https://hc.eqxiu.cn/doc/35/)等处取得

# 集成页面交互
> 客户系统集成内容中台的页面后，当进入编辑器界面时会遇到和父页面交互的问题。内容中台提供两种页面集成方式，两种方式退出编辑器页面后，需要采用对应的方式实现跳转到指定的URL。

## iframe嵌入方式
示例代码：
```html
<!DOCTYPE html>
<html>
  <body>
    <iframe src="https://www.eqxiu.cn/embed/creation?secretId=79663h6&Authorization=32f909e22b&type=hd" width="200" height="200"></iframe>
  </body>
</html>
```
1. iframe集成方式在退出**编辑界面**时，使用`postMessage`，向父页面发送消息通知，父页面根据消息内容业务的定义，进行跳转逻辑处理，示例代码：
```javascript
// 集成的编辑器页面发送消息
window.parent.postMessage({
	eventType: 'quit', // 'publishStart': 开始发布， publish：确认发布','quit：退出', 'save': 保存, 'enterpriseQuit': 企业作品退出
	creationType: 'hd', // 编辑器类型 hd:互动, h5:h5, design:海报, form:表单, ls:长页
	creationId: '', // 作品id
	params: {
		staffId: '', // 员工id
		corpId: '' //公司id
	}
}, '*');
```
**新增开始发布事件（publishStart）推送，时机为点击发布按钮，如下图所示：**
![](/media/202403/2024-03-07_142713_2910650.5396447256343448.png)

**确认发布（publish）推送时机，如下图所示：**
![](/media/202403/2024-03-07_142820_7881880.2597979435430341.png)

```javascript
// 父页面接收消息
window.addEventListener('message', function (e) {  // 监听 message 事件
  console.log(e.data); // 编辑器返回数据
  if(e.data.eventType === 'quit'){ // 退出编辑器
    iframe.src = 'https://www.eqxiu.cn/embed/creation?secretId=79663h6&Authorization=32f909e22b&type=hd';
  } else if(e.data.eventType === 'publish'){ // 发布作品
    window.location.reload();
  }
});
```
2. iframe集成方式在退出**数据管理**界面时，使用postMessage，向父页面发送消息通知，父页面根据消息内容业务的定义，进行跳转逻辑处理，示例代码：
```js
// 集成的页面发送消息
window.parent.postMessage({
    eventType: 'dataAnalysisBack',
	creationType: 'hd', // 编辑器类型 hd:互动, h5:h5, design:海报, form:表单, ls:长页
	creationId: '', // 作品id
}, '*');
```
```js
// 父页面接收消息
window.addEventListener('message', function (e) {  // 监听 message 事件
  console.log(e.data); // 集成页面返回数据
  if(e.data.eventType === 'dataAnalysisBack'){ // 退出数据管理页面
  }
});
```

## 打开新页签方式
示例代码：
```html
<!DOCTYPE html>
<html>
  <body>
    <a href="https://www.eqxiu.cn/embed/creation?secretId=79663h6&Authorization=32f909e22b&type=hd" target="_blank">打开作品列表页面</a>
  </body>
</html>
```
打开新页签集成方式，需要在内容中台的控制设置跳转地址。

## 注意事项
指定发布与退出后的跳转地址，==配置地址后，将不会发送postmessage。==
配置方法：控制台->集成管理->页面集成，修改对应的url即可

![](/media/202207/2022-07-05_170140_805692.png)
**注意：配置地址后，将不会发送`postMessage`消息。**

配置步骤：[页面集成配置](https://hc.eqxiu.cn/doc/206/)