背景信息

如果不使用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. 日志服務向瀏覽器返回上傳日志成功后的響應。

前提條件

• 已創建RAM用戶并授予STS的管理權限AliyunSTSAssumeRoleAccess。

• 在業務服務器的環境變量中配置RAM用戶的訪問密鑰，請參見在Linux、macOS和Windows系統配置環境變量。

• 已創建可信實體為阿里云賬號的RAM角色，并授予RAM角色向指定Project寫入數據的權限，更多權限策略內容請參見RAM自定義授權示例。

  {
    "Version": "1",
    "Statement": [
      {
        "Action": [
          "log:Post*"
        ],
        "Resource": "acs:log:*:*:project/<指定的project名稱>/*",
        "Effect": "Allow"
      }
    ]
  }

步驟一：安裝和配置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接口的返回參數AccessKeySecret、AccessKeyId和SecurityToken。 AssumeRole接口的輸入參數中，DurationSeconds決定Token的有效時間，Policy決定Token的權限范圍。
   refreshSTSToken	是	您的stsToken請求函數，用于定時獲取sts令牌更新上述三個字段，可以是一個Promise/async函數。
   refreshSTSTokenInterval	否	刷新令牌的間隔（毫秒），默認為 300000（5分鐘）。
   stsTokenFreshTime	否	最新的令牌獲取時間，不用填寫

相關文檔

• 使用WebTracking JavaScript SDK的STS插件進行日志上傳的最佳實踐，請參見采集-搭建瀏覽器端日志直傳服務和采集-搭建小程序端日志直傳服務。

• 本文以網頁端SDK為例介紹STS插件的操作步驟，小程序端SDK的配置步驟請參見WebTracking 小程序端 JavaScript SDK。

常見問題

• SDK啟動不報錯，但在發送日志時報錯TypeError: Cannot read properties of undefined (reading 'sigBytes')，如何解決？

  可能原因：cryptojs加密時候的問題，由于第三方包不好修改，推薦使用webtracking無鑒權寫入。更多信息，請參見使用Web Tracking采集日志。