Simple Log Service:Build a service to collect logs from mini programs to Simple Log Service

The following figure shows how Enterprise A plans to build a direct data transfer service to collect mini program logs to Simple Log Service.

The following procedure describes how to build a mini program by using the Flask framework on your ECS instance and obtain STS tokens from the application server:

1. Connect to the ECS instance. Install Python 3 on the ECS instance.

2. Configure the ALIBABA_CLOUD_ACCESS_KEY_ID and ALIBABA_CLOUD_ACCESS_KEY_SECRET environment variables for the RAM user. For more information, see Configure environment variables in Linux, macOS, and Windows.

3. Create a project directory and switch to the project directory.

   mkdir my_web_sample
   cd my_web_sample

4. Install dependencies.

   pip3 install Flask
   pip3 install attr
   pip3 install yarl
   pip3 install async_timeout
   pip3 install idna_ssl
   pip3 install attrs
   pip3 install aiosignal
   pip3 install charset_normalizer
   pip3 install alibabacloud_tea_openapi
   pip3 install alibabacloud_sts20150401
   pip3 install alibabacloud_credentials

5. Write backend code.

   1. Create a file named main.py.

   2. Add the following Python code to the file.

      Important

      Replace <YOUR_ROLE_ARN> with the Alibaba Cloud Resource Name (ARN) of the sls-web-tracking role that is created in Step 3.

      Replace <YOUR_ROLE_SESSION_NAME> with the custom name of the session. Example: role_session_test.

      import json
      from flask import Flask, render_template
      from alibabacloud_tea_openapi.models import Config
      from alibabacloud_sts20150401.client import Client as Sts20150401Client
      from alibabacloud_sts20150401 import models as sts_20150401_models
      from alibabacloud_credentials.client import Client as CredentialClient
      
      app = Flask(__name__)
      
      # Replace <YOUR_ROLE_ARN> with the ARN of the RAM role. 
      role_arn_for_oss_upload = '<YOUR_ROLE_ARN>'
      # Specify the region of STS. Example: cn-shanghai. 
      region_id = 'cn-shanghai'
      
      @app.route('/get_sts_token', methods=['GET'])
      def get_sts_token():
          # If you do not specify parameters when you initialize CredentialClient, the default credential chain is used. 
          # If you run the file on your computer, you can specify the AccessKey pair by configuring the ALIBABA_CLOUD_ACCESS_KEY_ID and ALIBABA_CLOUD_ACCESS_KEY_SECRET environment variables.
          # If you run the file on ECS, Elastic Container Instance (ECI), or Container Service for Kubernetes (ACK), you can specify the role of the bound instance by configuring the ALIBABA_CLOUD_ECS_METADATA environment variable. The SDK automatically obtains STS tokens. 
          config = Config(region_id=region_id, credential=CredentialClient())
          sts_client = Sts20150401Client(config=config)
          assume_role_request = sts_20150401_models.AssumeRoleRequest(
              role_arn=role_arn_for_oss_upload,
              # Replace <YOUR_ROLE_SESSION_NAME> with the custom name of the session. 
              role_session_name='<YOUR_ROLE_SESSION_NAME>'
          )
          response = sts_client.assume_role(assume_role_request)
          token = json.dumps(response.body.credentials.to_map())
          return token
      
      
      app.run(host="0.0.0.0", port=80)

6. Run the main.py file.

   python3 main.py

7. Visit http://<The public IP address of the ECS instance>/get_sts_token in your browser.

   The following figure shows a success response.

   

Step 7: Use an STS token in your mini program to upload logs to a specified Simple Log Service logstore

After you implement the /get_sts_token operation on your application server, integrate the @aliyun-sls/web-track-mini instrumentation SDK and the @aliyun-sls/web-sts-plugin STS plug-in of Simple Log Service into the app.js file of the mini program. This helps monitor user behavior in real time and upload related logs.

When you create a tracker, the tracker automatically calls the /get_sts_token operation to obtain an STS token. This way, the user behavior data generated during mini program interactions can be securely transferred to Simple Log Service. The user behavior data includes the data of logons, product browsing, and order submission.

1. Download a developer tool of mini programs. For more information, see Developer tools of mini programs.

2. Create and use the Todo App mini program. For more information, see Todo App.

3. Install npm.

   yum install npm

4. Install project dependencies.

   npm install --save @aliyun-sls/web-track-mini
   npm install --save @aliyun-sls/web-sts-plugin

