盯链开放平台
Return to top
On this page

流转市场 H5 接入

盯链流转市场 H5 接入

前置条件

已完成秒转接入

获取 APPID

接入秒转后，在控制台 - 技术接入 - 秒转接入获取 appId

必须实现的方法 ⚠️

必须实现 auth 将得到的盯链用户token返回给 SDK (获取 token 的方式详见 同步用户信息)
必须实现 check 将 当前 平台用户 ID 返回给 SDK
check 方法需返回 字符串，若 userId 为其他类型，需转成字符串

注意

⚠️ 未实现 check 方法或未返回 当前 平台用户 ID 有可能导致用户信息泄漏
⚠️auth方法 不直接 调用盯链服务器获取 token，具体逻辑请见下方授权请求时序

授权请求时序

null

uniapp 接入

  • H5 接入

    接入教程步骤见视频，视频中使用的是原生 JS 接入方式

  • APP 接入

    下载 SDK

    在合适位置放置页面容器

    提示

    需设置容器大小及位置

    vue
    <template>
  <iframe id="dingblock-market-h5" frameborder="0"></iframe>
</template>

    在 app 逻辑层(script 标签)中 将用户 token 写入 storage

    vue
    <script>
export default {
  data() {
    return {}
  },
  mounted() {
    // 将平台用户token存在storage里
    uni.setStorageSync("token", "平台用户token")
    // 将平台用户ID存在storage里
    uni.setStorageSync("userId", "平台用户ID")
  },
}
</script>
    • 在 app 视图层 (lang="renderjs" module="dingblock") 中引用 SDK
    • 实现 auth 和 check 方法
    • 初始化 SDK
    vue
    <script module="dingblock" lang="renderjs">
import dingblock from '/dingblock-market.js'
export default {
  data() {
    return {}
  },
  mounted() {
    // 实现 auth 方法
    const auth = async () => {
      // 从storage中获取平台用户token
      const token = plus.storage.getItem("token")
      // 使用平台用户token请求平台服务器，将服务器从盯链获取的token返回
      const res = await fetch('服务器接口地址', {
        method: 'POST', // 设置请求方法
        headers: {
          'Content-Type': 'application/json'
        }, // 设置请求头
        body: JSON.stringify(data) // 参数
      }).then(resp => resp.json())
      return "盯链Token" // (如：res.token)
    }
    // 实现 check 方法
    const check = () => {
      // 从storage中获取平台用户ID
      const userId = plus.storage.getItem("userId")
      return userId
    }
    // 初始化sdk
    dingblock.init({
      appId: "YOUR_APPID",
      theme: "light",
      auth,
      check
    })
  },
}
</script>

React 接入

安装依赖

bash
npm i market-react --registry https://registry.npmjs.org/

使用

jsx
import { useRef, useCallback } from "react"
import { DingBlockMarket } from "market-react"

const market = useRef()
// ❗必须实现 需将平台用户ID返回给 SDK
const check = useCallback(() => {
  // 若用户ID非字符串类型，需转换后返回
  return "USER_ID"
}, [])
// 切换主题使用changeTheme
const handleChangeTheme = (value) => {
  market.current?.changeTheme?.(value)
}

// ❗必须实现 需将授权`Token`返回给 SDK
const auth = useCallback(async () => {
  return "DINGBLOCK_AUTH_TOKEN"
}, [])

// 可以重写跳转逻辑
const handleRedirect = useCallback((link) => {
  window.location.href = link
}, [])

return (
  <DingBlockMarket
    appId="YOUR_APPID"
    theme="dark"
    ref={market}
    auth={auth}
    check={check}
    onRedirect={handleRedirect}
  />
)

Vue 接入

安装依赖

bash
npm i market-vue --registry https://registry.npmjs.org/

使用

vue
<script>
import { ref } from "vue"
import { DingblockMarket } from "market-vue"

const theme = ref("dark")

const market = ref()
// ❗必须实现 需将平台用户ID返回给 SDK
const check = () => {
  // 若用户ID非字符串类型，需转换后返回
  return "USER_ID"
}
// 切换主题直接修改
const handleChangeTheme = (value) => {
  theme.value = value
}

