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を使用してミニプログラムログを収集する」をご参照ください。

よくある質問

SDKはエラーなしで起動しますが、ログを送信すると、TypeError: Cannot read properties of undefined ('sigBytes') が報告されます。 この問題が発生した場合はどうすればよいですか?

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