Hasilkan URL bertanda untuk pratinjau dan unduhan objek menggunakan OSS SDK untuk Browser.js - Object Storage Service

Di browser, Anda dapat menggunakan metode signatureUrl untuk menghasilkan URL guna mempratinjau atau mengunduh suatu objek. URL yang dihasilkan dapat digunakan bersama atribut `download` pada tag HTML `<a>` atau Web API `window.open`.

Catatan penggunaan

Saat menggunakan alat packaging seperti Webpack dan Browserify, instal OSS SDK untuk Browser.js dengan menjalankan perintah npm install ali-oss.
Jika Anda ingin mengakses bucket OSS dari browser tetapi bucket tersebut belum dikonfigurasi dengan aturan CORS, browser akan menolak permintaan tersebut. Oleh karena itu, Anda harus mengonfigurasi aturan CORS pada bucket jika ingin mengaksesnya dari browser. Untuk informasi selengkapnya, lihat Instalasi.
Dalam kebanyakan kasus, OSS SDK untuk Browser.js digunakan di browser. Untuk mencegah pasangan AccessKey Anda terekspos, kami menyarankan agar Anda menggunakan kredensial akses temporary yang diperoleh dari Security Token Service (STS) untuk mengakses OSS.
Kredensial akses temporary terdiri atas pasangan AccessKey dan token keamanan. Pasangan AccessKey terdiri atas ID AccessKey dan Rahasia AccessKey. Untuk informasi selengkapnya tentang cara memperoleh kredensial akses temporary, lihat Gunakan STS untuk otorisasi akses temporary.

Dapatkan URL pratinjau file

Kode berikut menunjukkan cara memperoleh URL pratinjau untuk file exampleobject.txt di bucket examplebucket.

Catatan

Jika Anda ingin mempratinjau file langsung di browser, Anda dapat mengatur header Content-Disposition objek ke inline dan mengakses objek tersebut menggunakan nama domain kustom yang telah disambungkan ke bucket. Untuk informasi selengkapnya, lihat Atur metadata objek dan Gunakan nama domain kustom (Browser.js SDK).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--Impor file SDK.-->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      const client = new OSS({
        // Atur region ke wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur region ke oss-cn-hangzhou.
        region: "yourRegion",
        authorizationV4: true,
        // Pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) yang diperoleh dari STS.
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // Token keamanan (SecurityToken) yang diperoleh dari STS.
        stsToken: "yoursecurityToken",
        // Tentukan nama bucket.
        bucket: "examplebucket",
      });
      
      // Tentukan path lengkap objek. Path lengkap tidak boleh mencakup nama bucket.
      const url = client.signatureUrl("example.jpg", {
        // Untuk menerapkan gaya citra pada citra yang ingin diakses, tentukan gaya tersebut dalam parameter process. Format: style/StyleName.
        // process: "style/imagestyle",
      });
      console.log(url);

      // Tentukan periode validitas URL dalam satuan detik. Jika Anda tidak menentukan parameter ini, nilai default 1800 akan digunakan.
      // url = client.signatureUrl('example.jpg', {expires: 3600});
      // console.log(url);
    </script>
  </body>
</html>

Dapatkan URL unduh file

Kode berikut menunjukkan cara memperoleh URL unduh untuk file exampleobject.txt di bucket examplebucket. Periode validitas default URL tersebut adalah 1.800 detik.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--Impor file SDK.-->
    <script
      type="text/javascript"
      src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
    ></script>
    <script type="text/javascript">
      const client = new OSS({
        // Atur region ke wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur region ke oss-cn-hangzhou.
        region: "yourRegion",
        authorizationV4: true,
        // Pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) yang diperoleh dari STS.
        accessKeyId: "yourAccessKeyId",
        accessKeySecret: "yourAccessKeySecret",
        // Token keamanan (SecurityToken) yang diperoleh dari STS.
        stsToken: "yoursecurityToken",
        // Tentukan nama bucket.
        bucket: "examplebucket",
      });

      // Konfigurasikan header respons agar file otomatis diunduh dan namanya ditetapkan saat diakses melalui URL.
      const filename = "examplefile.txt";
      const response = {
        "content-disposition": `attachment; filename=${encodeURIComponent(
          filename
        )}`,
      };
      // Tentukan path lengkap objek. Path lengkap tidak boleh mencakup nama bucket.
      const url = client.signatureUrl("exampleobject.txt", { response });
      console.log(url);
    </script>
  </body>
</html>