JPassTools API 串接範例

本頁面主要提供 JPassTools 相關 API 的使用方式及注意事項。

不需安裝 Cat。僅需載入對應 js。

// 測試環境
<script src="https://public.hare200.com/jpass-tools/v0.0.12/jpass-tools-f2e.beta.umd.cjs"></script>

// 正式環境
<script src="https://public.hare200.com/jpass-tools/v0.0.12/jpass-tools-f2e.umd.cjs"></script>

jpass-tools-upgrader

使用 升級 JKF 商業帳號視窗

型別提供

interface JPassToolsUpgraderEl extends HTMLElement {
  /** 設定資訊 */
  setUpgradeInfo: (payload: ProductUpgradeInfo) => void;
  /** 關閉元件 */
  close: () => Promise<void>;
}

/** 產品端提供的使用者資訊 */
interface ProductUpgradeInfo {
  /** 產品 appId, e.g. jvid, jkforum, avplus, jkface... */
  appId: string;
  /** JPass 升級 token (jut) */
  upgradeToken: string;
  /** 顯示的帳號名稱 / 頻道名稱 */
  displayName: string;
  /** 顯示的帳號頭像 / 頻道頭像 */
  avatar: string;
  /** 聯絡客服的連結 */
  contactUsLink: string;
}

declare global {
  interface HTMLElementTagNameMap {
    'jpass-tools-upgrader': JPassToolsUpgraderEl;
  }
}

用例

let el: JPassToolsUpgraderEl | null = null

const openJPassUpgrader = (): void => {
  // 1. 生成 jpass-tools-upgrader 元件
  el = document.createElement('jpass-tools-upgrader')
  // * 可自行設定 z-index
  el.style.zIndex = '100'

  // 2. 事件監聽綁定
  el.addEventListener('jpass:open', () => {
    console.log('JPass 升級器已開啟')
  })

  el.addEventListener('jpass:close', () => {
    console.log('JPass 升級器已關閉')
  })

  el.addEventListener('jpass:complete', ((event: CustomEvent) => {
    const { jpassId = '', objectId = '', uid = NaN } = event.detail[0]

    console.log('JPass 升級器成功', {
      jpassId: jpassId,
      objectId: objectId,
      uid: uid,
    })
  }) as EventListener)

  el.addEventListener('jpass:error', ((event: CustomEvent) => {
    const { code = NaN, message = '' } = event.detail[0]

    console.log('JPass 升級器發生錯誤', {
      code: code,
      message: message,
    })
  }) as EventListener)

  // 3. 掛載元件至畫面上，自動開啟
  document.body.appendChild(el)

  // 4. 設定升級資訊
  el.setUpgradeInfo({
    appId: '{{ 產品 appId }}', // jvid, jkforum, avplus, jkface...
    upgradeToken: '{{ JPass 升級 token (jut) }}',
    displayName: '{{ 顯示的帳號名稱 / 頻道名稱 }}',
    avatar: '{{ 顯示的帳號頭像 / 頻道頭像 }}',
    contactUsLink: '{{ 聯絡客服的連結 }}',
  })
}

// 5. 也可手動關閉彈窗
const close = () => {
  el?.close()
}