Simple Log Service：Kumpulkan log frontend dengan WebTracking

1. Klien Meminta Kredensial: Aplikasi frontend meminta kredensial akses sementara dari server aplikasi untuk mengunggah log.

2. Server Memvalidasi Permintaan dan Mendapatkan Kredensial Sementara: Setelah memvalidasi permintaan, server aplikasi menggunakan identitas Pengguna RAM yang telah dikonfigurasi sebelumnya untuk memanggil API AssumeRole untuk mengasumsikan Peran RAM yang memiliki izin untuk menulis ke SLS.

3. STS Menerbitkan Kredensial Sementara: Setelah memverifikasi izin peran, STS menghasilkan kredensial sementara yang berisi ID AccessKey, Rahasia AccessKey, dan token STS.

4. Server Mengirim Kredensial ke Klien: Server aplikasi mengembalikan kredensial sementara ke aplikasi frontend.

5. Klien Mengunggah Log: Klien menggunakan kredensial sementara untuk mengunggah log yang dikumpulkan ke logstore yang ditentukan melalui SDK WebTracking.

1. Buat peran RAM untuk aplikasi frontend untuk diasumsikan

Peran ini adalah identitas virtual tanpa kunci jangka panjang, yang aplikasi Anda asumsikan sementara untuk mendapatkan izin mengunggah log.

1.1 Buat peran RAM

Masuk ke Konsol RAM. Di panel navigasi sisi kiri, pilih Identities > Roles, lalu klik Create Role.

Konfigurasi:

• Principal Type: Pilih Cloud Account.

• Principal Name: Pilih akun saat ini atau tentukan akun lain.

• Klik OK dan masukkan nama peran sls-web-tracking.

1.2 Buat kebijakan yang memberikan izin tulis saja

Kebijakan ini membatasi peran untuk hanya menulis log ke logstore yang ditentukan.

Di panel navigasi sisi kiri, pilih Permissions > Policies, lalu klik Create Policy.

Konfigurasi:

• Di tab JSON, tempel skrip berikut. Ganti <ProjectName> dan <LogstoreName> dengan nama proyek dan nama logstore aktual Anda.

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

• Klik OK. Masukkan nama kebijakan post-logs-policy dan klik OK.

1.3 Berikan izin kepada peran RAM untuk mengunggah log

Lampirkan kebijakan izin tulis yang dibuat pada langkah sebelumnya ke peran yang akan diasumsikan oleh frontend.

Di panel navigasi sisi kiri, pilih Identities > Roles. Klik nama peran target untuk masuk ke halaman detail peran. Di halaman Permissions, klik Grant Permission.

Konfigurasi:

• Di panel Berikan Izin, cari dan pilih kebijakan kustom yang dibuat pada langkah sebelumnya (post-logs-policy).

• Klik Grant Permissions.

2. Buat pengguna RAM untuk layanan backend

Layanan backend Anda akan menggunakan pengguna ini dengan AccessKey jangka panjang untuk memanggil layanan STS dan mengasumsikan peran.

2.1 Buat pengguna RAM

Titik Masuk: Masuk ke Konsol RAM. Di panel navigasi sisi kiri, pilih Identities > Users, lalu klik Create User.

Konfigurasi:

• Logon Name: Hanya mendukung huruf, angka, titik (.), tanda hubung (-), dan garis bawah (_), hingga 64 karakter. Sebagai contoh, sls-token-service.

• Access Mode: Pilih Using permanent AccessKey to access.

• Simpan nilai default untuk parameter lainnya. Klik OK untuk membuat pengguna. Simpan ID AccessKey dan Rahasia AccessKey.

  Rahasia AccessKey hanya ditampilkan sekali saat pembuatan dan tidak dapat diambil nanti. Pastikan menyimpannya di lokasi yang aman segera.

2.2 Berikan izin kepada pengguna RAM untuk mengasumsikan peran

Klik nama pengguna target untuk masuk ke halaman detail pengguna. Beralih ke tab Permissions dan klik Grant Permission.

Konfigurasi:

• Di bagian Policy, pilih kebijakan AliyunSTSAssumeRoleAccess.

• Simpan nilai default untuk parameter lainnya. Klik Grant Permissions.

