Simple Log Service：使用WebTracking採集前端日誌

1. 用戶端請求憑證：前端應用向商務服務器發起請求，申請用於上傳日誌的臨時訪問憑證。

2. 伺服器驗證並擷取臨時憑證：商務服務器驗證請求合法性後，使用預配置的RAM使用者身份，調用阿里雲STS的AssumeRole介面，申請扮演一個具備SLS寫入許可權的RAM角色。

3. STS簽發臨時憑證：STS驗證角色許可權後，產生包含AccessKey ID、AccessKey Secret和STS Token等資訊的臨時憑證。

4. 伺服器下發憑證：商務服務器將臨時憑證返回給前端應用。

5. 用戶端上傳日誌：用戶端使用該臨時憑證，通過WebTracking SDK將採集到的日誌上傳至指定Logstore。

1. 建立供前端應用扮演的RAM角色

此角色是一個沒有長期密鑰的虛擬身份，專門用於被臨時扮演以擷取日誌寫入許可權。

1.1 建立RAM角色

操作路徑： 登入RAM控制台，在左側導覽列，選擇身份管理 > 角色，單擊建立角色。

配置說明：

• 信任主體類型：選擇雲帳號。

• 信任主體名稱：選擇當前雲帳號或指定其他雲帳號。

• 單擊確定，輸入角色名稱sls-web-tracking。

1.2 建立僅允許寫入日誌的權限原則

此策略精確地限制了上述角色只能向指定的 Logstore 寫入日誌。

操作路徑：在左側導覽列，選擇許可權管理 > 權限原則，單擊建立權限原則。

配置說明：

• 使用指令碼編輯模式，粘貼以下指令碼，並將<Project名稱>、<Logstore名稱>替換為實際的Project、Logstore名稱。

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

• 單擊確定，輸入策略名稱稱post-logs-policy，完成建立。

1.3 為RAM角色授予日誌寫入許可權

將上一步建立的寫入許可權賦予前端扮演的角色。

操作路徑：在左側導覽列，選擇身份管理 > 角色，單擊目標角色名稱，進入角色詳情頁，在許可權管理模組單擊新增授權。

配置說明：

• 在新增授權面板中，搜尋並選中上一步建立的自訂權限原則（sls-logstore-write-policy）。

• 單擊確認授權，完成許可權綁定。

2. 建立供後端服務使用的RAM使用者

此使用者擁有一個長期 AccessKey，用於向 STS 服務發起扮演角色的請求。

2.1 建立RAM使用者

操作路徑：  登入RAM控制台，在左側導覽列，選擇身份管理 > 使用者，單擊建立使用者。

配置說明：

• 登入名稱稱：僅支援英文字母、數字、半形句號（.）、短劃線（-）和底線（_），最多64個字元，如：sls-token-service。

• 訪問方式：勾選使用永久 AccessKey 訪問。

• 其餘配置保持預設，單擊確定，完成建立，並儲存 AccessKey ID 和 AccessKey Secret資訊。

  AccessKey Secret 僅在建立時顯示一次，不支援後續查詢，請務必立即儲存至安全位元置。

2.2 為RAM使用者授予角色扮演的許可權

操作路徑：單擊目標使用者名稱稱，進入使用者詳情頁，切換到許可權管理頁簽，單擊新增授權。

配置說明：

• 在權限原則模組，勾選AliyunSTSAssumeRoleAccess策略。

• 其餘配置保持預設，單擊確認新增授權，完成許可權綁定。

小結：後端服務使用 RAM 使用者（AK/SK）扮演 sls-web-tracking 角色，產生臨時安全憑證返回給前端應用，WebTracking SDK 使用臨時憑證安全上傳日誌。

步驟二：搭建後端STS臨時憑證服務

需搭建一個後端介面，用於接收前端的憑證請求，並安全地返回 STS 臨時憑證，以下以Python + Flask 為例。

您可根據實際技術棧參考附錄一：多語言STS樣本，選擇 Java、Node.js等其他語言實現。

1. 準備伺服器環境

