Getting Started with Web

Preparing a Development Environment

1. The AppGallery Connect SDK for JavaScript supports the following browsers.
   Expand

   Service	Google Chrome	Edge	Firefox	HUAWEI Browser	Safari	UC Browser	QQ Browser	Internet Explorer 11
   Auth Service Remote Configuration

   NOTICE

   The AppGallery Connect SDK for JavaScript is built based on the latest web standard. If you need to support the browser and JavaScript environment of earlier versions, you are advised to use Babel for compatibility. Babel introduces Polyfill based on browser support requirements. Polyfill converts ECMAScript 6 standard code into JavaScript code that is backward compatible so that the code can run properly in the browser or JavaScript environment of an earlier version. For details about how to use Babel, please refer to User Guide.

2. Google Chrome is recommended for accessing AppGallery Connect. If you are using Mozilla Firefox on Windows 10, requests may be blocked by the browser and download button clicks may have no responses.

   You can perform the following operations to solve this issue:

   1. Enter about:config in the address box of the Firefox browser.
   2. Search for security.csp.enable and change its value to false.
3. Register as a Huawei developer and complete identity verification on HUAWEI Developers.

Creating Your Project and App

1. A project is a container of your apps in AppGallery Connect. You can add different platform versions of an app to the same project. If you do not have any projects yet, create one to get started.
2. If you have not added any apps to your project, add one first. For details, please refer to Creating a Web App.

Setting a Data Processing Location

Some services in AppGallery Connect involve app data processing. Before using these services, you need to set a data processing location.

Integrating AppGallery Connect SDKs

To use any of the following AppGallery Connect services, integrate their AppGallery Connect SDKs to your development environment in advance:

• Auth Service
• Remote Configuration

Obtaining App Configurations

AppGallery Connect provides app configurations for you to add to your project. This will greatly simplify your app configuration.

1. Sign in to AppGallery Connect and click Development and services.
2. Click your project card and select your app from the app drop-down list on the top. The Project settings page is displayed.

   

3. Configure website restrictions.

   If you want to allow users to access enabled APIs only from the specified websites or IP addresses, click next to Access restrictions and enter the specified domain names.

   

   NOTE

   • The domain name must start with http:// or https://.
   • You can add up to five addresses and separate them with a comma (,).
4. Obtain configurations for your app.
   • If you do not enable Do not include key, the configuration file will contain the key information, which may pose security risks. You are advised to store the key information on your own server and keep it secure.
   • If you enable Do not include key, the configuration file will not contain the key information. In this case, you need to call an API of the AppGallery Connect SDK to manually pass the key information to AppGallery Connect. For details, please refer to Through Parameters in the Configuration File. If you have higher security requirements, you can use the key information to obtain a token and then use the token to pass the key information to AppGallery Connect. For details, please refer to Through the Token.

   

Integrating the AppGallery Connect SDK for JavaScript

1. If you do not have the package.json file, run the following command in the root directory of your JavaScript project to create it:

   npm init

   Enter the project configurations as required.

2. Run the specific command in the following table to integrate the AppGallery Connect SDK for JavaScript into your project, and add the dependency to the package.json file:
   Expand

   Service	Configuration
   Auth Service	npm install --save @hw-agconnect/auth@1.5.1
   Remote Configuration	npm install --save @hw-agconnect/remoteconfig@1.5.1

3. Import the AppGallery Connect component to your project.
   Expand

   Service	Configuration
   Auth Service	import agconnect from "@hw-agconnect/api"; import "@hw-agconnect/auth"; import "@hw-agconnect/instance";
   Remote Configuration	import agconnect from "@hw-agconnect/api"; import "@hw-agconnect/remoteconfig"; import "@hw-agconnect/instance";

4. Call the AppGallery Connect initialization method during app initialization. For details about app configurations, please refer to Obtaining App Configurations.

   var agConnectConfig =  {
       // App configurations.
   };
   // Initialize AppGallery Connect.
   agconnect.instance().configInstance(agConnectConfig);
   

