Skip to main content

WeChat OAuth Login

Applications authorized by the WeChat Open Platform (including regular website applications and mobile applications, etc.) can directly use WeChat to log in to CloudBase.

Version Information
  • Login Authentication (v2) applies to @cloudbase/js-sdk@2.x version
  • If you are using SDK version 1.x, please refer to Login Authentication (v1)
  • v2 version currently does not support Official Account login. If you need to use this method, please use the v1 version

This document will introduce using the V2 version.

Preparatory Actions​

Enable WeChat Login​

  1. First, you need a registered account on the Open Platform. If not, go to WeChat Open Platform to apply for one.
  2. Go to CloudBase/Authentication
  3. In the login methods list, select the WeChat Open Platform Login method, click Go to Settings, and fill in the AppId and AppSecret

Registration Process​

When logging in via WeChat authorization, a corresponding CloudBase user account is automatically created for the user on their first login, eliminating the need for a separate registration process.

The specific process is as follows:

  1. When a user logs in via WeChat for the first time, the system automatically creates a CloudBase user
  2. The user's WeChat information (such as nickname, profile picture, etc.) is automatically synced to the CloudBase user profile
  3. When logging in subsequently with the same WeChat account, it will directly log in to the corresponding CloudBase user

Login Flow​

Obtaining the Third-party Platform Authorization Page URL​

Fill in the WeChat Platform ID, Redirect URI, and custom state identifier field to identify the source of the platform callback. The system has built-in Platform ID for WeChat Open Platform.

auth instance, please refer to SDK Initialization

Auth.genProviderRedirectUri is used to generate the third-party platform authorization page URL

const {
    uri
} = await auth.genProviderRedirectUri({
    provider_id: "wx_open", // WeChat Open Platform
    provider_redirect_uri: providerUri, // Redirect URI
    state: state, // Custom state identifier
    other_params: otherParams // Other parameters
});

After accessing the URI and granting authorization, the callback will return to the specified address to obtain the third-party platform token​

Redirect the user to the URI, e.g. location.href = uri; after the user completes authorization, the callback will return to the specified provider_redirect_uri address.

// At this point, the url query contains parameters such as the authorization code, state, etc.
// 1. Check whether the state matches the expected value (e.g., configured wx_open)

// 2. Obtain the code parameter carried in the url parameters when the third-party platform redirects back to the page
const provider_code = "your_provider_code";

// 3. If the conditions are met, obtain the third-party platform token
const {
    provider_token
} = await auth.grantProviderToken({
    provider_id: "wx_open",
    provider_redirect_uri: "curpage", // Specify the url address to which the third-party platform redirects back
    provider_code: provider_code // The code parameter carried in the url parameters when the third-party platform redirects back to the page
});

Login via third-party platform token​

await auth.signInWithProvider({
    provider_token: provider_token
});