Web页面登录失效的处理

基本原理

腾讯电子签的可嵌入页面，是通过接口获取到的 url 链接，进行无感知登录的，登录态维持30 分钟。当登录态失效时，开发者需要重新调用 API 接口，获取新的 url 链接，进行重新登录。

腾讯电子签提供了消息接口，在 iframe 集成的场景中，可以通过监听腾讯电子签前端页面postMessage发出的登录失效事件，并在自己的系统处理。可以实现登录失效后重新登录，或者登录失效后在自己的系统中做自定义的提示。

同时，页面登录态失效时，从消息接口携带的数据中，可以获取到当前腾讯电子签页面的必要参数，可以方便重新调用接口。可以查看MessageData查看消息数据格式。

登录态失效事件监听

触发登录失效事件时，可以参考消息接口，进行事件监听。以下是对不同的嵌入页面的处理方式

通用可嵌入页面

参考接口：获取其他可嵌入页面

对于通用的可嵌入页面（创建签章、创建印章、创建模板、修改模板、预览模板、预览合同等）来说，都是通过获取其他可嵌入页面这个接口来获取链接的。而且接口的参数格式也比较固定，可以通过通用的处理方式实现监听。

此时，从消息接口监听到的数据中，action字段的值为CreateEmbedWebUrl, 即当前的接口名。embedParams的值为当前接口请求所需要的参数。embedParams对象可以直接用于重新发起此接口。以 React 组件为例：

useEffect(() => {
    const handler = message => {
      const { messageType, action, embedParams } = message.data;
      if (messageType === 'NOT_LOGIN' && evt.origin === 'embed.qian.tencent.com' && action === 'CreateEmbedWebUrl') {
        const result = window.confirm("页面停留时间过长，请重新录入");
        if (result){
          const res: any = await getWebUrl(embedParams);
          // CREATE_SEAL创建印章
          // 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);
    }
  }, [])

API

MessageData

名称	类型	必选	描述
messageType	String	是	消息类型，通过postMessage接口发出；登录失效的场景值为NOT_LOGIN
action	String	是	对应的 API 接口的 Action
embedParams	EmbedParams	否	仅在 action 为CreateEmbedWebUrl时生效。当前用户所在可嵌入页面的参数

EmbedParams

名称	类型	必选	描述
EmbedType	String	是	WEB 嵌入资源类型，取值范围参考接口参数获取其他可嵌入页面
BusinessId	String	否	WEB 嵌入的业务资源 ID, 参考接口参数获取其他可嵌入页面
HiddenComponents	Boolean	否	是否隐藏控件，只有预览模板时生效