采集-搭建浏览器端日志直传服务

步骤一：在访问控制创建RAM用户

首先，创建一个调用方式为OpenAPI调用的RAM用户，并获取对应的访问密钥，作为业务服务器的应用程序的长期身份凭证。

1. 使用云账号或账号管理员登录RAM控制台。

2. 在左侧导航栏，选择身份管理 > 用户。

3. 单击创建用户。

4. 输入登录名称和显示名称。

5. 在调用方式区域下，选择OpenAPI调用，然后单击确定。

6. 单击操作下的复制，保存访问密钥（AccessKey ID和AccessKey Secret）。

步骤二：在访问控制为RAM用户授予调用AssumeRole接口的权限

创建RAM用户后，需要授予RAM用户调用STS服务的AssumeRole接口的权限，使其可以通过扮演RAM角色来获取临时身份凭证。

1. 在左侧导航栏，选择身份管理 > 用户。

2. 在用户页面，找到目标RAM用户，然后单击RAM用户右侧的添加权限。

3. 在新增授权页面，选择AliyunSTSAssumeRoleAccess系统策略。

   说明

   授予RAM用户调用STS服务AssumeRole接口的固定权限是AliyunSTSAssumeRoleAccess，与后续获取临时身份凭证以及通过临时身份凭证发起SLS请求所需权限无关。

4. 单击确认新增授权。

步骤三：在访问控制创建RAM角色

创建RAM用户要扮演的RAM角色，并获取对应的角色的ARN（Aliyun Resource Name，阿里云资源名称），用于之后的角色扮演。

1. 在左侧导航栏，选择身份管理 > 角色。

2. 单击创建角色，可信实体类型选择阿里云账号，单击下一步。

3. 填写角色名称，选择当前云账号。

4. 单击完成。完成角色创建后，单击关闭。

5. 在RAM角色管理页面，搜索框输入角色名称，例如sls-web-tracking。

6. 单击复制，保存角色的ARN。

   

步骤四：在访问控制创建自定义权限策略

按照最小授权原则，为RAM角色创建一个自定义权限策略，限制只能向指定的SLS Logstore上传日志。

1. 在左侧导航栏，选择权限管理 > 权限策略。

2. 单击创建权限策略。

3. 在创建权限策略页面，单击脚本编辑，将以下脚本中的<Project名称>和<Logstore名称>替换为准备工作中创建的Project名称和Logstore名称。

   重要

   以下示例仅供参考。您需要根据实际需求配置更细粒度的授权策略，防止出现权限过大的风险。关于更细粒度的授权策略配置详情，请参见RAM自定义授权示例。

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

4. 策略配置完成后，单击继续编辑基本信息。

5. 在基本信息区域，填写策略名称，然后单击确定。

步骤五：在访问控制为RAM角色授予权限

为RAM角色授予权限，以便该RAM角色被RAM用户扮演时能获取所需的权限。

1. 在左侧导航栏，选择身份管理 > 角色。

2. 在角色页面，找到目标RAM角色，然后单击RAM角色右侧的新增授权。

3. 在新增授权页面下的自定义策略页签，选择已创建的自定义权限策略。

4. 单击确认新增授权。

步骤六：在业务服务器获取临时身份凭证

在Web应用中，通过在业务服务器集成STS SDK，实现一个获取临时STS身份凭证的接口。当这个接口（/get_sts_token）通过HTTP GET方法被访问时，它会生成一个临时身份凭证，并将其返回给请求者。

步骤七：在浏览器使用临时身份凭证上传日志到SLS

在业务服务器配置了获取STS临时身份凭证的接口后，在Web应用的前端集成SLS的前端埋点SDK（@aliyun-sls/web-track-browser）和STS插件（@aliyun-sls/web-sts-plugin），实现实时监控用户行为并上传相关日志。当创建埋点跟踪器（tracker）实例时，它将自动请求之前部署的/get_sts_token接口，以便获取必要的临时STS凭证。这种机制保证了用户在网站交互过程中，如登录、浏览商品或提交订单等活动的数据会被安全地传输至SLS。

