Web页面登录失效的处理
基本原理
腾讯电子签的可嵌入页面,是通过接口获取到的 url 链接,进行无感知登录的,登录态维持30 分钟。当登录态失效时,开发者需要重新调用 API 接口,获取新的 url 链接,进行重新登录。
腾讯电子签提供了消息接口,在 iframe 集成的场景中,可以通过监听腾讯电子签前端页面postMessage发出的登录失效事件,并在自己的系统处理。可以实现登录失效后重新登录,或者登录失效后在自己的系统中做自定义的提示。
同时,页面登录态失效时,从消息接口携带的数据中,可以获取到当前腾讯电子签页面的必要参数,可以方便重新调用接口。可以查看MessageData查看消息数据格式。
登录态失效事件监听
触发登录失效事件时,可以参考消息接口,进行事件监听。以下是对不同的嵌入页面的处理方式
通用可嵌入页面
参考接口:获取常规模块 web 页面的 API
对于通用的可嵌入页面(创建印章、创建模板、修改模板、预览模板、预览合同等)来说,都是通过获取常规模块 web 页面的 API这个接口来获取链接的。而且接口的参数格式也比较固定,可以通过通用的处理方式实现监听。
此时,从消息接口监听到的数据中,action
字段的值为ChannelCreateEmbedWebUrl
, 即当前的接口名。embedParams
的值为当前接口请求所需要的参数。embedParams
对象可以直接用于重新发起此接口。以 React 组件为例:
useEffect(() => {
const handler = message => {
const { messageType, action, embedParams } = message.data;
if (messageType === 'NOT_LOGIN' && evt.origin === 'embed.qian.tencent.com' && action === 'ChannelCreateEmbedWebUrl') {
const result = window.confirm("页面停留时间过长,请重新录入");
if (result){
const res: any = await getWebUrl(embedParams);
// CREATE_SEAL创建印章,CREATE_TEMPLATE创建模板,MODIFY_TEMPLATE修改模板,PREVIEW_TEMPLATE预览模板,PREVIEW_FLOW预览流程
// embedParams: {
// EmbedType: 'CREATE_SEAL',
// BusinessId: 'xxxxxxx',
// HiddenComponents: false,
// },
if (res?.data?.data?.WebUrl) {
// 获取到新的Web页面嵌入的链接
setIframeUrl(res.data.data.WebUrl);
}
}
}
window.addEventListener('message', handler)
return () => {
window.removeEventListener('message', handler);
}
}, [])
模板发起合同 web 页面
参考接口:获取发起合同 web 页面的 API
预发起合同页面不同于通用的可嵌入页面,其参数会比较复杂,包含流程、签署方和表单控件的相关信息。这部分参数,需要开发者自己维护,在登录态失效时,重新组装参数,调用发起流程的接口。
此时,从消息接口监听到的数据中,action
字段的值为ChannelCreatePrepareFlow
。
useEffect(() => {
const handler = message => {
const { messageType, action } = message.data;
if (messageType === 'NOT_LOGIN' && evt.origin === 'embed.qian.tencent.com' && action === 'ChannelCreatePrepareFlow') {
const result = window.confirm("页面停留时间过长,请重新录入");
if (result){
const res: any = await createPrepareFlow(flowParams); // 开发者自己维护流程参数
if (res?.data?.PrepareFlowUrl) {
// 获取到新的Web页面嵌入的链接
setIframeUrl(res.data.PrepareFlowUrl);
}
}
}
window.addEventListener('message', handler)
return () => {
window.removeEventListener('message', handler);
}
}, [])
API
MessageData
名称 | 类型 | 必选 | 描述 |
---|---|---|---|
messageType | String | 是 | 消息类型,通过postMessage 接口发出;登录失效的场景值为NOT_LOGIN |
action | String | 是 | 对应的 API 接口的 Action, 可选值有ChannelCreateEmbedWebUrl、ChannelCreatePrepareFlow |
embedParams | EmbedParams | 否 | 仅在 action 为 ChannelCreateEmbedWebUrl 时生效。当前用户所在可嵌入页面的参数 |
EmbedParams
名称 | 类型 | 必选 | 描述 |
---|---|---|---|
EmbedType | String | 是 | WEB 嵌入资源类型,取值范围:CREATE_SEAL 创建印章,CREATE_TEMPLATE 创建模板,MODIFY_TEMPLATE 修改模板,PREVIEW_TEMPLATE 预览模板,PREVIEW_FLOW 预览流程 |
BusinessId | String | 否 | WEB 嵌入的业务资源 ID,EmbedType 取值 MODIFY_TEMPLATE 或 PREVIEW_TEMPLATE 或 PREVIEW_FLOW 时 BusinessId 必填 |
HiddenComponents | Boolean | 否 | 是否隐藏控件,只有预览模板时生效 |