嵌入式挂件功能 - 多会知识库

多会支持使用 js 的方式将购票页面嵌入到网页中，为活动官网提供无缝式的购票体验。

# 使用方式：

在页面底部加入：

<script src="https://wx.duohui.co/js/embed.js"></script>

在购票链接的 a 标签元素上加入 duohui-button 的类名(class)，例如：

<a href="https://wx.duohui.co/event/1161" class="duohui-button">立即购票</a>

如需指定票种，请在链接尾部加入 ?ticket=[TICKETID]，例如：

<a href="https://wx.duohui.co/event/1161?ticket=1" class="duohui-button">立即购票</a>

如需打开兑换窗口，请在链接 query 中加入 openCoupon，例如：

<a href="https://wx.duohui.co/event/1161?ticket=1&openCoupon" class="duohui-button">立即购票</a>

# 注意事项：

如果无法确定 eventId 和 ticketId 请联系客服；
若不方便修改购票链接的类名，请使用以下方式：

将现有的类名作为添加到 embed.js 之后作为后缀，例如：

  <a href="https://wx.duohui.co/event/1161" class="my-action-button">立即购票</a>
  ...
  <script src="https://wx.duohui.co/js/embed.js?class=my-action-button"></script>

# 配合 JWT 实现统一登录：

参照 JWT 文档实现 JWT Token 生成业务（将自有系统的用户信息生成成 JWT Token 传入）；
自行实现一个跳转到购票界面的接口 [JWT Gateway]：

此接口判断用户当前的登录状态，若已经登录，则根据用户信息生成 JWT Token 并将其附加到目标网址（例如：https://wx.duohui.co/event/1161）的 Query 中，将页面重定向到：https://wx.duohui.co/embed/event/1161?token={token}(请特别注意，此时的目标路径为：https://wx.duohui.co/embed/event/{eventId})

若未登录，则先展示登录，要求用户先登录。在登录后，按上述逻辑重定向到指定地址。（活动页面亦可只在用户已登录时展示购票按钮，[JWT Gateway] 无需实现未登录的情况。）

对于需要用户登录的情况，需要在 [JWT Gateway] 的网页中使用如下代码，来通知活动页面成功加载了登录页：
```
 $(window).load(function () {
    window.parent.postMessage('ready', '*')
  })
```

完成上述 JWT Gateway 后，将此页面的 URL 写入到 "duohui-button" 的 a 标签中：

<a href="https://wx.duohui.co/event/1161?ticket=1&openCoupon" jwt-gateway="https://mydomain.com/user/duohui-jwt?event=1161&ticket=1&openCoupon" class="duohui-button">立即购票</a>