Simple Log Service:WebTracking を使用したフロントエンドログの収集

1. クライアントが認証情報をリクエスト: フロントエンドアプリケーションは、ログをアップロードするための一時的なアクセス認証情報をアプリケーションサーバにリクエストします。

2. サーバーがリクエストを検証し、一時的な認証情報を取得: リクエストを検証した後、アプリケーションサーバは事前に設定された Resource Access Management (RAM) ユーザー ID を使用して STS AssumeRole API を呼び出し、SLS への書き込み権限を持つ RAM ロールを偽装します。

3. STS が一時的な認証情報を発行: ロールの権限を確認した後、STS は AccessKey ID、AccessKey Secret、および STS トークンを含む一時的な認証情報を生成します。

4. サーバーが認証情報をクライアントに送信: アプリケーションサーバは一時的な認証情報をフロントエンドアプリケーションに返します。

5. クライアントがログをアップロード: クライアントは一時的な認証情報を使用して、WebTracking SDK を介して収集したログを指定された Logstore にアップロードします。

1. フロントエンドアプリケーションが偽装する RAM ロールの作成

このロールは長期キーを持たない仮想 ID であり、アプリケーションが一時的に偽装してログをアップロードする権限を取得します。

1.1 RAM ロールの作成

RAM コンソールにログインします。左側のナビゲーションウィンドウで、[ID] > [ロール] を選択し、[ロールの作成] をクリックします。

構成:

• プリンシパルタイプ: [Alibaba Cloud アカウント] を選択します。

• プリンシパル名: 現在のアカウントを選択するか、別のアカウントを指定します。

• [OK] をクリックし、ロール名 sls-web-tracking を入力します。

1innerHTML.2 書き込み専用権限を付与するポリシーの作成

このポリシーは、ロールを指定された Logstore にのみログを書き込むように制限します。

左側のナビゲーションウィンドウで、[権限] > [ポリシー] を選択し、[ポリシーの作成] をクリックします。

構成:

• [JSON] タブで、次のスクリプトを貼り付けます。<ProjectName> と <LogstoreName> を実際のプロジェクト名と Logstore 名に置き換えます。

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

• [OK] をクリックします。ポリシー名 post-logs-policy を入力し、[OK] をクリックします。

1.3 RAM ロールにログをアップロードする権限を付与

前のステップで作成した書き込み権限ポリシーを、フロントエンドが偽装するロールにアタッチします。

左側のナビゲーションウィンドウで、[ID] > [ロール] を選択します。ターゲットのロール名をクリックして、ロールの詳細ページに移動します。[権限] ページで、[権限の付与] をクリックします。

構成:

• [権限の付与] パネルで、前のステップで作成したカスタムポリシー (post-logs-policy) を検索して選択します。

• [権限の付与] をクリックします。

2. バックエンドサービス用の RAM ユーザーの作成

バックエンドサービスは、このユーザーの長期 AccessKey を使用して STS サービスを呼び出し、ロールを偽装します。

2.1 RAM ユーザーの作成

エントリポイント: RAM コンソールにログインします。左側のナビゲーションウィンドウで、[ID] > [ユーザー] を選択し、[ユーザーの作成] をクリックします。

構成:

• ログオン名: 英字、数字、ピリオド (.)、ハイフン (-)、アンダースコア (_) のみサポートし、最大 64 文字です。たとえば、sls-token-service です。

• アクセスモード: [永続的な AccessKey を使用してアクセス] を選択します。

• 他のパラメーターはデフォルト値のままにします。[OK] をクリックしてユーザーを作成します。AccessKey ID と AccessKey Secret を保存します。

  AccessKey Secret は作成時に一度しか表示されず、後で取得することはできません。すぐに安全な場所に保存してください。

2innerHTML.2 RAM ユーザーにロールを偽装する権限を付与

ターゲットのユーザー名をクリックしてユーザー詳細ページに移動します。[権限] タブに切り替えて、[権限の付与] をクリックします。

構成:

• [ポリシー] セクションで、AliyunSTSAssumeRoleAccess ポリシーを選択します。

• 他のパラメーターはデフォルト値のままにします。[権限の付与] をクリックします。

概要: バックエンドサービスは RAM ユーザー (その AccessKey を使用) を使用して sls-web-tracking ロールを偽装し、フロントエンドアプリケーションに返される一時的なセキュリティ認証情報を生成します。WebTracking SDK は、この一時的な認証情報を使用してログを安全にアップロードします。

ステップ 2: バックエンド STS 一時認証情報サービスの構築

フロントエンドからの認証情報リクエストを受信し、一時的な STS 認証情報を安全に返すためのバックエンド API エンドポイントを構築する必要があります。次の例では Python と Flask を使用します。

技術スタックに基づいて Java や Node.js などの他の言語でサービスを実装する方法については、「付録 1: 複数言語での STS の例」をご参照ください。

1. サーバー環境の準備

本番環境では、STS 認証情報サービスは既存のアプリケーションサーバに統合するか、スタンドアロンのエンドポイントとしてデプロイできます。どちらのアプローチでも、ホストサーバーは次の要件を満たす必要があります。