Setting the Server-Side Data Storage Location and the Data Encryption/Decryption Mode

You can implement the encryption and decryption methods for data on the AppGallery Connect SDK side. When the encryption object is passed using the API, the SDK encrypts the data to be stored using the encryption method based on the encryption object and then stores the data.

If you want to encrypt data to be stored on the server, set the object for encryption as follows. The object must contain the decrypt and encrypt methods. You can set separate encryption objects for the Auth Service and Remote Configuration services. If you have set an encryption object using the following method, and also have set a separate encryption object for Auth Service or Remote Configuration, the separately set decryption object will be used for Auth Service or Remote Configuration.

function Crypt(){};
Crypt.prototype.encrypt = function(value){
// Encryption logic.
return encryptedValue;
};
Crypt.prototype.decrypt = function(value){
// Decryption logic.
return decryptedValue;
};
agconnect.instance().setCryptImp(new Crypt());

Currently, you can set a server-side data storage location for the following services: Auth Service and Remote Configuration.

Huawei strictly conforms to the General Data Protection Regulation (GDPR) in providing services and is dedicated to helping developers achieve business success under the principles of the GDPR. The GDPR stipulates the obligations of the data controller and data processor. When using our service, you act as the data controller, and Huawei is the data processor. Huawei solely processes data within the scope of the data processor's obligations and rights, and you must assume all obligations of the data controller as specified by the GDPR.

(Optional) Passing the Key Information to AppGallery Connect

Through Parameters in the Configuration File

The AppGallery Connect SDK provides APIs for setting parameters. If you enable Do not include key before downloading the configuration file, the file will not contain the client_id, client_secret, and api_key parameters. Use the following code to set the parameters and pass them to the AppGallery Connect SDK after the initialization method of AppGallery Connect is called during app launch:

agconnect.instance().setApiKey("xxx")
agconnect.instance().setClientSecret("xxx")
agconnect.instance().setClientId("xxx")

Through the Token

If you think it is insecure to store client_id and client_secret in the JSON file, you are advised to store them on your own server. You can call the API https://connect-drcn.dbankcloud.cn/agc/apigw/oauth2/v1/token to obtain a token, after which you can call setCustomCredentialsProvider to pass the token to AppGallery Connect during the AppGallery Connect SDK initialization.

Sample code for calling the API to obtain a token:

POST /agc/apigw/oauth2/v1/token
Host: connect-drcn.dbankcloud.cn
Content-Type: application/json
{
   "grant_type":"client_credentials",
   "client_id":client ID displayed in the App information area on the Project settings page of AppGallery Connect,
   "client_secret":client secret displayed in the App information area on the Project settings page of AppGallery Connect,
   "useJwt":1
}

Response example of the API for obtaining a token:

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
{
    "access_token": "eyJhbGciOiJIUzU****************",
    "expires_in": 0
}

Sample code for calling setCustomCredentialsProvider:

// Initialize the AppGallery Connect SDK.
agconnect.instance().configInstance(agConnectConfig);

// Define a class to provide token information for AppGallery Connect.
class ClientTokenProvider {
  // Define the getToken method. The input parameter forceRefresh of the bool type is supported, which is used for refreshing the token when it expires.
  getToken(forceRefresh) {
    if (forceRefresh) {
      // Call the /agc/apigw/oauth2/v1/token API again.
      return {
        expiration: new_expires_in, // Validity period of the token.
        tokenString: new_access_token // New access token.
      }
    }
    return {
      expiration: expires_in,
      tokenString: access_token
    }
  }

  agconnect.instance().setCustomCredentialsProvider(new ClientTokenProvider()); // Pass a Provider object.
}

Developing the App

This section does not describe app function development in detail. You need to complete the development by yourself.

Integrating Required AppGallery Connect Services

To integrate AppGallery Connect services during app development, please refer to their development guides.