Simple Log Service:webトラッキングSDK for JavaScriptのSTSプラグインを使用してログをアップロードする

背景情報

一時的な承認にSTSを使用しない場合は、Logstoreのwebトラッキング機能を有効にする必要があります。 Web tracking SDK for JavaScriptは、ブラウザから収集したログをSimple Log ServiceのLogstoreにアップロードします。 次の項目では、webトラッキングSDK for JavaScriptのSTSプラグインを使用してログをアップロードするプロセスについて説明します。

1. ブラウザは、ビジネスサーバーに一時的なID資格情報 (STSトークン) を要求します。

2. サービスサーバーは、STSサービスからSTSトークンを要求します。

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

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

3. STSは、STSトークンをビジネスサーバーに返します。

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

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

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

前提条件

• 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/<The name of the specified 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}', // The Simple Log Service endpoint for the region. Example: cn-hangzhou.log.aliyuncs.com.
     project: '${project}', // The name of the project. 
     logstore: '${logstore}', // The name of the Logstore. 
     time: 10, // The interval at which logs are sent. Default value: 10. Unit: seconds. 
     count: 10, // The maximum number of logs that can be sent in each request. Default value: 10. 
     topic: 'topic',// The custom topic of logs. 
     source: 'source',
     tags: {
       tags: 'tags',
     },
   }
   
   const stsOpt = {
     accessKeyId: '',
     accessKeySecret: '',
     securityToken: '',
     // The following is a simple example of an STS token refresh function.
     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)
                 // The purpose of the function is to configure the temporary key and token of stsOpt. 
                 stsOpt.accessKeyId = credential.AccessKeyId
                 stsOpt.accessKeySecret = credential.AccessKeySecret
                 stsOpt.securityToken = credential.SecurityToken
                 resolve()
               } else {
                 reject('Wrong status code.')
               }
             }
           }
         }),
     // refreshSTSTokenInterval: 300000,
     // stsTokenFreshTime: undefined,
   }
   
   // Create a tracker.
   const tracker = new SlsTracker(opts)
   // Create the STS plug-in.
   const stsPlugin = createStsPlugin(stsOpt)
   // Use the STS plug-in.
   tracker.useStsPlugin(stsPlugin)
   
   // Assume that you want to upload a single log.
   tracker.send({
     eventType:'view_product',
     productName: 'Tablet',
     price: 500
   })
   

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

   STSパラメーター	必須	説明
   accessKeyId accessKeySecret securityToken	課金されます	ビジネスサーバーは、RAMユーザーのAccessKeyペアを使用してAssumeRole操作を呼び出します。 レスポンスパラメーターには、AccessKeySecret、AccessKeyId、SecurityTokenが含まれます。 AssumeRole操作の入力パラメーターで、DurationSecondsはトークンの有効期間を指定し、Policyはトークンの権限スコープを指定します。
   リフレッシュストッケン	課金されます	STSトークン要求関数は、STSトークンを定期的に取得して前のフィールドを更新するために使用されます。 Promise/async関数を使用できます。
   リフレッシュSTokenInterval	課金されません	トークンがリフレッシュされる間隔 (ミリ秒単位) 。 デフォルト値: 300,000。5分を示します。
   stsTokenFreshTime	課金されません	最新のトークン取得時刻。 指定する必要はありません。

関連ドキュメント

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