FB体育 PC\H5 接入文档

概述

FB体育H5/PC投注网页，是基于FB体育app服务接口进行开发的投注网站，该网页提供了FB体育的所有功能，可直接嵌入使用，节约客户开发时间。

通过一定规则，拼接 url 即可打开FB体育投注网站，接入规则如下，请仔细阅读

注意：该工具不会维护传递 token 的有效性，如果 token 失效，请重新进行规则拼接访问

在接入投注网页前，商户服务端必须先接入FB体育数据服务的几个接口点击进入文档

/fb/data/api/v2/user/create 创建FB体育投注用户接口

/fb/data/api/v2/user/detail 查询用户信息和余额接口，异常情况可用于校验用户是否创建成功

/fb/data/api/v2/token/get 获取网页端鉴权token接口

/fb/data/api/v2/transfer/in 转入用户余额到FB体育接口（转账钱包模式）

/fb/data/api/v2/transfer/out 转出用户余额接口（转账钱包模式）

/fb/data/api/v2/transfer/detail 查询转账详情，异常情况下可用于检验转账是否成功（转账钱包模式）

其他FB体育数据服务接口，可按商户需求进行接入

游客模式触发登录跳转说明

FB体育支持游客模式浏览数据，即在非登陆模式下浏览官方客户端内容，当用户触发登陆的操作时（投注、查看订单等），则弹框提示未登录，点击“确认登录”按钮可跳转到商户登陆页，跳转页面需由贵公司对接，点击“取消”按钮则继续留在当前页面浏览数据。

注意：1、token要传字符串 guestMode 实现游客模式

2、该方法仅支持 Iframe 方式接入FB体育官方客户端，触发登录跳转的接入示例如下

addEventListener('message', e => {
    //Iframe子页面触发确认时，父页面拿到e.data.relogin，贵公司需要跳转的地址
    if(e.data.relogin){
      window.location.href = 'https://www.google.com/' 
    }
    //Iframe子页面点击新旧版切换，父页面拿到e.data.changeUrl，跳转地址
    if(e.data.changeUrl){
      this.cradSrc = e.data.changeUrl
    }
    /Iframe子页面点击新旧版切换，父页面拿到e.data.version，新旧版本标识
    if (e.data.version) {
      storage.put('version', e.data.version)
    }
})

打开指定赛事详情

FB体育支持打开指定赛事详情页，根据运动Id以及赛事Id打开对应详情页；若实现从赛事详情页直接返回FB首页，需拼接参数&gohome=1

H5: {域名}/index.html#/match-detail?matchId=888888&sportId=1

PC: {域名}/index.html#/detail/888888/1

步骤一：获取用户 token

通过FB数据服务接口文档内的/fb/data/api/v2/token/get 接口, 获取到 token 和 serverInfo对象，并将您的用户 token 和 serverInfo(对象) 为下一步做准备。

serverInfo  = {
        apiServerAddress:"http://fsports.com" api接口地址
        h5Address:"http://h5-fsports.com" H5投注页面地址
        pcAddress:"http://pc-fsports.com" PC投注页面地址
        ouPcAddress:"http://ou-pc-fsports.com" 新版PC投注页面地址
        pushServerAddress:"ws://push-fsports.com" 推送服务地址
        virtualAddress:"http://virapp-fsports.com" 虚拟体育地址
      };

步骤二：获取 URL 拼接规则

该步骤为生成 PC/H5 的有效访问地址的规则，H5 和 PC 均采用 HASH 模式路由,拼接规则如下：

PC 或者 H5 域名地址：