在實際部署時，您可以將調用STS服務的介面整合到自己的商務服務器中，而無需單獨準備伺服器，也可以將介面單獨部署，只需確保該伺服器滿足如下要求：

• 前端應用可通過 HTTP(S) 訪問該伺服器。

• 安裝Python3環境，推薦Python3.8及以上版本。

執行如下命令，安裝調用阿里雲STS服務介面所需的依賴庫。

# 安裝 Flask Web 架構及阿里雲 SDK 相關的依賴庫
pip3 install Flask==3.1.2
pip3 install aiohttp==3.8.4
pip3 install alibabacloud-credentials==0.3.2
pip3 install alibabacloud-sts20150401==1.1.3
pip3 install alibabacloud-tea==0.3.2
pip3 install alibabacloud-tea-openapi==0.3.7
pip3 install alibabacloud-tea-util==0.3.8
pip3 install alibabacloud-tea-xml==0.0.2

2. 編寫後端STS服務代碼

建立一個HTTP介面 /get_sts_token，用於產生並返回STS臨時憑證。

2.1 建立專案目錄與檔案

# 建立並進入專案目錄
mkdir my_web_sample
cd my_web_sample
touch main.py

2.2 編輯main.py檔案

請將以下代碼粘貼至 main.py 檔案，並將 <YOUR_ROLE_ARN> 替換為RAM 角色 sls-web-tracking 對應的 ARN， <YOUR_ROLE_SESSION_NAME> 替換為自訂的會話名稱（例如role_session_test）。

import json
from flask import Flask, render_template
from alibabacloud_tea_openapi.models import Config
from alibabacloud_sts20150401.client import Client as Sts20150401Client
from alibabacloud_sts20150401 import models as sts_20150401_models
from alibabacloud_credentials.client import Client as CredentialClient

app = Flask(__name__)

# ================== 使用者配置區 ==================
# 替換為您的 RAM 角色 ARN，格式：acs:ram::${accountId}:role/${roleName}
role_arn_for_sls_upload = '<YOUR_ROLE_ARN>'

# 設定角色會話名稱（建議唯一標識請求來源）
role_session_name = '<YOUR_ROLE_SESSION_NAME>'  # 如：sls-web-session-001

# STS服務所在地區，例如cn-hangzhou。
region_id = 'cn-hangzhou'
# ==============================================

@app.route("/")
def hello_world():
    return render_template('index.html')

@app.route('/get_sts_token', methods=['GET'])
def get_sts_token():
    """
    介面：/get_sts_token
    方法：GET
    功能：調用 STS AssumeRole 介面擷取臨時安全性權杖
    返回：JSON 格式的 Credentials 對象
    """
    # 初始化 CredentialClient 時不指定參數，代表使用預設憑據鏈。
    # 在本地運行程式時，可以通過環境變數 ALIBABA_CLOUD_ACCESS_KEY_ID、ALIBABA_CLOUD_ACCESS_KEY_SECRET 指定 AK；
    # 在 ECS\ECI\Container Service上運行時，可以通過環境變數 ALIBABA_CLOUD_ECS_METADATA 來指定綁定的執行個體節點角色，SDK 會自動換取 STS 臨時憑證。
    config = Config(
        region_id=region_id,
        credential=CredentialClient()
    )
    sts_client = Sts20150401Client(config=config)

    # 構造 AssumeRole 請求
    assume_role_request = sts_20150401_models.AssumeRoleRequest(
        role_arn=role_arn_for_sls_upload,
        role_session_name=role_session_name,
    )
      
    # 調用 STS 擷取臨時憑證
    response = sts_client.assume_role(assume_role_request)
    
    token = json.dumps(response.body.credentials.to_map())
    return token


app.run(host="0.0.0.0", port=80)

3. 啟動後端服務

執行如下命令，使用步驟一中建立的RAM使用者的存取金鑰啟動服務：

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

4. 驗證介面是否正常工作

發送測試請求：

curl http://<伺服器公網IP地址>/get_sts_token

成功響應樣本：

