Skip to main content

Practical Tutorial on Login Methods

CloudBase provides a cross-platform login authentication feature, enabling you to build a user system, including anonymous login, email login, WeChat authorized login, custom login, username and password login, and mobile SMS verification code login.

Prerequisites​

Activate an environment and select pay-as-you-go as the billing mode.

Login Authentication Methods​

CloudBase provides the following login authentication methods for different user scenarios:

Login TypeScenario
UnauthenticatedAfter allowing unauthenticated access, users can access the application without logging in.
Anonymous LoginUsers log in to CloudBase with a temporary anonymous identity without registration.
Email LoginUsers log in using their own email + password.
WeChat Authorization Login
  • Official account web pages authorized by the WeChat Official Accounts Platform.
  • Websites authorized by the WeChat Open Platform (requires certification).
Custom LoginDevelopers can fully take over the login process, such as integrating with their own account systems and customizing login logic, etc.
Username and Password LoginUsers log in using their own username and password.
SMS Verification Code LoginUsers log in using their own phone number and verification code.

Login Type​

Not Logged In​

  1. Log in to the Cloud Development CloudBase Console, and in the Login Authorization section, enable the Unauthenticated Access option.
  2. Go to the Environment > Security Configuration page and click Add Domain.
  3. Set up custom security rules to allow unauthenticated access.
  4. Initialize the SDK and initiate the call. For more details, please refer to Usage Process.

Anonymous Login​

  1. Log in to the Cloud Development CloudBase Console, and on the Login Authorization page, enable the Anonymous Login option to activate anonymous login.

  1. Go to the Environment > Security Configuration page and click Add Domain.

  1. Develop the login process.
import cloudbase from '@cloudbase/js-sdk';

const app = cloudbase.init({
  env: env: 'xxxx-yyy';  // This is the Environment ID
});

const auth = app.auth();

async function login(){
  await auth.anonymousAuthProvider().signIn();
  // When anonymous login succeeds, the isAnonymous field in the login status is detected as true.
  const loginState = await auth.getLoginState();
  console.log(loginState.isAnonymousAuth); // true
}

login();
Anonymous Login effect is as shown in the figure below:

Email Login​

  1. Go to the Cloud Development CloudBase Console, and on the Login Authorization settings page, enable Email Login.

  1. Click Configure Sender, and fill in your email's SMTP Account Information.
  1. Click Application Configuration, and set your Application Name and Auto Redirect Link.
  1. After the configuration is successful, you will receive a test email.

  1. Sample code is as shown below:
import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id",
});

WeChat Official Account Login​

Prerequisites​

  • On the Register Official Account page, a Service Account has been successfully registered ("Subscription Accounts" do not have access to the "Webpage Authorization" interface).
  • Log in to the newly registered Service Account, go to Settings > Basic Information > WeChat Authentication section, and complete WeChat authentication.
  • Complete adding the webpage authorization domain for the official account.
  • Go to the Development > Basic Configuration page to obtain the AppId and AppSecret of the Service Account.

Procedures​

  1. Log in to the CloudBase Console, and in Login Authorization, click to enable WeChat Official Account login authorization.
  2. Click the Enable button and then enter the corresponding AppId and AppSecret.
  3. Go to the Environment > Security Configuration page and click Add Security Domain.
  4. Sample code is as shown below:
import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id",
});

WeChat Open Platform Login​

Prerequisites​

  • Complete the registration on WeChat Open Platform.
  • Log in to the newly registered WeChat Open Platform, go to Account Center > Developer Qualification Certification page to complete the application for WeChat authentication.
  • Successfully create a web application on the WeChat Open Platform.
  • Obtain the AppId and AppSecret of the WeChat Open Platform web application.

Procedures​

  1. Log in to the CloudBase Console, and in Login Authorization, click to enable WeChat Open Platform login authorization.
  2. Click the Enable button and then enter the corresponding AppId and AppSecret.
  3. Add the Cloud Development SDK to your Web application.
<script src="//static.cloudbase.net/cloudbase-js-sdk/1.6.0/cloudbase.full.js"></script>

<script>
  const app = cloudbase.init({
    // Your environment id
    env: "your-env-id",
  });
</script>
Note