// ❗必须实现 需将授权`Token`返回给 SDK
const auth = async () => {
  return "DINGBLOCK_AUTH_TOKEN"
}

const onRedirect = (link) => {
  window.location.href = link
}
</script>

<template>
  <DingblockMarket
    @redirect="onRedirect"
    ref="dingblock"
    :theme="theme"
    appId="YOUR_APPID"
    :auth="auth"
    :check="check"
  />
</template>

原生 JS 接入

引入 SDK

html
<script src="https://dbmarket.dingstock.net/sdk/dbmarket.min@2.0.0.js"></script>

在页面放置 H5 容器

提示

需设置容器大小及位置

html
<iframe id="dingblock-market-h5" frameborder="0"></iframe>

初始化 SDK

  • 实现 auth（必选）、check（必选）、onRedirect（可选）函数
  • 调用 dingblock.init 函数，传入 appId、theme (dark 或 light) 、auth、onRedirect
js
// ❗必须实现 需将授权`Token`返回给 SDK
const auth = async () => {
  return "DINGBLOCK_AUTH_TOKEN"
}

// ❗必须实现 需将平台用户ID返回给 SDK
const check = () => {
  // 若用户ID非字符串类型，需转换后返回
  return "USER_ID"
}

// 可重写onRedirect方法实现跳转逻辑
const onRedirect = (link) => {
  window.location.href = link
}

window.dingblock.init({
  appId: "YOUR-APPID",
  theme: "dark",
  auth,
  check,
  onRedirect,
})

  • SDK 方法

js
// 切换主题（暗色/亮色）
window.dingblock.changeTheme("light")

场景方案

  • 需要引入 2.1.0 以上 SDK
html
// H5
<script src="https://dbmarket.dingstock.net/sdk/dbmarket.min@2.1.0.js"></script>

// uni
<script src="https://dbmarket.dingstock.net/sdk/uniapp/dingblock-market@2.1.0.js"></script>
  • 在初始化函数中传入 initTarget 对象，这个对象包含两个参数，target 和 targetParams
  • target 参数表示初始化时进入的场景
  • targetParams 参数表示这个场景所使用的参数，此参数需要用 JSON.stringify 处理一次
js
// 部分无需参数的场景跳转
const initTarget = {
  target: "marketOrder", // 我的订单
  target: "walletRelay", // 我的钱包
}

// 跳转到我的发布
const initTarget = {
  target: "marketDeal", // 我的发布
  targetCallback: true, // 在下架完成后触发callbackTarget
}

// 快捷发布挂单场景
const initTarget = {
  target: "publishItem",
  targetCallback: true, // 在发布完成后触发callbackTarget
  targetParams: JSON.stringify({
    item: {
      collectionImageUrl: "https://xxx/img.png", // 藏品图片
      collectionName: "xxxxxx", // 藏品名称
      collectionNo: "xx", // 藏品编号
      collectionId: "xxxxxx", // 藏品ID
      uniqueId: "xxxxxx", // 唯一ID
    },
  }),
}

// 快捷购买挂单场景
const initTarget = {
  target: "showPayItem",
  targetCallback: true, // 在购买完成后触发callbackTarget
  targetParams: JSON.stringify({
    itemId: "xxxxxxxx", // 挂单ID
    productId: "xxxxxxxx", // 藏品ID
  }),
}

window.dingblock.init({
  appId: "YOUR-APPID",
  theme: "dark",
  auth,
  check,
  onRedirect,
  initTarget,
  callbackTarget, // 实现回调方法
})

附录

ts SDK 类型定义
interface Auth {
  (): Promise<string>;
}

interface Check {
  (): Promise<string|undefined>;
}

interface OnRedirect {
  (link: string): void | Promise<void>;
}

interface Params {
  appId: string;
  theme: "dark" | "light";
  auth: Auth;
  check: Check
  onRedirect: OnRedirect;
}

interface DingBlock {
  init: (params: Params) => void;
  changeTheme: ('dark' | 'light') => void;
}

 

Copyright © 成都盯链科技有限公司2023