如何处理电子签web页面嵌入的登录失效

背景介绍

腾讯电子签可嵌入Web页面是通过调用腾讯电子签的API接口获取到的url链接，开发者可以将该链接嵌入到自己的网页或应用中。用户点击链接后，会自动跳转到腾讯电子签的登录页面，进行无感知登录。登录态维持30分钟，用户可以在这段时间内进行签署操作。但当用户在使用腾讯电子签时，如果登录态失效，就需要重新调用API接口，获取新的url链接，重新登录才能使用。

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

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

总之，腾讯电子签可嵌入Web页面解决了登录失效的问题。开发者可以通过监听消息接口，实现自定义的处理方式。这个方案可以为开发者节省大量的时间和精力，方便开发者进行二次开发和集成，实现更加个性化的电子签名服务。

使用说明

对于触发登录失效事件时，可以参考消息接口，进行事件监听。这里主要介绍下通用可嵌入页面的处理方式：

对于通用的可嵌入页面（创建签章、创建印章、创建模板、修改模板、预览模板、预览合同等）来说，都是通过获取其他可嵌入页面这个接口来获取链接的。而且接口的参数格式也比较固定。从消息接口监听到的数据中，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 === '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: 'MODIFY_TEMPLATE',
          //   BusinessId: 'xxxxxxx',
          // },
          if (res?.data?.data?.WebUrl) {
            // 获取到新的Web页面嵌入的链接
            setIframeUrl(res.data.data.WebUrl);
          }
      }
    }

    window.addEventListener('message', handler)
    return () => {
      window.removeEventListener('message', handler);
    }
  }, [])

在这个React组件中，我们通过useEffect来监听window的message事件，当接收到消息时，判断action字段的值是否为CreateEmbedWebUrl，如果是，则从消息中获取embedParams，进行重新调用接口的操作。

以上内容，是web嵌入页面在修改模板这个场景下的实际应用。如果您想了解更多的能力和场景，可以查看完整教程：

Web页面登录失效的处理

您也可以通过视频教程，更加详细的了解这个功能。

Web页面嵌入-登录失效处理