跳到主要内容

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

名称类型必选描述
messageTypeString消息类型,通过postMessage接口发出;登录失效的场景值为NOT_LOGIN
actionString对应的API接口的Action, 可选值有ChannelCreateEmbedWebUrlChannelCreatePrepareFlow
embedParamsEmbedParams仅在action为ChannelCreateEmbedWebUrl时生效。当前用户所在可嵌入页面的参数

EmbedParams

名称类型必选描述
EmbedTypeStringWEB嵌入资源类型,取值范围:CREATE_SEAL创建印章,CREATE_TEMPLATE创建模板,MODIFY_TEMPLATE修改模板,PREVIEW_TEMPLATE预览模板,PREVIEW_FLOW预览流程
BusinessIdStringWEB嵌入的业务资源ID,EmbedType取值MODIFY_TEMPLATE或PREVIEW_TEMPLATE或 PREVIEW_FLOW时BusinessId必填
HiddenComponentsBoolean是否隐藏控件,只有预览模板时生效