如何在Telegram通过direct link 分享TMA应用?

  • lake01
  • 更新于 2024-04-22 23:21
  • 阅读 1540

如何在纯前端的项目之中实现TMA链接的分享与跳转?在webtelegram之中,telegramTMA作为一个iframe被嵌套在telegram的项目之中,此时的telegramTMA就是一个普通的web应用。在telegram的directlink到我们web应用之中,存在

如何在纯前端的项目之中实现TMA 链接的分享与跳转?

在web telegram之中,telegram TMA 作为一个iframe被嵌套在telegram的项目之中, 此时的telegram TMA 就是一个普通的web应用。在telegram的direct link到 我们web 应用之中,存在一个映射,这个映射由telegram bot的app来管理,通常一个app对应一个web服务。telegram direct link 与 web 服务的路由存在一个映射关系,而当路由的参数存在多个的时候,需要自动处理(自动映射)这个映射关系。

由telegram direct link 到目标web url之中,需要解决下面2个问题:

  1. telegram direct link 拼接
  2. 解析direct link,redirect 到 web 应用之中,此时的rediirect可以发生在前端以前端亦可以在后端。

官方文档之中,自定义的参数可以放入url query string的startapp字段之中。 telegram direct link格式如下: <!--StartFragment--> https://t.me/botusername/appname https://t.me/botusername/appname?startapp=command <!--EndFragment-->

如此,我们可以操作的 command 的值或者通过多个app来达成目标。 <br />

此处采用command复合方式,挺通过base64 encode的方式来处理问题1:

const link = `https://t.me/${TG_BOT_NAME}/${TG_BOT_APP}?startapp=${btoa(
      JSON.stringify({ projectUrl, campaignId, type: 'campaign' })
    )}`;

const shareLink =  `https://t.me/share/url?url=${encodeURIComponent(link)}`;

纯前端路由解析base64 decode与redirect


function safeParse(start_param) {
  try {
    const str = atob(start_param);
    return JSON.parse(str);
  } catch (error) {
    return {};
  }
}
useLayoutEffect(() => {
    if (webApp?.initDataUnsafe.start_param) {
      const { type, projectUrl, campaignId } = safeParse(
        webApp?.initDataUnsafe.start_param
      );
      if (type === 'campaign') {
        navigate(`/${projectUrl}/${campaignId}`);
      }
    }
}, []);

<br /> <br /> <br />

相关技术文档:

点赞 1
收藏 0
分享

0 条评论

请先 登录 后评论
lake01
lake01
0x624f...8e3f
江湖只有他的大名,没有他的介绍。