Web页面嵌入能力说明
使用场景
腾讯电子签支持开发者将部分核心前端页面集成到自己的系统中，可以通过iframe嵌入的方式，解决前端的复杂问题，从而大大提高集成效率。
支持的集成页面
| 常规页面 | 创建模板 |
| 编辑模板 | |
| 预览模板 | |
| 创建印章 | |
| 印章列表 | |
| 印章详情 | |
| 预览合同 | |
| 合同详情页 | |
| 企业拓展服务配置页面 | |
| 发起合同页面 | 通过模板发起合同 |
主题风格配置
API链接
能力说明
通过此接口，可以配置Web页面嵌入时，页面中的个性化配置，包括主题色，及是否显示Logo。
接口能力说明
获取常规模块web页面（模板、印章、拓展服务）
API链接
接口能力说明
通过此接口可获取创建印章、企业拓展服务配置等常规页面。EmbedType参数是WEB嵌入资源类型，根据不同的取值获取Web页面嵌入的链接。
| 页面名称 | 参数值 | 资源ID |
|---|---|---|
| 创建模板 | CREATE_TEMPLATE | |
| 编辑模板 | MODIFY_TEMPLATE | 模板ID |
| 预览模板 | PREVIEW_TEMPLATE | 模板ID |
| 创建印章 | CREATE_SEAL | |
| 印章列表页 | PREVIEW_SEAL_LIST | |
| 印章详情页 | PREVIEW_SEAL_DETAIL | 印章ID |
| 预览合同 | PREVIEW_FLOW | 合同flowID |
| 合同详情页 | PREVIEW_FLOW_DETAIL | 合同flowID |
| 企业拓展服务配置页 | EXTEND_SERVICE |
获取企业签署合同web页面
API链接
接口能力说明
通过此接口指定一个模板，获取发起合同的web页面。支持在页面上手动编辑签署方信息、补充合同内容，也可以通过接口传参的方式快速填充。
一些个性化配置：
- 隐藏添加签署人步骤：若您系统中已经获取了签署人信息，可接口传参给电子签，且隐藏该步骤。
- 支持控制是否允许编辑签署方信息：若您系统中已经获取了签署人信息，可接口传参给电子签，仅在电子签页面展示签署人信息，不允许编辑。
- 控制是否允许修改发起方的控件内容：若您系统中已经规范保存了发起合同签需要补充的内容，不允许发起人在电子签上二次修改，可设置控件禁用。
- 发起前审批：支持控制是否提交待审批的合同，审核通过后触发合同发起。
- 签署前审批：支持控制本企业签署方，签署前是否需要审批，审批通过后方可签署合同。
详细能力参见接口文档。
页面示例
创建模板/编辑模板
预览模板
预览合同
合同详情
企业拓展服务
创建印章
印章列表
印章详情
获取发起合同web页面
iframe嵌入前端代码示例
以获取创建模板（CREATE_TEMPLATE）页面的场景为例。以下为React组件的封装方法，可供参考。
// 以获取模板的方法举例
export default function CreateTemplate() {
const [srcUrl, setSrcUrl] = useState('');
const [loading, setLoading] = useState(true);
const getCreateTemplateUrl = async () => {
setLoading(true);
// getWebUrl内部封装，ChannelCreateEmbedWebUrl
const res = await getWebUrl({
EmbedType: 'CREATE_TEMPLATE',
});
setLoading(false);
setSrcUrl(res?.data?.data?.WebUrl || '');
};
useEffect(() => {
getCreateTemplateUrl();
}, []);
return (
<div className="demo-wrapper">
{loading ? <div class="loading"></div> : <iframe src={srcUrl}></iframe>}
</div>
);
}
Web端消息接口
腾讯电子签在嵌入的页面中，提供了对外暴露的消息接口，用于在iframe集成的时候，实现内外数据通信。消息通讯的机制，适用于一些业务数据的传递，以及对页面事件的监控。
开发者在使用iframe集成腾讯电子签页面后，可以在自己的系统页面内，使用addEventListener注册事件监听器。即可接收到腾讯电子签的前端页面推送的消息。
目前已支持的消息类型如下：
| 消息类型 | 描述 | 页面范围 |
|---|---|---|
| NOT_LOGIN | 页面未登录或者登录态失效时触发 | 所有页面 |
以下为React组件的封装方法，可供参考
import React, { useRef } from 'react';
const Iframe = ({ src }) => {
const iframeRef = useRef();
useEffect(() => {
const handler = (evt) => {
// 通过messageType判断场景类型
// 通过origin判断消息来源于电子签域名
if (evt.data.messageType === 'NOT_LOGIN' && evt.origin === 'embed.qian.tencent.com') {
// 处理你的业务逻辑
}
};
window.addEventListener('message', handler); // 绑定消息的监听
return () => {
// 注意要记得解绑
window.removeEventListener('message', handler);
};
}, []);
return <iframe ref={iframeRef} src={src}></iframe>;
};
export default Iframe;