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	否	是否隐藏控件，只有预览模板时生效

基本原理​

登录态失效事件监听​

通用可嵌入页面​

模板发起合同 web 页面​

API​

MessageData​

EmbedParams​