Simple Log Service:JavaScript 用 Web Tracking SDK の STS プラグインを使用したログのアップロード

背景情報

STS の一時的な権限付与がない場合、Logstore の Web Tracking 機能を有効にする必要があります。これにより、ブラウザからの匿名書き込みが許可され、ダーティデータが生成される可能性があります。STS プラグインがログをアップロードする手順は、次のとおりです。

1. ブラウザが業務サーバーに一時的な ID 認証情報 (STS トークン) をリクエストします。

2. 業務サーバーが STS サービスに STS トークンをリクエストします。

   1. Resource Access Management (RAM) ユーザーの AccessKey ペアがサーバーに設定され、RAM ユーザーには AliyunSTSAssumeRoleAccess ポリシーがアタッチされています。

   2. サーバーは RAM ユーザーの AccessKey ペアを使用して STS の AssumeRole API を呼び出し、RAM ロールの STS トークンを取得します。AssumeRole の Policy パラメーターを使用して、ユーザーまたはデバイスに基づいて異なる STS トークンの権限を制限できます。

3. STS は業務サーバーに STS トークンを返します。

4. 業務サーバーはブラウザに STS トークンを返します。

5. ブラウザは取得した STS トークンを使用して RAM ロールを引き受け、ブラウザから収集したログを Logstore にアップロードします。

6. ログがアップロードされると、SLS はブラウザに応答を返します。

前提条件

• RAM ユーザーが作成され、AliyunSTSAssumeRoleAccess ポリシーが RAM ユーザーにアタッチされています。詳細については、「RAM ユーザーの作成」をご参照ください。

• 業務サーバーの環境変数に RAM ユーザーの AccessKey ペアを設定する方法の詳細については、「Linux、macOS、Windows での環境変数の設定」をご参照ください。

• 信頼できる Alibaba Cloud アカウントの RAM ロールを作成し、その RAM ロールに指定されたプロジェクトへのデータ書き込み権限を付与済みであること。詳細については、「信頼できる Alibaba Cloud アカウントの RAM ロールの作成」および「RAM カスタムポリシーの例」をご参照ください。

  {
    "Version": "1",
    "Statement": [
      {
        "Action": [
          "log:Post*"
        ],
        "Resource": "acs:log:*:*:project/<指定されたプロジェクト名>/*",
        "Effect": "Allow"
      }
    ]
  }

ステップ 1：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}', // リージョンの SLS エンドポイント。 例: cn-hangzhou.log.aliyuncs.com
     project: '${project}', // プロジェクト名。
     logstore: '${logstore}', // Logstore 名。
     time: 10, // ログが送信される間隔。 デフォルト値: 10。 単位: 秒。
     count: 10, // 各リクエストで送信できるログの最大数。 デフォルト値: 10。
     topic: 'topic', // ログのカスタムトピック。
     source: 'source',
     tags: {
       tags: 'tags',
     },
   }
   
   const stsOpt = {
     accessKeyId: '',
     accessKeySecret: '',
     securityToken: '',
     // 以下は、refreshSTSToken 関数の簡単な例です。
     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,
   }
   
   // トラッカーを作成します。
   const tracker = new SlsTracker(opts)
   // STS プラグインを作成します。
   const stsPlugin = createStsPlugin(stsOpt)
   // STS プラグインを使用します。
   tracker.useStsPlugin(stsPlugin)
   
   // 単一ログのアップロード例
   tracker.send({
     eventType: 'view_product',
     productName: 'Tablet',
     price: 500
   })
   

   次の表では、Web Tracking のパラメーターについて説明します。

   パラメーター	必須	説明
   host	はい	SLS が配置されているリージョンのエンドポイントです。この例では、中国 (杭州) リージョンの SLS エンドポイントが使用されています。パラメーターの値を実際のエンドポイントに置き換えてください。詳細については、「エンドポイント」をご参照ください。
   project	はい	プロジェクト名です。
   logstore	はい	Logstore 名です。
   time	いいえ	ログが送信される間隔です。デフォルト値は 10、単位は秒です。
   count	いいえ	各リクエストで送信できるログの最大数です。デフォルト値は 10 です。
   topic	いいえ	ログのトピックです。ログを識別するためにカスタム値を指定します。
   source	いいえ	ログのソースです。ログを識別するためにカスタム値を指定します。
   tags	いいえ	ログを識別するためのカスタムタグです。

   次の表では、STS のパラメーターについて説明します。

   パラメーター	必須	説明
   accessKeyId accessKeySecret securityToken	はい	業務サーバーは RAM ユーザーの AccessKey ペアを使用して AssumeRole API を呼び出します。応答パラメーターには、AccessKeySecret、AccessKeyId、および SecurityToken が含まれます。 AssumeRole API の入力パラメーターでは、DurationSeconds はトークンの有効期間を、Policy はトークンの権限範囲をそれぞれ指定します。
   refreshSTSToken	はい	定期的に新しい STS トークンを取得して認証情報フィールドを更新する関数です。Promise および async 関数をサポートします。
   refreshSTSTokenInterval	いいえ	トークンを更新する間隔 (ミリ秒単位) です。デフォルト値は 300,000 (5 分) です。
   stsTokenFreshTime	いいえ	最新のトークン取得のタイムスタンプです。このパラメーターは設定不要です。

関連ドキュメント

• このトピックでは、JavaScript 用 Web Tracking SDK を使用してウェブサイトのログを収集します。JavaScript 用 Web Tracking SDK を使用してミニプログラムのログを収集する方法の詳細については、「ミニプログラム用WebTracking JavaScript SDK」をご参照ください。

よくある質問

• SDK はエラーなしで起動しますが、ログを送信する際に TypeError: Cannot read properties of undefined (reading 'sigBytes') というエラーが報告されます。どうすればよいですか？

  考えられる原因：CryptoJS の暗号化の問題。サードパーティのパッケージは変更が難しいため、認証なしの書き込みが可能な Web Tracking を使用することを推奨します。詳細については、「WebTracking を使用したクライアントサイドログの収集」をご参照ください。