Simple Log Service:Build a service to collect logs from browsers to Simple Log Service

Step 1: Create a RAM user in the RAM console

Create a 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

Open your web application 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 browser 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-browser frontend instrumentation SDK and the @aliyun-sls/web-sts-plugin STS plug-in of Simple Log Service into the frontend code of the web application. 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 website interactions can be securely transferred to Simple Log Service. The user behavior data includes the data of logons, product browsing, and order submission.

The following procedure describes how to compile and pack the frontend instrumentation SDK and the STS plug-in of Simple Log Service by using the Parcel packaging tool and integrate the SDK and plug-in into the frontend code of the web application:

1. Press Ctrl+C to stop the web application.

2. Install npm.

   yum install npm

3. Install Parcel.

   npm install -g parcel-bundler

4. Create frontend project directories.

   mkdir templates static src

5. Install project dependencies.

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

6. Write frontend code.

   1. Create a file named src/index.js in the src directory.

      vim src/index.js

   2. Add the following JavaScript code to the file:

      import SlsTracker from "@aliyun-sls/web-track-browser";
      import createStsPlugin from "@aliyun-sls/web-sts-plugin";
      
      const opts = {
        host: "cn-hangzhou.log.aliyuncs.com", // The Simple Log Service endpoint for the region where your Simple Log Service project resides. Example: cn-hangzhou.log.aliyuncs.com.
        project: "${project}", // The project name.
        logstore: "${logstore}", // The Logstore name.
        time: 10, // The interval at which logs are uploaded to Simple Log Service. Default value: 10. Unit: seconds.
        count: 10, // The number of logs that are uploaded to Simple Log Service. Default value: 10.
        topic: "topic", // The topic of the logs. You can specify a custom value.
        source: "source",
        tags: {
          tags: "tags",
        },
      };
      
      const stsOpt = {
        accessKeyId: "",
        accessKeySecret: "",
        securityToken: "",
        // The following code provides an example on how to use the refreshSTSToken function:
        refreshSTSToken: () =>
          new Promise((resolve, reject) => {
            const xhr = new window.XMLHttpRequest();
            xhr.open("GET", "http://<The public IP address of the ECS instance>/get_sts_token", true);
            xhr.send();
            xhr.onreadystatechange = () => {
              if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                  let credential = JSON.parse(xhr.response);
                  // The function is used to configure a temporary AccessKey pair and an STS token.
                  stsOpt.accessKeyId = credential.AccessKeyId;
                  stsOpt.accessKeySecret = credential.AccessKeySecret;
                  stsOpt.securityToken = credential.SecurityToken;
                  resolve();
                } else {
                  reject("Wrong status code.");
                }
              }
            };
          }),
        // refreshSTSTokenInterval: 300000,
        // stsTokenFreshTime: undefined,
      };
      
      const tracker = new SlsTracker(opts);
      // Create an STS plug-in.
      const stsPlugin = createStsPlugin(stsOpt);
      // Use the STS plug-in.
      tracker.useStsPlugin(stsPlugin);
      
      // Track user logons.
      document.getElementById("loginButton").addEventListener("click", () => {
        const username = document.getElementById("username").value;
        tracker.send({
          eventType: "login",
          username: username,
        });
        console.log("Login event tracked for:", username);
      });
      
      // Track product browsing.
      document.querySelectorAll(".product").forEach((productButton) => {
        productButton.addEventListener("click", (event) => {
          const productName = event.target.getAttribute("data-product-name");
          const productPrice = event.target.getAttribute("data-price");
          tracker.send({
            eventType: "view_product",
            productName: productName,
            price: productPrice,
          });
          console.log("Product view tracked for:", productName);
        });
      });
      
      // Track order submission.
      document.getElementById("orderButton").addEventListener("click", () => {
        tracker.send({
          eventType: "place_order",
          orderDetails: "Order placed for example items",
        });
        console.log("Order placed event tracked");
      });
      

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

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

   4. 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 public IP addresses, see View IP addresses.

7. Create an HTML file.

   1. Create a file named index.html in the templates directory.

      vim templates/index.html

   2. Add the following HTML code to the HTML file:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Web Tracking Static Example</title>
      </head>
      <body>
          <h1>Welcome to Simple Web Store</h1>
          
          <!-- User logons -->
          <div>
              <label for="username">Username:</label>
              <input type="text" id="username" name="username">
              <button id="loginButton">Login</button>
          </div>
          
          <!-- List of products -->
          <div>
              <h2>Products</h2>
              <button class="product" data-product-name="Laptop" data-price="1200">Laptop - $1200</button>
              <button class="product" data-product-name="Smartphone" data-price="800">Smartphone - $800</button>
              <button class="product" data-product-name="Tablet" data-price="500">Tablet - $500</button>
          </div>
          
          <!-- Order submission -->
          <div>
              <h2>Your Order</h2>
              <button id="orderButton">Place Order</button>
          </div>
          
          <script type="module" src="{{ url_for('static', filename='js/index.js') }}"></script>
      </body>
      </html>

8. Pack static resources in the my_web_sample root directory.

parcel build src/index.js --out-dir static/js --public-url ./js

9. Start the web application by using the AccessKey pair that is obtained in Step 1.

ALIBABA_CLOUD_ACCESS_KEY_ID=<YOUR_AK_ID> ALIBABA_CLOUD_ACCESS_KEY_SECRET=<YOUR_AK_SECRET> python3 main.py

10. Visit http://<The public IP address of the ECS instance> in your browser. On the page that appears, enter a username, select a product, and then click Place Order to simulate user behavior on a browser.