(serverInfo对象里的h5Address/pcAddress)/index.html#/
?token={第一步存储的 token}&nickname={第一步存储的昵称}
&apiSrc={第一步serverInfo对象里的apiServerAddress}
&pushSrc={第一步serverInfo对象里的pushServerAddress}
&virtualSrc={第一步serverInfo对象里的virtualAddress  (可选)}
&platformName={平台名称 例：FB体育 (可选)}
&icoUrl={网页的ico 例：https://fsports.co/favicon.ico (可选)}
&handicap={盘口 例：传Number类型1和2，目前暂时支持两种盘口(1是欧洲盘、2是香港盘) (可选)}
&language={多语言 例：CMN-中文, ENG-英语,  ZHO-繁体中文, VIE-越南语 (可选)}
&color={日间/黑夜模式 例：传dark或者daily(目前暂时支持两种模式dark为黑夜模式，daily为日间模式) (可选)}
&currencyId={默认币种 例：1-人民币, 2-美元, 10-越南盾, 200-USDT等等 (可选)}
&themeBg={第一步data对象里的themeBgColor (H5默认背景色，如果想通过url自己传选择十六进制颜色值去掉# 例：'6D060D')}
&themeText={第一步data对象里的themeFgColor (H5/PC默认选中色，如果想通过url自己传看格式 例："{"h5FgColor":"333333","pcFgColor":"888888","columnType":1}")} 
注释: banner功能归类在主题themeText里，如需展示banner可按照上述对接主题的方式，即对接themeBg，themeText这两个参数
&type=1&sportId=1{type类型只支持传(1-滚球, 3-今日, 4-早盘, 5-热门联赛);sportId传运动的ID,leagueId传联赛ID 注意type和(sportId/leagueId)要同时传，如果type=5,要传leagueId (可选)}
&controlMenu=1{今日/早盘是否收起暂无数据运动 例：1-默认收起, 2-默认展开, 3-隐藏暂无数据运动 (可选)}
&tutorialPop=1{首次登录弹窗教程提示 例：1-不提示, 不传默认 (可选)}
&hideBalance=1{隐藏H5首页头部余额 例：1-不显示, 不传默认 (可选)}
&noType=2{隐藏FB网页多语言入口，多语言通过url多语言参数更改 (可选)}
&cbs={币种展示列表 例：1-人民币, 2-美元, 10-越南盾, 200-USDT等等(cbs=1,2,200) (可选)}
&themeHeadText='6D060D'{H5头部图标和字体颜色，传选择十六进制颜色值去掉# 例：'6D060D' (可选)}
&ouPcAddress={新版入口展示 (可选)}
&pcAddress={旧版入口展示 (可选)}

拼接示例：

const token = token（步骤一中的token）;

const h5Src = serverInfo.h5Address（步骤一中的serverInfo对象里,可选旧版pc（serverInfo.pcAddress）/新版pc（serverInfo.ouPcAddress））;

const nickname = Storage.get("user-nickname")（步骤一中的nickname）;

const apiSrc = serverInfo.apiServerAddress（步骤一中的serverInfo对象里）;

const pushSrc = serverInfo.pushServerAddress（步骤一中的serverInfo对象里）;

const virtualSrc = serverInfo.virtualAddress（步骤一中的serverInfo对象里）;

const platformName = "FB体育"（自己平台名称，不传则默认FB体育）;

const icoUrl = "https://fsports.co/favicon.ico"（自己网页ico，不传则默认FB体育ico）;

const handicap = "1"（盘口名称，不传则默认欧洲盘）;

const language = "CMN"（多语言，不传则默认中文）;

const color = "dark"（日间/黑夜模式，不传则默认黑夜模式）;

const cid = "1"（传币种id，不传则默认取接口里第一个币种展示）;

const themeBg = "6D060D"（只支持十六进制颜色代码背景色，不传则默认展示，暂支持H5）;

const tutorialPop = "1"（首次登录弹窗教程提示：传1则不提示，不传则默认）;

const hideBalance = "1"（隐藏H5首页头部余额：传1则不提示，不传则默认）;

const noType = "2"（隐藏FB网页多语言入口，多语言通过url多语言参数更改）;

const themeText = "{"h5FgColor":"333333","pcFgColor":"888888"}"（不传则默认展示，暂支持H5/PC）;

const ouPcAddress = serverInfo.ouPcAddress（步骤一中的serverInfo对象里,URL上拼接该参数，新版入口才会显示）;

const pcAddress = serverInfo.pcAddress（步骤一中的serverInfo对象里,URL上拼接该参数，旧版入口才会显示）;

const URL_SRC = `${h5Src}/index.html#/?token=${token}&nickname=${nickname}&apiSrc=${apiSrc}&ouPcAddress=${ouPcAddress}&pcAddress=${pcAddress}&virtualSrc=${virtualSrc}&pushSrc=${pushSrc}&platformName=${platformName}&icoUrl=${icoUrl}&handicap=${handicap}&language=${language}&color=${color}&currencyId=${cid}&themeBg=${themeBg}&themeText=${themeText}&type=1&sportId=1&controlMenu=1&noType=2&themeHeadText=6D060D`（以H5为例子）;

步骤三：在项目内引入 H5\PC

上面步骤我们已经获取到所需的 H5/PC 验证后地址，在项目内直接引入就可以直接使用了，下面是几个平台的引入实例：

在网站内引入

接入参考：

方法 1：使用 Iframe 方式引入

在dom节点内任意位置插入
<iframe name="iframe"
allowfullscreen="allowfullscreen"
webkitallowfullscreen="true"
mozallowfullscreen="true"
allowtransparency="true"
auto="autoplay"
muted="muted"
frameborder="0" src="{上一个步骤存储的URL_SRC}" />
并设置好宽高（注意：Iframe上属性一定要设置完全，不然视频点击全屏会失效）

方法 2：使用新窗口打开投注选项

window.open({ 上一个步骤存储的URL_SRC });