• フロントエンドアプリケーションは HTTP または HTTPS 経由でサーバーにアクセスできます。

• Python 3 がインストールされていること。バージョン 3.8 以降を推奨します。

次のコマンドを実行して、Alibaba Cloud STS API を呼び出すために必要な依存関係をインストールします。

# Flask Web フレームワークと Alibaba Cloud 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 サービスコードの記述

STS 一時認証情報を生成して返すための HTTP エンドポイント /get_sts_token を作成します。

2.1 プロジェクトディレクトリとファイルの作成

# プロジェクトディレクトリを作成して入る
mkdir my_web_sample
cd my_web_sample
touch main.py

2innerHTML.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 サービスが配置されているリージョン。例: ap-southeast-1。
region_id = 'ap-southeast-1'
# ==============================================

@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 API を呼び出して一時的なセキュリティトークンを取得する
    戻り値: JSON 形式の Credentials オブジェクト
    """
    # CredentialClient を初期化する際にパラメーターを指定しない場合、デフォルトの認証情報チェーンが使用されます。
    # プログラムをローカルで実行する場合、ALIBABA_CLOUD_ACCESS_KEY_ID および ALIBABA_CLOUD_ACCESS_KEY_SECRET 環境変数を使用して AccessKey ペアを指定します。
    # プログラムを 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 ユーザーの AccessKey ペアを使用します。

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

4. エンドポイントが機能していることを確認する

テストリクエストを送信します:

curl http://<your_server_public_IP_address>/get_sts_token

成功応答のサンプル:

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

検証ポイント:

• 応答には AccessKeyId、AccessKeySecret、および SecurityToken フィールドが含まれています。

• AccessKeyId は STS. で始まります。これは一時的な認証情報を示します。

• Expiration フィールドは有効期限を示し、妥当な範囲内である必要があります。

ステップ 3: WebTracking SDK をフロントエンドに統合する

SDK をフロントエンドアプリケーションに統合し、安全な権限付与とログアップロードのために STS プラグインを設定します。完全なサンプルプロジェクトについては、「付録 II: フロントエンドアプリケーションのサンプルプロジェクト」をご参照ください。

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 認証の設定

フロントエンドプロジェクトで、index.js などの JavaScript ファイルを作成してログコレクターを初期化します。このファイルは SlsTracker インスタンスを初期化し、STS 一時認証情報プラグインを設定します。

2.1 コアモジュールのインポート

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

2innerHTML.2 基本的な SLS 情報の設定

実際のリソース情報に基づいて、次のパラメーターを入力します:

const opts = {
  host: "${endpoint}", // サービスリージョンのエンドポイント。例: ap-southeast-1.log.aliyuncs.com
  project: "${project}", // プロジェクト名
  logstore: "${logstore}", // Logstore 名
  time: 10, // ログを送信する間隔 (秒)。デフォルトは 10 です。
  count: 10, // バッチで送信するログの数。デフォルトは 10 です。
  topic: "topic", // カスタムログトピック
  source: "source",
  tags: {
    tags: "tags",
  },
};

2.3 安全な権限付与のための STS プラグインの設定

クライアント上で長期 AccessKey を公開しないようにするため、アプリケーションは代わりにバックエンドサービスから一時的な認証情報 (STS トークン) を取得します。提供されている STS プラグインは、これらの認証情報が期限切れになる前に動的に更新するプロセスを自動化します。

const stsOpt = {
  accessKeyId: "",
  accessKeySecret: "",
  securityToken: "",
  
  // STS トークンを更新するための非同期関数
  refreshSTSToken: () =>
    new Promise((resolve, reject) => {
      const xhr = new window.XMLHttpRequest();
      xhr.open("GET", "http://<your_ECS_instance_public_IP_address>/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 分 (300,000 ms) です。
  // refreshSTSTokenInterval: 300000,
  
  // (オプション) トークンの有効期限が切れる何ミリ秒前に更新するかを設定します。
  // stsTokenFreshTime: undefined,
};

2.4 トラッカーインスタンスの初期化と STS プラグインの有効化

// トラッカーインスタンスを作成する
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="en-US">
<head>
  <meta charset="UTF-8" />
  <title>User Behavior Monitoring Example</title>
</head>
<body>
  <input type="text" id="username" placeholder="Enter username" />
  <button id="loginButton">Log On</button>

  <!-- モジュール形式のスクリプトを使用する -->
  <script type="module" src="/static/js/index.js"></script>
</body>
</html>

1. フロントエンドサービスを起動し、http://<your_server_public_IP_address> でフロントエンドページにアクセスします。

2. ユーザー操作をシミュレートします (たとえば、ログインボタンをクリックします)。

3. F12 を押して、ブラウザで開発者ツールを開きます。

   • [コンソール] タブで、出力に Login event tracked for: xxx が表示されるかどうかを確認します。

   • [ネットワーク] タブで、cn-xxx.log.aliyuncs.com への POST リクエストが成功したかどうかを確認します。