Copy the code snippet below and paste it at the bottom of your HTML code, before other script tags.

const auth = app.auth();
const provider = auth.weixinAuthProvider({ appid: "...", scope: "xxxx" });
async function login() {
  // 1. It is recommended to first check whether you are already logged in before logging in.
  const loginState = await auth.getLoginState();
  if (!loginState) {
    // 2. Call the WeChat login API
    provider.getRedirectResult().then((loginState) => {
      if (loginState) {
        // Login successful, login state already exists locally
      } else {
        // Not logged in, trigger WeChat login
        provider.signInWithRedirect();
      }
    });
  }
}
login();

Custom Login​

Custom login is applicable to scenarios where developers have full control over authentication and maintain their own account system.

  1. Log in to the Cloud Development CloudBase Console, on the Login Authorization page, in the Custom Login section, click Private Key Download to obtain the custom login private key.
Note

The private key is a file containing JSON data. Please save the downloaded or copied private key file to your server or cloud function, assuming the path is /path/to/your/tcb_custom_login.json.

  • The private key file is a critical credential that proves administrator identity. Please keep it secure and avoid leakage.
  • Each time a private key file is generated, it will cause the previously generated private key file to expire after 2 hours.
  1. Call the CloudBase server-side SDK, pass the custom login private key during initialization, then sign out a Ticket and return it to the client side.
const cloudbase = require("@cloudbase/node-sdk");
// 1. Initialize SDK.
const app = cloudbase.init({
    env: "your-env-id",
    // Pass the custom login private key credentials:
    require("/path/to/your/tcb_custom_login.json")
});
// 2. Developer-defined unique user identifier.
const customUserId = "your-customUserId";
// 3. Create a ticket.
const ticket = app.auth().createTicket(customUserId);
// 4. Return the ticket to the client return ticket;
Note

Developers can also write a cloud function to generate a Ticket and set up an HTTP access service for it. Then the client can obtain the Ticket via HTTP requests. For details, see Accessing Cloud Functions via HTTP.

  1. After obtaining the Ticket, the client-side application can use it to log in to CloudBase by calling the auth.signInWithTicket() method provided by the client-side SDK.
import cloudbase from "@cloudbase/js-sdk";
const app = cloudbase.init({ env: "your-env-id" });
const auth = app.auth();
async function login() {
  // 1. It is recommended to check whether you are already logged in before logging in.
  const loginState = await auth.getLoginState();
  if (!loginState) {
    // 2. Request the developer's service API to obtain the ticket.
    const ticket = await fetch("...");
    // 3. Log in to CloudBase
    await auth.customAuthProvider().signIn(ticket);
  }
}
login();

The overall process is as follows:

Username-Password Login​

  1. Log in to the Cloud Development CloudBase Console, and in the Login Authorization, click to enable Username-Password Login.
  2. Initialize the SDK.
import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id",
});
  1. Log in using other methods.
Note

Before binding a username, users must first log in using other methods such as email login or WeChat Official Account login, but excluding anonymous login.

The following uses Email Login as an example:

const auth = app.auth();
await auth.signInWithEmailAndPassword(email, password); // Email Login
  1. Bind username.
const auth = app.auth();
if (!(await auth.isUsernameRegistered(username))) {
  // Check if the username has been bound
  await auth.currentUser.updateUsername(username); // Bind username
}
  1. Sample code is as shown below:
import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id",
});

SMS Verification Code Login​

  1. Log in to the Cloud Development CloudBase Console, and in the Login Authorization, click to enable SMS Verification Code Login.
  2. Click Signature Configuration under the operation bar, enter the corresponding parameters, and then click Save.
  1. Initialize the SDK.
import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id",
});
  1. To register an account using a mobile phone number, the user first needs to enter their mobile phone number and then call the SDK's send SMS verification code interface.
// Send the verification code
app
  .auth()
  .sendPhoneCode("Mobile phone number")
  .then((res) => {
    console.log("Verification code sent successfully");
  });

// Verification code + password registration
app
  .auth()
  .signUpWithPhoneCode("Mobile phone number", "Six-digit verification code", "Custom password")
  .then((res) => {
    console.log("Sign up successful");
  });
  1. The login methods for mobile password and SMS verification code are as follows: