文档

使用WebTracking JavaScript SDK的STS插件上传日志

更新时间:

使用WebTracking JavaScript SDK上传日志时,需要开启Logstore的WebTracking功能(Logstore匿名写入),可能会产生脏数据。阿里云STS(Security Token Service)是阿里云提供的一种临时访问权限管理服务,通过STS可以获取自定义时效和访问权限的临时身份凭证。使用WebTracking JavaScript SDK的STS插件进行日志上传,无需开启Logstore的WebTracking功能。

背景信息

image

如果不使用STS进行临时授权,则必须打开Logstore的WebTracking功能开关,WebTracking JavaScript SDK会将从浏览器采集到的日志直接上传到日志服务的Logstore中,可能产生脏数据。使用WebTracking JavaScript SDK的STS插件进行日志上传的流程如下:

  1. 浏览器向业务服务器请求临时身份凭证,即安全令牌(STS Token)。

  2. 业务服务器向STS服务请求安全令牌(STS Token)。

    1. 在服务器中配置RAM用户的访问密钥,而且已为RAM用户授予STS的管理权限AliyunSTSAssumeRoleAccess

    2. 服务器使用RAM用户的访问密钥调用STS的AssumeRole,获取RAM角色的临时安全令牌。您可以通过AssumeRole的Policy参数来根据用户或设备限制不同临时安全令牌的权限。

  3. STS服务向业务服务器返回安全令牌。

  4. 业务服务器向浏览器端返回安全令牌。

  5. 浏览器端使用获取的安全令牌扮演RAM角色,将从浏览器采集到的日志上传到Logstore中。

  6. 日志服务向浏览器返回上传日志成功后的响应。

前提条件

步骤一:安装和配置SDK

重要
  1. 已安装Node.js

  2. 在业务服务器中执行以下命令,安装依赖。

    npm install --save @aliyun-sls/web-track-browser
    npm install --save @aliyun-sls/web-sts-plugin
  3. 在您的程序中添加以下代码,配置SDK。

    import SlsTracker from '@aliyun-sls/web-track-browser'
    import createStsPlugin from '@aliyun-sls/web-sts-plugin'
    
    const opts = {
      host: '${host}', // 所在地域的服务入口。例如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', 'localhost:7000/test/sts', 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,
    }
    
    // 创建 Tracker
    const tracker = new SlsTracker(opts)
    // 创建 sts 插件
    const stsPlugin = createStsPlugin(stsOpt)
    // 使用 sts 插件
    tracker.useStsPlugin(stsPlugin)
    
    // 以单条日志上传为例
    tracker.send({
      eventType:'view_product',
      productName: 'Tablet',
      price: 500
    })
    

    webtracking参数名称

    是否必填

    说明

    host

    日志服务所在地域的Endpoint。此处以杭州为例,其它地域请根据实际情况填写。更多信息,请参见服务入口

    project

    Project名称。

    logstore

    Logstore名称。

    time

    发送日志的时间间隔,默认值为10秒。

    count

    发送日志的数量大小,默认值为10。

    topic

    日志主题。您可以自定义该字段,以便于识别。

    source

    日志来源。您可以自定义该字段,以便于识别。

    tags

    日志标签信息。您可以自定义该字段,便于识别。

    STS参数名称

    是否必填

    说明

    • accessKeyId

    • accessKeySecret

    • securityToken

    • 业务服务器使用RAM用户的访问密钥,调用AssumeRole接口的返回参数AccessKeySecretAccessKeyIdSecurityToken

    • AssumeRole接口的输入参数中,DurationSeconds决定Token的有效时间,Policy决定Token的权限范围。

    refreshSTSToken

    您的stsToken请求函数,用于定时获取sts令牌更新上述三个字段,可以是一个Promise/async函数。

    refreshSTSTokenInterval

    刷新令牌的间隔(毫秒),默认为 300000(5分钟)。

    stsTokenFreshTime

    最新的令牌获取时间,不用填写

步骤二:上传日志

上传单条日志时,每条日志单独作为一个对象Object。上传多条日志时,数据结构是包含多个对象Object的数组Array

  • 单条日志上传,类型为Object,示例:

    tracker.send({
      eventType:'view_product',
      productName: 'Tablet',
      price: 500
    })
  • 单条日志立即上传(time和count参数不生效),类型为Object,示例:

    tracker.sendImmediate({
      eventType:'view_product',
      productName: 'Tablet',
      price: 500
    })
  • 批量日志上传,类型为Array,示例:

    tracker.sendBatchLogs([
      {
        eventType: 'view_product',
        productName: 'Tablet',
        price: 500
      },
      {
        eventType: 'view_product',
        productName: 'Laptop',
        price: 1200
      }
    ])
  • 批量日志立即上传(time和count参数不生效),类型为Array,示例:

    tracker.sendBatchLogsImmediate([
      {
        eventType:'view_product',
        productName: 'Tablet',
        price: 500
      },
      {
        eventType:'view_product',
        productName: 'Laptop',
        price: 1200
      }
    ])

步骤三:查看上传结果

日志上传到Logstore后,必须创建索引才能进行查询分析。

快速查看

如果未创建索引,可以在Logstore的查询分析页面,单击消费预览快速查看日志。

image

查询分析日志

  1. 调用CreateIndex创建全文索引或字段索引,如果需要使用SELECT语句,必须创建字段索引。

  2. 调用GetLogsV2 - 查询Logstore中的日志数据,返回结果是日志数组Logs,每个元素就是一条日志。

相关文档

  • 本页导读 (1)