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

Step 1: Create a RAM user in the RAM console

Create a Resource Access Management (RAM) user and obtain the AccessKey pair of the RAM user. When you create the RAM user, set Access Mode to OpenAPI Access. The AccessKey pair is used as a long-term access credential for accessing and managing your application server.

1. Log on to the RAM console by using an Alibaba Cloud account or an account administrator.

2. In the left-side navigation pane, choose Identities > Users.

3. On the Users page, click Create User.

4. Configure the Logon Name and Display Name parameters.

5. In the Access Mode section, select OpenAPI Access. Then, click OK.

6. Click Copy in the Actions column and save the AccessKey pair of the RAM user.

Step 2: Grant the RAM user the permissions to call the AssumeRole operation in the RAM console

After the RAM user is created, grant the RAM user the permissions to call the AssumeRole operation of STS. This way, the RAM user can assume a RAM role to obtain STS tokens.

1. In the left-side navigation pane, choose Identities > Users.

2. On the Users page, find the RAM user and click Add Permissions in the Actions column.

3. In the Grant Permission panel, select the AliyunSTSAssumeRoleAccess system policy.

   Note

   To grant a RAM user the permissions to call the AssumeRole operation, you must attach the AliyunSTSAssumeRoleAccess system policy to the RAM user. This policy does not grant the permissions to obtain STS tokens or initiate Simple Log Service requests by using the STS tokens.

4. Click Grant permissions.

Step 3: Create a RAM role in the RAM console

Create a RAM role that the RAM user can assume to obtain STS tokens and obtain the Alibaba Cloud Resource Name (ARN) of the RAM role. For more information, see ARN.

1. In the left-side navigation pane, choose Identities > Roles.

2. On the Roles page, click Create Role. In the Select Role Type step of the Create Role wizard, set Select Trusted Entity to Alibaba Cloud Account and click Next.

3. In the Configure Role step of the Create Role wizard, enter a name in the RAM Role Name field and set Select Trusted Alibaba Cloud Account to Current Alibaba Cloud Account.

4. Click OK. After the RAM role is created, click Close.

5. On the Roles page, enter the role name in the search box to search for the RAM role. Example: sls-web-tracking.

6. On the details page of the RAM role, click Copy to save the ARN of the RAM role.

   

Step 4: Create a custom policy in the RAM console

Create a custom policy based on the principle of least privilege. The custom policy grants the RAM role the permissions to upload logs only to a specified Simple Log Service Logstore.

1. In the left-side navigation pane, choose Permissions > Policies.

2. On the Policies page, click Create Policy.

3. On the Create Policy page, click the JSON tab. Replace <Project name> and <Logstore name> in the following policy document with the names of the project and Logstore that are created in the "Preparations" section of this topic.

   Important

   The following policy document is provided only for reference. You must configure fine-grained RAM policies based on your business requirements to avoid granting excessive permissions to the RAM role. For more information about how to configure fine-grained RAM policies, see Examples of using custom policies to grant permissions to a RAM user.

   {
     "Version":"1",
     "Statement":[
       {
         "Effect":"Allow",
         "Action":[
           "log:PostLogStoreLogs"
         ],
         "Resource":[
           "acs:log:*:*:project/<Project name>/logstore/<Logstore name>"
         ]
       }
     ]
   }

4. After you configure the policy, click Next to edit policy information.

5. In the Basic information section, specify a policy name. Then, click OK.

Step 5: Attach the custom policy to the RAM role in the RAM console

Attach the custom policy to the RAM role. This way, the RAM user can assume the RAM role to perform the operations that are allowed by the policy.

1. In the left-side navigation pane, choose Identities > Roles.

2. On the Roles page, find the RAM role and click Grant Permission in the Actions column.

3. In the Policy section of the Grant Permission panel, select Custom Policy from the policy type drop-down list and select the custom policy.

4. Click Grant permissions.

Step 6: Obtain STS tokens from your application server

Access your mini program and integrate STS SDK into your application server to implement the /get_sts_token operation. For more information, see STS SDK overview. When you call the /get_sts_token operation by using the HTTP GET method, the system generates and returns an STS token.

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

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.

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://${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 Logstore that are created in the "Preparations" section of this topic.

   3. Replace <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.