Ringkasan: Layanan backend menggunakan Pengguna RAM (dengan AccessKey-nya) untuk mengasumsikan peran sls-web-tracking, menghasilkan kredensial keamanan sementara yang dikembalikan ke aplikasi frontend. SDK WebTracking kemudian menggunakan kredensial sementara ini untuk mengunggah log secara aman.

Langkah 2: Bangun layanan kredensial STS sementara backend

Anda harus membangun titik akhir API backend untuk menerima permintaan kredensial dari frontend dan mengembalikan kredensial STS sementara secara aman. Contoh berikut menggunakan Python dan Flask.

Untuk informasi tentang cara mengimplementasikan layanan dalam bahasa lain, seperti Java atau Node.js, berdasarkan tumpukan teknologi Anda, lihat Lampiran 1: Contoh STS dalam beberapa bahasa.

1. Siapkan lingkungan server

Dalam lingkungan produksi, layanan kredensial STS dapat diintegrasikan ke dalam server aplikasi yang ada atau diterapkan sebagai titik akhir mandiri. Terlepas dari pendekatan yang digunakan, server host harus memenuhi persyaratan berikut:

• Aplikasi frontend dapat mengakses server melalui HTTP atau HTTPS.

• Python 3 diinstal. Versi 3.8 atau lebih baru direkomendasikan.

Jalankan perintah berikut untuk menginstal dependensi yang diperlukan untuk memanggil API STS Alibaba Cloud.

# Instal framework web Flask dan dependensi SDK Alibaba Cloud
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. Tulis kode layanan STS backend

Buat titik akhir HTTP /get_sts_token untuk menghasilkan dan mengembalikan kredensial STS sementara.

2.1 Buat direktori proyek dan file

# Buat dan masuk ke direktori proyek
mkdir my_web_sample
cd my_web_sample
touch main.py

2.2 Edit file main.py

Tempel kode berikut ke dalam file main.py. Ganti <YOUR_ROLE_ARN> dengan ARN dari peran RAM sls-web-tracking. Ganti <YOUR_ROLE_SESSION_NAME> dengan nama sesi kustom, seperti 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__)

# ================== Konfigurasi Pengguna ==================
# Ganti dengan ARN peran RAM Anda. Format: acs:ram::${accountId}:role/${roleName}
role_arn_for_sls_upload = '<YOUR_ROLE_ARN>'

# Tetapkan nama sesi peran. Pengidentifikasi unik untuk sumber permintaan direkomendasikan.
role_session_name = '<YOUR_ROLE_SESSION_NAME>'  # Misalnya, sls-web-session-001

# Wilayah tempat layanan STS berada, misalnya, 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():
    """
    Titik Akhir: /get_sts_token
    Metode: GET
    Fungsi: Panggil API AssumeRole STS untuk mendapatkan token keamanan sementara
    Mengembalikan: Objek Kredensial dalam format JSON
    """
    # Jika Anda tidak menentukan parameter saat menginisialisasi CredentialClient, rantai kredensial default digunakan.
    # Saat menjalankan program secara lokal, tentukan pasangan AccessKey menggunakan variabel lingkungan ALIBABA_CLOUD_ACCESS_KEY_ID dan ALIBABA_CLOUD_ACCESS_KEY_SECRET.
    # Saat menjalankan program di ECS, ECI, atau Container Service, tentukan peran instans menggunakan variabel lingkungan ALIBABA_CLOUD_ECS_METADATA. SDK secara otomatis mendapatkan kredensial STS sementara.
    config = Config(
        region_id=region_id,
        credential=CredentialClient()
    )
    sts_client = Sts20150401Client(config=config)

    # Bangun permintaan AssumeRole
    assume_role_request = sts_20150401_models.AssumeRoleRequest(
        role_arn=role_arn_for_sls_upload,
        role_session_name=role_session_name,
    )
      
    # Panggil STS untuk mendapatkan kredensial sementara
    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. Mulai layanan backend

Jalankan perintah berikut. Gunakan pasangan AccessKey dari pengguna RAM yang dibuat sebelumnya.

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

4. Verifikasi bahwa titik akhir berfungsi

Kirim permintaan uji:

curl http://<your_server_public_IP_address>/get_sts_token

Contoh Respons Sukses:

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

Poin Verifikasi:

• Respons mencakup bidang AccessKeyId, AccessKeySecret, dan SecurityToken.