{
  "AccessKeyId": "STS.L4xxxxxx",
  "AccessKeySecret": "Dcyyyyyyyy",
  "Expiration": "2025-04-05T10:30:00Z",
  "SecurityToken": "CAISzxxxxxxxxxxx..."
}

驗證要點：

• 返回欄位包含 AccessKeyId, AccessKeySecret, SecurityToken。

• AccessKeyId 以 STS. 開頭，表示是臨時憑證。

• Expiration 表示到期時間，應在合理範圍內。

步驟三：前端整合WebTracking SDK

在前端應用（瀏覽器或小程式）中整合 SDK，並配置 STS 外掛程式以實現安全授權和日誌上報。完整樣本工程請參見附錄二：前端應用樣本工程。

1. 安裝SDK依賴

使用 npm 安裝 WebTracking SDK 及其 STS 外掛程式：

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

2. 初始化 SDK 並配置 STS 身分識別驗證

在前端專案中建立一個用於初始化日誌採集器的 JavaScript 檔案，例如index.js。該檔案負責初始化 SlsTracker 執行個體，配置 STS 臨時憑證外掛程式。

2.1 引入核心模組

import SlsTracker from "@aliyun-sls/web-track-browser";
import createStsPlugin from "@aliyun-sls/web-sts-plugin";

2.2 配置Log Service基礎資訊

請根據您的實際資源資訊填寫以下參數：

const opts = {
  host: "${endpoint}", // 所在地區的服務入口。例如cn-hangzhou.log.aliyuncs.com
  project: "${project}", // Project 名稱
  logstore: "${logstore}", // Logstore 名稱
  time: 10, // 發送日誌的時間間隔，預設是10秒
  count: 10, // 發送日誌的數量大小，預設是10條
  topic: "topic", // 自訂日誌主題
  source: "source",
  tags: {
    tags: "tags",
  },
};

2.3 配置STS外掛程式以實現安全授權

為保障安全性，前端應用不應持有長期 AccessKey。推薦通過後端服務擷取臨時安全性權杖（STS Token），並通過外掛程式動態重新整理。

const stsOpt = {
  accessKeyId: "",
  accessKeySecret: "",
  securityToken: "",
  
  // 重新整理 STS Token 的非同步函數
  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.accessKeyId = credential.AccessKeyId;
            stsOpt.accessKeySecret = credential.AccessKeySecret;
            stsOpt.securityToken = credential.SecurityToken;
            resolve();
          } else {
            reject("Wrong status code.");
          }
        }
      };
    }),
   // （可選）自訂重新整理頻率，預設 5 分鐘（300000ms）
  // refreshSTSTokenInterval: 300000,
  
  // （可選）設定 token 到期前多久提前重新整理（單位毫秒）
  // stsTokenFreshTime: undefined,
};

2.4 初始化Tracker執行個體並啟用STS外掛程式

// 建立 tracker 執行個體
const tracker = new SlsTracker(opts);

// 建立並註冊 sts 外掛程式
const stsPlugin = createStsPlugin(stsOpt);
tracker.useStsPlugin(stsPlugin);

3. 在業務代碼中上報日誌

document.getElementById("loginButton").addEventListener("click", () => {
  const username = document.getElementById("username").value;
  
  tracker.send({
    eventType: "login",
    username: username,
  });
  
  console.log("Login event tracked for:", username);
});

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>使用者行為監控樣本</title>
</head>
<body>
  <input type="text" id="username" placeholder="請輸入使用者名稱" />
  <button id="loginButton">登入</button>

  <!-- 使用模組化指令碼 -->
  <script type="module" src="/static/js/index.js"></script>
</body>
</html>

1. 啟動前端服務，訪問前端頁面：http://<伺服器公網IP>。

2. 類比使用者操作（點擊登入按鈕）。

3. 開啟瀏覽器開發人員工具（F12）：

   • 查看 Console 輸出是否顯示Login event tracked for: xxx 。

   • 在 Network 面板檢查是否有成功發送到 cn-xxx.log.aliyuncs.com 的 POST 請求。