在ECS上，使用Parcel打包工具来编译并打包SLS的前端埋点SDK和STS插件，然后将这些资源集成到Web应用的前端代码的操作示例如下：

1. 按Ctrl + C停止应用程序。

2. 安装npm。

   yum install npm

3. 安装Parcel。

   npm install -g parcel-bundler

4. 创建前端项目文件。

   mkdir templates static src

5. 安装项目依赖。

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

6. 编写前端代码。

   1. 在src目录中创建一个src/index.js文件。

      vim src/index.js

   2. 在这个文件中，添加以下JavaScript代码。

      import SlsTracker from "@aliyun-sls/web-track-browser";
      import createStsPlugin from "@aliyun-sls/web-sts-plugin";
      
      const opts = {
        host: "cn-hangzhou.log.aliyuncs.com", // 所在地域的服务入口。例如cn-hangzhou.log.aliyuncs.com
        project: "${project}", // Project 名称
        logstore: "${logstore}", // Logstore 名称
        time: 10, // 发送日志的时间间隔，默认是10秒
        count: 10, // 发送日志的数量大小，默认是10条
        topic: "topic", // 自定义日志主题
        source: "source",
        tags: {
          tags: "tags",
        },
      };
      
      const stsOpt = {
        accessKeyId: "",
        accessKeySecret: "",
        securityToken: "",
        // 以下是一个 stsToken 刷新函数的简单示例
        refreshSTSToken: () =>
          new Promise((resolve, reject) => {
            const xhr = new window.XMLHttpRequest();
            xhr.open("GET", "http://<ECS实例公网IP地址>/get_sts_token", true);
            xhr.send();
            xhr.onreadystatechange = () => {
              if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                  let credential = JSON.parse(xhr.response);
                  // 函数的本质目的：设置 stsOpt 的临时密钥和令牌
                  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);
      // 创建 sts 插件
      const stsPlugin = createStsPlugin(stsOpt);
      // 使用 sts 插件
      tracker.useStsPlugin(stsPlugin);
      
      // 用户登录跟踪
      document.getElementById("loginButton").addEventListener("click", () => {
        const username = document.getElementById("username").value;
        tracker.send({
          eventType: "login",
          username: username,
        });
        console.log("Login event tracked for:", username);
      });
      
      // 商品浏览跟踪
      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);
        });
      });
      
      // 订单提交跟踪
      document.getElementById("orderButton").addEventListener("click", () => {
        tracker.send({
          eventType: "place_order",
          orderDetails: "Order placed for example items",
        });
        console.log("Order placed event tracked");
      });
      

      关于opts和stsOpt的参数说明，请参见使用WebTracking JavaScript SDK的STS插件上传日志。

   3. 将代码中的${project}和${logstore}替换为准备工作中创建的Project名称和Logstore名称。

   4. 将代码中的<ECS实例公网IP地址>替换为准备工作中创建的ECS实例的公网IP地址。如何查看公网IP地址，请参见查看IP地址。

7. 创建HTML模板文件。

   1. 在templates目录中创建一个index.html文件。

      vim templates/index.html

   2. 在这个文件中，添加以下HTML代码。

      <!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>
          
          <!-- 用户登录 -->
          <div>
              <label for="username">Username:</label>
              <input type="text" id="username" name="username">
              <button id="loginButton">Login</button>
          </div>
          
          <!-- 商品列表 -->
          <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>
          
          <!-- 提交订单 -->
          <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. 在项目根目录my_web_sample下，打包静态资源。

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

9. 使用步骤一获取的访问密钥启动应用程序。

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

10. 在浏览器中访问http://<ECS实例公网IP地址>，然后在页面中输入用户名、选择商品、并点击下单，模拟真实用户在浏览器的行为。