Simple Log Service:WebTracking によるクライアント側のログの収集

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

2. リクエストを検証した後、アプリケーションサーバーは事前に設定された RAM ユーザーを使用して Alibaba Cloud STS の AssumeRole API を呼び出し、SLS への書き込み権限を持つ RAM ロールを引き受けます。

3. STS はロールの権限を検証し、AccessKey ID、AccessKey Secret、およびセキュリティトークンを含む一時的なセキュリティ認証情報を発行します。

4. アプリケーションサーバーは、一時的なセキュリティ認証情報をフロントエンドアプリケーションに返します。

5. フロントエンドアプリケーションは、WebTracking SDK で一時的なセキュリティ認証情報を使用して、指定された Logstore にログをアップロードします。

1. フロントエンド用の RAM ロールの作成

この仮想アイデンティティには長期的なキーがありません。フロントエンドは、ログを書き込むために一時的にこのロールを引き受けます。

1.1 RAM ロールの作成

手順： RAM コンソールにログインします。左側メニューで、アイデンティティ > ロール を選択し、ロールの作成 をクリックします。

設定：

• [信頼プリンシパルタイプ]：クラウドアカウント を選択します。

• [信頼プリンシパル名]：現在のクラウドアカウントを選択するか、別のクラウドアカウントを指定します。

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

1.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 を入力してポリシーを作成します。

1.3 ロールへのログ書き込み権限の付与

前の手順で作成した書き込みポリシーをフロントエンドロールにアタッチします。

手順：左側メニューで、アイデンティティ > ロール を選択します。ターゲットロールの名前をクリックして、その詳細ページに移動します。承認管理 タブで、権限を新規付与する をクリックします。

設定：

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

• 権限付与 をクリックしてポリシーをアタッチします。

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

この RAM ユーザーは、バックエンドが STS を呼び出してロールを引き受けるために使用する長期的な AccessKey ペアを提供します。

2.1 RAM ユーザーの作成

手順： RAM コンソールにログインします。左側メニューで、アイデンティティ > ユーザー を選択し、ユーザーの作成 をクリックしてください。

設定：

• [ログイン名]：文字、数字、ピリオド (.)、ハイフン (-)、アンダースコア (_) のみを含む名前を入力します。名前は最大 64 文字です。例：sls-token-service。

• [アクセス方法]：永久 AccessKey を使用したアクセス を選択します。

• その他の設定はデフォルト値のままにして、OK をクリックしてユーザーを作成し、AccessKey ID と AccessKey Secret を保存します。

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

2.2 ロールを引き受ける権限の付与

手順：ターゲットユーザーの名前をクリックしてユーザー詳細ページに移動し、承認管理 タブに切り替えて 権限を新規付与する をクリックします。

設定：

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

• その他の設定はデフォルト値のままにして、権限を付与 をクリックします。

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

手順2： バックエンド STS サービスの構築

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

Java、Node.js、PHP、および Ruby の例については、付録1：多言語での STS の例をご参照ください。

1. サーバー環境の準備

STS 認証情報 API を既存のアプリケーションサーバーに統合するか、スタンドアロンでデプロイします。要件：

• フロントエンドアプリケーションが HTTP または HTTPS を介してサーバーにアクセスできること。

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

次のコマンドを実行して、必要なライブラリをインストールしてください。

# Flask Web フレームワークと関連する Alibaba Cloud SDK ライブラリをインストールします
pip3 install Flask==2.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

2.2 main.py ファイルの編集

次のコードを main.py ファイルに貼り付けます。 <YOUR_ROLE_ARN> を sls-web-tracking RAM ロールの 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 API を呼び出して一時的なセキュリティトークンを取得します。
    戻り値：JSON 形式の Credentials オブジェクト。
    """
    # CredentialClient の初期化時にパラメーターを指定しない場合、デフォルトの認証情報チェーンが使用されます。
    # プログラムをローカルで実行する場合は、ALIBABA_CLOUD_ACCESS_KEY_ID および ALIBABA_CLOUD_ACCESS_KEY_SECRET 環境変数を使用して AccessKey ペアを指定します。
    # ECS、ECI、または Container Service で実行する場合は、ALIBABA_CLOUD_ECS_METADATA 環境変数を使用してインスタンス RAM ロールを指定します。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. バックエンドサービスの起動

手順1で作成した 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_instance_public_ip_address>/get_sts_token

成功レスポンスの例：

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

検証ポイント：

• レスポンスには、AccessKeyId、AccessKeySecret、および SecurityToken フィールドが含まれます。

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

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

手順3： WebTracking SDK の統合

SDK をフロントエンドアプリケーションに統合し、安全なログアップロードのために STS プラグインを設定します。完全な動作例は、付録2：フロントエンドアプリケーションのサンプルプロジェクトをご参照ください。

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 SLS 情報の設定

実際のリソース情報に基づいて、次のパラメーターを指定してください。

const opts = {
  host: "${endpoint}", // リージョンに対応するエンドポイント。例：cn-hangzhou.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 プラグインを使用して、バックエンドから一時的なトークンを取得し、自動的に更新します。

const stsOpt = {
  accessKeyId: "",
  accessKeySecret: "",
  securityToken: "",
  
  // STS トークンを更新するための非同期関数。
  refreshSTSToken: () =>
    new Promise((resolve, reject) => {
      const xhr = new window.XMLHttpRequest();
      xhr.open("GET", "http://<your_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">Login</button>

  <!-- モジュールとしてスクリプトを使用 -->
  <script type="module" src="/static/js/index.js"></script>
</body>
</html>

1. フロントエンドサービスを起動し、http://<your_instance_public_ip_address> でフロントエンドページにアクセスしてください。

2. ログインボタンをクリックするなど、ユーザーアクションをシミュレートしてください。

3. ブラウザで開発者ツールを開きます (F12)。

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

   • [ネットワーク] タブで、成功した POST リクエストが cn-xxx.log.aliyuncs.com に送信されたことを確認します。