飞布产品手册
官网B站Github
V2.0
V2.0
  • 序言
  • 更新日志
    • 更新日志V2.0
    • V2.0更新说明
    • 更新日志V1.0
  • 产品简介
    • 什么是飞布?
    • 飞布的价值
    • 飞布的优势
    • 应用场景
    • 数据安全
    • 产品案例
  • 快速入门
    • 初识飞布
    • 快速上手
      • 图文版
    • 词汇概览
    • 工作原理
  • 基础-可视化开发
    • 概览
      • CLI
      • 控制台
        • 主功能区
    • 数据源
      • 数据库
        • 数据库连接
          • 高级设置
        • 数据建模
        • 数据预览
      • Prisma 数据源
      • REST 数据源
      • GraphQL 数据源
      • 消息队列
    • API构建
      • 可视化构建
        • API规范
      • 批量新建
      • HTTP请求流程指令
      • 使用API
      • 实时查询
      • 实时推送
      • 关联查询
      • 数据缓存
      • 常见用例
    • 身份验证
      • 授权码模式
        • 身份验证(废弃)
      • 隐式模式
      • 数据权限控制
    • 身份授权
      • RBAC
        • 授权与访问控制(废弃)
      • 接口权限控制
      • 开放API
    • 文件存储
      • S3配置及使用
      • 文件管理面板
      • 高级配置:profile
  • 进阶-钩子机制
    • 钩子概览
    • 启动钩子
      • Node钩子
      • Golang钩子
      • Java钩子
      • Python钩子
    • OPERATION钩子
    • 身份验证钩子
    • graphql钩子
    • 函数钩子
      • function
      • proxy
    • 文件上传钩子
    • 内部调用
  • 使用-部署上线
    • 部署运维
      • 手动部署
        • 流水线部署(废弃)
      • Docker部署
      • 飞布云
      • sealos部署
    • 接口安全
      • CSRF token 保护
      • 跨域访问
    • 客户端SDK
      • Js SDK
      • 微信小程序SDK
      • Flutter SDK
      • uniapp SDK
    • 性能测试
  • 迁移到V2
  • 环境准备
    • 文件存储 S3
    • 身份认证 OIDC
    • NodeJs环境
  • 实战案例
    • Amis Admin
      • 管理后台-refine(废弃)
    • 实时TODO LIST
    • 语音版ChatGPT
    • AI魔法师实战
    • 阿里低代码引擎
    • appsmith集成
  • Roadmap
  • 常见问题
  • 核心概念
    • GraphQL
    • 超图
    • 请求时序图
    • 服务端Operation
  • 二次开发
    • 钩子规范
      • 钩子规范bak
    • 模板规范
    • 自定义模板
    • 其它参考
由 GitBook 提供支持
在本页
  • 引用SDK
  • 查询和变更
  • 实时
  • 文件上传
  • 身份验证

这有帮助吗?

在GitHub上编辑
  1. 使用-部署上线
  2. 客户端SDK

Js SDK

js-client是基于javascript语言UMD风格的Fireboom API 封装,可以在浏览器环境中使用。

引用SDK

配置基本请求头

在index.html文件中增加baseURL配置,自定义访问域名。

index.html
<script src="./index.umd.min.js"></script>

自定义请求域名

FBClient.setBaseURL('https://xxx.cc.com')

自定义请求头

FBClient.setExtraHeaders({ 'X-CUSTOM-HEADER': 'VALUE' })

查询和变更

查询

FBClient.query.GetT({input:{id:1}}).then(console.log)

变更

FBClient.mutation.CreateT({input:{name:"sss",des:"des"}}).then(console.log)

实时

实时查询

FBClient.subscription.GetT({input:{id:1},liveQuery: true}).then(async res => {
  for await (const v of res) {
    console.log(v)
  }
})

订阅

FBClient.subscription.GetT({input:{id:1}}).then(async res => {
  for await (const v of res) {
    console.log(v)
  }
})

订阅一次

使用subscribeOnce运行订阅,这将直接返回订阅响应,而不会推流。适用于SSR场景。

FBClient.subscription.GetT({input:{id:1},subscribeOnce: true}, ({ data, error }) => {
  console.log(data)
})

文件上传

<input type="file" id="fileInput" name="fileInput" >
<script>
    const fileInput = document.getElementById('fileInput');
    fileInput.addEventListener('change', (event) => {
        const files = event.target.files
        if (files == null) return
        // 调用上传函数
        FBClient.uploadFiles({
            provider: 'tengxunyun',
            files: files,
            profile: 'avatar', // (可选)高级配置
            directory:"sss",     // (可选)上传目录
            meta:{              // (可选)meta信息
                postId:"sss"
            }
        })
    });
</script>

身份验证

身份认证包含两种模式:授权码模式(基于cookie)和隐式模式(基于token)。

授权码模式

登录

FBClient.login('auth0');

获取用户

FBClient.fetchUser();

退出登录

FBClient.logout({
  logoutOpenidConnectProvider: true,
});

隐式模式

获取Token

使用Token

index.js
FBClient.setAuthorizationToken('<access_token>')

上一页客户端SDK下一页微信小程序SDK

最后更新于1年前

这有帮助吗?

详情见 ->获取Token

隐式模式