• AccessKeyId dimulai dengan STS., yang menunjukkan kredensial sementara.

• Bidang Expiration menunjukkan waktu kedaluwarsa, yang harus berada dalam rentang yang wajar.

Langkah 3: Integrasikan SDK WebTracking ke dalam frontend Anda

Integrasikan SDK ke dalam aplikasi frontend Anda dan konfigurasikan plugin STS untuk otorisasi aman dan pengunggahan log. Untuk proyek sampel lengkap, lihat Lampiran II: Proyek Aplikasi Frontend Sampel.

1. Instal dependensi SDK

Gunakan npm untuk menginstal SDK WebTracking dan plugin STS-nya:

npm install --save @aliyun-sls/web-track-browser
npm install --save @aliyun-sls/web-sts-plugin

2. Inisialisasi SDK dan konfigurasikan otentikasi STS

Dalam proyek frontend Anda, buat file JavaScript, seperti index.js, untuk menginisialisasi kolektor log. File ini menginisialisasi instance SlsTracker dan mengonfigurasi plugin kredensial sementara STS.

2.1 Impor modul inti

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

2.2 Konfigurasikan informasi SLS dasar

Isi parameter berikut berdasarkan informasi sumber daya aktual Anda:

const opts = {
  host: "${endpoint}", // Titik akhir wilayah layanan Anda. Misalnya, ap-southeast-1.log.aliyuncs.com
  project: "${project}", // Nama proyek
  logstore: "${logstore}", // Nama logstore
  time: 10, // Interval pengiriman log, dalam detik. Default adalah 10.
  count: 10, // Jumlah log yang dikirim dalam satu batch. Default adalah 10.
  topic: "topic", // Topik log kustom
  source: "source",
  tags: {
    tags: "tags",
  },
};

2.3 Konfigurasikan plugin STS untuk otorisasi aman

Untuk menghindari paparan AccessKey jangka panjang di sisi klien, aplikasi malah mendapatkan kredensial sementara (token STS) dari layanan backend. Plugin STS yang disediakan mengotomatiskan proses pembaruan dinamis kredensial ini sebelum kedaluwarsa.

const stsOpt = {
  accessKeyId: "",
  accessKeySecret: "",
  securityToken: "",
  
  // Fungsi asinkron untuk memperbarui token 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);
            // Perbarui kredensial sementara
            stsOpt.accessKeyId = credential.AccessKeyId;
            stsOpt.accessKeySecret = credential.AccessKeySecret;
            stsOpt.securityToken = credential.SecurityToken;
            resolve();
          } else {
            reject("Kode status salah.");
          }
        }
      };
    }),
   // (Opsional) Interval pembaruan kustom. Default adalah 5 menit (300,000 ms).
  // refreshSTSTokenInterval: 300000,
  
  // (Opsional) Tetapkan berapa lama sebelum kedaluwarsa token untuk memperbarui (dalam milidetik).
  // stsTokenFreshTime: undefined,
};

2.4 Inisialisasi instance pelacak dan aktifkan plugin STS

// Buat instance pelacak
const tracker = new SlsTracker(opts);

// Buat dan daftarkan plugin STS
const stsPlugin = createStsPlugin(stsOpt);
tracker.useStsPlugin(stsPlugin);

3. Kirim log dari kode aplikasi Anda

document.getElementById("loginButton").addEventListener("click", () => {
  const username = document.getElementById("username").value;
  
  tracker.send({
    eventType: "login",
    username: username,
  });
  
  console.log("Acara login dilacak untuk:", username);
});

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8" />
  <title>Contoh Pemantauan Perilaku Pengguna</title>
</head>
<body>
  <input type="text" id="username" placeholder="Masukkan nama pengguna" />
  <button id="loginButton">Masuk</button>

  <!-- Gunakan skrip modular -->
  <script type="module" src="/static/js/index.js"></script>
</body>
</html>

1. Mulai layanan frontend dan akses halaman frontend di http://<your_server_public_IP_address>.

2. Simulasikan tindakan pengguna, seperti mengklik tombol login.

3. Buka alat pengembang di peramban Anda dengan menekan F12:

   • Di tab Console, periksa apakah output menampilkan Login event tracked for: xxx.

   • Di tab Network, pastikan terdapat permintaan POST yang berhasil ke cn-xxx.log.aliyuncs.com.