初始化

@cloudbase/js-sdk 让您可以在 Web 端（如 PC Web 页面、微信公众平台 H5 等）使用 JavaScript 访问 Cloudbase 服务和资源。

提示

当前@cloudbase/js-sdk@latest 版本已升级至 v2 版本，若需使用 v1 版本，请参考v1 文档。

选择一个提示词，开始你的 AI 原生开发之旅

前提条件

配置安全域名

在使用 @cloudbase/js-sdk 之前,您需要先配置安全域名,否则会遇到 CORS 跨域错误。详情请参考：安全来源

配置步骤:

1. 前往 云开发平台/环境配置/安全配置
2. 添加网站域名(例如: www.example.com)
3. 配置后约 10 分钟生效

💡 注意:

• 只有在安全域名列表中的域名才能使用云开发 JS SDK,这是为了保护您的数据安全
• 本地开发时,请添加 localhost 或 127.0.0.1 到安全域名列表中
• 如果遇到 CORS 错误,请检查安全域名配置是否正确

安装并初始化

安装 SDK

包管理器

# npm
npm install @cloudbase/js-sdk -S

# yarn
yarn add @cloudbase/js-sdk

初始化 SDK

import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id", // 替换为您的环境id
  region: "ap-shanghai", // 不传默认为上海地域
});

CDN 全量引入

提示

latest 表示使用最新版本，你可以设置为固定版本

<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.full.js"></script>
<script>
  const app = cloudbase.init({
    env: "your-env-id", // 替换为您的环境id
    region: "ap-shanghai", // 不传默认为上海地域
  });
</script>

CDN 按需引入

提示

latest 表示使用最新版本，你可以设置为固定版本

<!-- 内核 -->
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.js"></script>
<!-- 登录模块 -->
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.auth.js"></script>
<!-- 数据库模块 -->
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.database.js"></script>
<!-- 数据模型模块 -->
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.model.js"></script>
<!-- 云函数模块 -->
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.functions.js"></script>
<!-- 云存储模块 -->
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.storage.js"></script>
<!-- 实时推送模块，引入前必须首先引入数据库模块 -->
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.realtime.js"></script>
<!-- AI模块 -->
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.ai.js"></script>
<script>
  // 注册功能模块
  registerAuth(cloudbase);
  registerDatabase(cloudbase);
  registerModel(cloudbase);
  registerFunctions(cloudbase);
  registerStorage(cloudbase);
  registerRealtime(cloudbase);
  registerAi(cloudbase);

  const app = cloudbase.init({
    env: "your-env-id", // 替换为您的环境id
    region: "ap-shanghai", // 不传默认为上海地域
  });
</script>

💡 注意：功能模块必须在内核之后引入，并且登录模块必须引入

最新的版本号 version 可以前往 NPM 查看。

初始化参数

字段	类型	必填	默认值	说明
env	string	是	-	TCB 环境 ID
region	string	否	ap-shanghai	地域：ap-shanghai（默认）、ap-guangzhou、ap-singapore
lang	string	否	zh-CN	指定语言：zh-CN（默认）、en-US
accessKey	string	否	-	匿名用户鉴权参数，可以暴露在浏览器，用于请求公开访问的资源

⚠️ 注意：当前使用的环境所属地域，必须与当前指定的地域信息一致！

登录鉴权

js-sdk 使用 C 端 用户权限，需要登录后才可调用云开发能力。

Publishable Key

提示

使用此功能请升级 @cloudbase/js-sdk 至 2.21.0 及以后版本

Publishable Key 可以暴露在浏览器，用于请求公开访问的资源。Publishable Key 实际是一个匿名用户，可以有效降低 MAU。详细介绍请 参考文档说明 。

获取 Publishable Key

可前往 云开发平台/API Key 配置 中生成 Publishable Key

使用 Publishable Key

const app = cloudbase.init({
  env: "your-env-id", // 替换为您的环境id
  accessKey: "Publishable Key", // 填入生成的 Publishable Key
});

⚠️ 注意：Publishable Key 只能生成一次，并且是长期有效的、不能删除的，请妥善保管

匿名登录

详情请参考： 匿名登录

const app = cloudbase.init({
  env: "your-env-id", // 替换为您的环境id
});

const auth = app.auth();
await auth.signInAnonymously();

账号登录

详情请参考： 账号登录

const app = cloudbase.init({
  env: "your-env-id", // 替换为您的环境id
});

const auth = app.auth();

await auth.signIn({
  username: "your username",
  password: "your password",
});

初始化示例

新加坡地域

import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id", // 替换为您的环境id
  region: "ap-singapore",
});

使用英文提示

import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id", // 替换为您的环境id
  lang: "en-US",
});