5. Modify the sample code of the Todo App mini program to upload user logs to the specified logstore by using the web tracking feature. The following table describes the files that you need to modify.

   File	Code modification description
   app.js	Call the initSlsTracker method in the onLaunch method. This way, when you start the mini program, the SlsTracker object is initialized. Configure parameters such as project and logstore in the initSlsTracker method. For more information about the parameters, see Web tracking parameters. Configure the stsOpt parameter and the refreshSTSToken function to dynamically obtain and update STS tokens. For more information about STS token-related parameters, see STS parameters.
   mini.project.json	The @aliyun-sls/web-sts-plugin STS plug-in supports ECMAScript 6 (ES6). When you modify the mini.project.json file, set compileOptions.transpile to true. This way, the developer tool of the mini program translates ES6 code to ECMAScript 5 (ES5) code to ensure compatibility.
   todo.xml	<view class="todo-footer"> <add-button text="Add Todo" onClickMe="handleAddTodo"></add-button> </view> Define a button named Add Todo at the bottom of the user interface. You can use add-button to define the button. onClickMe="handleAddTodo" specifies that the system calls the handleAddTodo method defined in the todo.js file when you click the button.
   todo.js	Use the handleAddTodo() function to handle events. When you add a to-do item on the user interface, this function is triggered. The function performs the following operations: Call the this.addTodo() method to add a to-do item. Call the this.onAddTodoButtonClick() method to send a log message indicating that a user clicks the Add Todo button. Use the addTodo() function to call the my.navigateTo function of the mini program. This way, you are navigated from the current page to the required page in the /pages/add-todo/add-todo directory of the mini program. Use the onAddTodoButtonClick() method to call the send method of the SlsTracker object to send a log. The log content is eventType: 'addtodo_click'. The SlsTracker object is defined in the app.js file.
   add-todo.js	Use the add method to perform the following operations: Create an object named newTodo. The newTodo object specifies a to-do item, which contains the following attributes: text: the content of the to-do item. You can obtain the content by calling the this.data.inputValue method. This call indicates that the content may come from user input. completed: specifies whether the to-do item is completed. Initial value: false. This value specifies that the to-do item is not completed. Call the send method of the SlsTracker object defined in the app.js file to send a log. The following code shows the content of the log: eventType: 'add_todo' todoText: newTodo.text
   add-button.js	Define custom buttons. The onClickMe method first checks whether this.props.onClickMe is a function. If this.props.onClickMe is a function, the method calls the function.

6. Configure parameters in the app.js file.

   // app.js
   import SlsTracker from '@aliyun-sls/web-track-mini';
   import createStsPlugin from '@aliyun-sls/web-sts-plugin';
   
   App({
     todos: [
       { text: 'Learning Javascript', completed: true },
       { text: 'Learning ES2016', completed: true },
       { text: 'Learning the Alipay mini program', completed: false },
     ],
     userInfo: null,
     tracker: null,
   
     onLaunch: function() {
       // When you start the mini program, initialize the SlsTracker object.
       this.initSlsTracker();
     },
   
     initSlsTracker: function() {
       const opts = {
         host: 'cn-shanghai.log.aliyuncs.com', // Replace the value with your endpoint.
         project: '${project}', // Replace the value with your project name.
         logstore: '${Logstore}', // Replace the value with your logstore name.
         time: 10,
         count: 10,
         topic: 'topic',
         source: 'source',
         tags: {
           tags: 'tags',
         },
       };
   
       const stsOpt = {
         accessKeyId: '',
         accessKeySecret: '',
         securityToken: '',
         refreshSTSToken: () => new Promise((resolve, reject) => {
           my.request({
             url: 'http://${The public IP address of the ECS instance}}/get_sts_token', // Replace the value with the actual address of your application server that generates the STS token.
             method: 'GET',
             success: (res) => {
               if (res.statusCode === 200) {
                 let credential;
   
                 // Check whether the data type of the returned data is string. If the data type is not string, the data may be an object.
                 if (typeof res.data === "string") {
                   // Parse the returned data into a JSON object.
                   credential = JSON.parse(res.data);
                 } else {
                   // Use the object.
                   credential = res.data;
                 }
                 stsOpt.accessKeyId = credential.AccessKeyId;
                 stsOpt.accessKeySecret = credential.AccessKeySecret;
                 stsOpt.securityToken = credential.SecurityToken;
                 resolve(credential);
               } else {
                 reject(new Error('Failed to refresh STS token with status code: ' + res.statusCode));
               }
             },
             fail: (err) => {
               reject(new Error('Failed to refresh STS token', err));
             },
           });
         }),
       };
   
       const tracker = new SlsTracker(opts);
       const stsPlugin = createStsPlugin(stsOpt);
       tracker.useStsPlugin(stsPlugin);
   
       // When you start the mini program, a log is uploaded to Simple Log Service. 
       // tracker.send({
       //   eventType:'view_product',
       //   productName: 'Tablet',
       //   price: 500  
       // });
   
   
       this.tracker = tracker;
     },
   
     
   });
   

   1. For more information about the opts and stsOpt parameters, see Use the STS plug-in of web tracking SDK for JavaScript to upload logs.

   2. Replace ${project} and ${logstore} with the names of the project and the logstore that are created in the "Preparations" section of this topic.

   3. Replace <The public IP address of the ECS instance> with the public IP address of the ECS instance that is created in the "Preparations" section of this topic. For more information about how to view the public IP address of an ECS instance, see View IP addresses.

7. Run the client-side code of the mini program. Click the icon in the upper-right corner of the developer tool page. On the preview page of the mini program, click the Add Todo button on the Todo App page. When you click the Add Todo button or enter a to-do item after you click the Add Todo button, the mini program directly uploads a log to the Simple Log Service logstore. This precludes the need for data transfer or data collection to your application server.

Resource cleaning

In this example, an Elastic Compute Service (ECS) instance, a Simple Log Service project, a logstore, a Resource Access Management (RAM) user, and a RAM role are created. After you verify the solution, you can perform the following operations to release the resources to avoid unnecessary fees or security risks.

• Release the ECS instance. For more information, see Release an instance.

• Delete the logstore and then delete the project. For more information, see Manage a logstore and Manage a project.

• Delete the RAM user and the RAM role. For more information, see Delete a RAM user and Delete a RAM role.