Initialize

@cloudbase/js-sdk allows you to use JavaScript to access Cloudbase Service and resources on the web, such as PC Web pages and WeChat public platform H5.

Note

The current <1>@cloudbase/js-sdk@latest</1> version has been upgraded to v2. If you need to use v1, see the v1 document.

Select a prompt to start your AI-native development journey

Prerequisites

Configure the secure domain name

Before using @cloudbase/js-sdk, you need to configure the secure domain name, otherwise you will encounter a CORS error. For details, refer to: Secure source

Configuration Steps

1. Go to Cloud Development Platform/environment configuration/security configuration
2. Add a website domain name (for example: www.example.com)
3. Takes effect about 10 minutes after configuration

💡 Note:

• Only domain names in the secure domain name list can use the Cloud Development JS SDK to protect your data security
• For local development, add localhost or 127.0.0.1 and the port to the secure domain name list
• If you encounter a CORS error, please check whether the secure domain name configuration is correct

Install and Initialize

Install the SDK

package manager

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

# yarn
yarn add @cloudbase/js-sdk

Initialize SDK

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

const app = cloudbase.init({
env: "your-env-id", // Replace this value with your environment ID
region: "ap-shanghai", // Defaults to Shanghai region if not specified
});

Full CDN Support

Note

latest indicates usage of the latest version, which can be set to a fixed version

<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.full.js"></script>
<script>
  const app = cloudbase.init({
env: "your-env-id", // Replace this value with your environment ID
region: "ap-shanghai", // Defaults to Shanghai region if not specified
  });
</script>

On-demand CDN Support

Note

latest indicates usage of the latest version, which can be set to a fixed version

// Kernel
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.js"></script>
// Login module
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.auth.js"></script>
// Database module
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.database.js"></script>
// Data Model module
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.model.js"></script>
// Cloud function module
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.functions.js"></script>
// Cloud storage module
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.storage.js"></script>
// Real-time push module, which should be imported after the database module is imported.
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.realtime.js"></script>
// AI module
<script src="https://static.cloudbase.net/cloudbase-js-sdk/latest/cloudbase.ai.js"></script>
<script>
// Registration feature module
  registerAuth(cloudbase);
  registerDatabase(cloudbase);
  registerModel(cloudbase);
  registerFunctions(cloudbase);
  registerStorage(cloudbase);
  registerRealtime(cloudbase);
  registerAi(cloudbase);

  const app = cloudbase.init({
env: "your-env-id", // Replace this value with your environment ID
region: "ap-shanghai", // Defaults to Shanghai region if not specified
  });
</script>

💡 Note: The feature module must be introduced after the kernel, and the login module must be introduced.

The latest version number can be viewed at NPM.

Initialize parameter

Field	Data Type	Required	Default Value	Description
env	string	Yes	-	TCB environment ID
region	string	No	ap-shanghai	Region: ap-shanghai (default), ap-guangzhou, ap-singapore
lang	string	No	zh-CN	Specified language: zh-CN (default), en-US
accessKey	string	No	-	Anonymous user authentication parameter, can be exposed in browser, for request to public accessed resource

⚠️ Note: The region of the currently used environment must be consistent with the specified region information.

Login Authentication

js-sdk uses C-end user permission. Log in to call cloud development capability.

Publishable Key

Note

To use this feature, upgrade @cloudbase/js-sdk to version 2.21.0 or later.

Publishable Key can be exposed in the browser for requesting public accessed resources. Publishable Key is actually an anonymous user, which can effectively reduce MAU. For detailed introduction, refer to reference document.

Get Publishable Key

Go to Cloud Development Platform/API Key Settings to generate Publishable Key

Use Publishable Key

const app = cloudbase.init({
env: "your-env-id", // Replace this value with your environment ID
accessKey: "Publishable Key", // Fill in the generated Publishable Key
});

⚠️ Note: Publishable Key can only be generated once, is permanently valid and cannot be deleted. Keep it safe.

Anonymous Login

For details, see Anonymous Login.

const app = cloudbase.init({
env: "your-env-id", // Replace this value with your environment ID
});

const { data, error } = await app.auth.signInAnonymously();

Account login

For details, refer to Account login.

const app = cloudbase.init({
env: "your-env-id", // Replace this value with your environment ID
});

const { data, error } = await app.auth.signInWithPassword({
  username: "your username",
  password: "your password",
});

Initialization Examples

Singapore region

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

const app = cloudbase.init({
env: "your-env-id", // Replace this value with your environment ID
  region: "ap-singapore",
});

Use English prompt

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

const app = cloudbase.init({
env: "your-env-id", // Replace this value with your environment ID
  lang: "en-US",
});