采集-搭建小程序端日志直传服务

步骤一：在访问控制创建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. 单击确认新增授权。

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

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

步骤七：在小程序使用临时身份凭证上传日志到SLS

在业务服务器配置了获取STS临时身份凭证的接口后，在小程序的app.js文件中集成SLS的埋点SDK（@aliyun-sls/web-track-mini）和STS插件（@aliyun-sls/web-sts-plugin），实现实时监控用户行为并上传相关日志。

当创建埋点跟踪器（tracker）实例时，它将自动请求之前部署的/get_sts_token接口，以便获取必要的临时STS凭证。这种机制保证了用户在小程序交互过程中，如登录、浏览商品或提交订单等活动的数据会被安全地传输至SLS。

1. 下载小程序开发者工具。

2. 创建和体验Todo App 小程序。

3. 安装npm。

4. 安装项目依赖。

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

5. 修改Todo示例代码，将用户数据通过Webtracking上传到Logstore。修改后的示例代码sls-mini-tracking-sts.zip，修改的文件如下。

   文件	修改代码的说明
   app.js	在onLaunch方法中调用了initSlsTracker 方法，当小程序启动时会初始化SlsTracker。 在initSlsTracker 方法中定义日志服务的Project、Logstore等参数，参数说明参见webtracking参数名称。 stsOpt配置和refreshSTSToken函数用于动态获取和更新阿里云的安全令牌服务（Security Token Service，简称 STS）的临时访问凭证。STS相关参数说明参见STS参数名称。
   mini.project.json	STS插件（@aliyun-sls/web-sts-plugin）包含ES6特性，在mini.project.json文件中设置编译选项 compileOptions.transpile为true，让小程序的开发工具将 ES6 代码转换为ES5代码，确保兼容性。
   todo.xml	<view class="todo-footer"> <add-button text="Add Todo" onClickMe="handleAddTodo"></add-button> </view> 定义了用户界面底部的一个按钮，界面词为Add Todo，add-button是自定义按钮。onClickMe="handleAddTodo"代表按钮被单击时调用todo.js中的方法handleAddTodo。
   todo.js	handleAddTodo()是事件处理函数。当用户在页面上添加新的待办事项时，这个函数被触发。它依次执行两个操作： 调用this.addTodo()方法添加一个新的待办事项。 调用this.onAddTodoButtonClick()发送关于用户点击添加按钮的日志消息。 addTodo()调用小程序的 my.navigateTo 函数，实现从当前页面跳转到应用内 /pages/add-todo/add-todo 路径对应的页面。 onAddTodoButtonClick()调用app.js中定义的SlsTracker的send方法发送一条日志事件，这条日志的内容为 eventType: 'addtodo_click'。
   add-todo.js	在add方法中 创建一个新对象newTodo，代表一个待办事项，newTodo包括两个属性： text：待办事项的内容，这里从this.data.inputValue获取，意味着它可能是来自用户输入。 completed：表示这个待办事项是否已完成，初始化为false，意味着新建的待办事项默认状态是未完成。 调用app.js中定义的SlsTracker的send方法发送一条日志事件，这条日志的内容为 eventType: 'add_todo' todoText: newTodo.text
   add-button.js	自定义按钮组件。onClickMe方法首先检查this.props.onClickMe是否为一个函数类型。只有当确定this.props.onClickMe是函数时，才执行调用。

6. 配置小程序app.js文件的参数。

   // 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 支付宝小程序', completed: false },
     ],
     userInfo: null,
     tracker: null,
   
     onLaunch: function() {
       // 在应用启动时进行初始化
       this.initSlsTracker();
     },
   
     initSlsTracker: function() {
       const opts = {
         host: 'cn-shanghai.log.aliyuncs.com', // 替换为你的服务入口
         project: '${project}', // 替换为你的 Project 名称
         logstore: '${Logstore}', // 替换为你的 Logstore 名称
         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://${ECS实例的公网IP}}/get_sts_token', // 替换为后端 STS Token 提供服务的真实地址
             method: 'GET',
             success: (res) => {
               if (res.statusCode === 200) {
                 let credential;
   
                 // 检查返回的数据类型确保是字符串，若不是字符串则可能已是对象
                 if (typeof res.data === "string") {
                   //解析为JSON对象
                   credential = JSON.parse(res.data);
                 } else {
                   // 直接使用对象
                   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);
   
       // 以单条日志上传为例，只要启动小程序，就会发送一条日志。
       // tracker.send({
       //   eventType:'view_product',
       //   productName: 'Tablet',
       //   price: 500  
       // });
   
   
       this.tracker = tracker;
     },
   
     
   });
   

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

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

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

7. 运行客户端示例代码。在开发者工具，单击页面右上角的编译。在右侧小程序预览页面，单击小程序的Todo页面的Add Todo按钮或输入Todo项时，小程序会直接向日志服务的Logstore上传日志，无需经过服务器。