Object Storage Service：Instal (Browser.js SDK)

Persiapan

• Akses OSS menggunakan pengguna RAM atau STS

  Pasangan Kunci Akses (AccessKey pair) dari Akun Alibaba Cloud memberikan izin penuh untuk semua operasi API. Untuk alasan keamanan, kami menyarankan Anda menggunakan pengguna Resource Access Management (RAM) atau Security Token Service (STS) untuk akses API atau operasi O&M rutin. Jika Anda menerapkan kit pengembangan perangkat lunak (SDK) di server, gunakan pengguna RAM atau STS. Jika Anda menerapkan SDK di client, gunakan STS untuk akses API. Untuk informasi selengkapnya, lihat Resource Access Management.

• Konfigurasikan berbagi sumber daya lintas asal (CORS)

  Saat Anda mengakses OSS langsung dari browser, Anda harus mengonfigurasi aturan berbagi sumber daya lintas asal (CORS) berikut:

  • Origin: Tetapkan parameter ini ke nama domain tertentu, seperti https://www.aliyun.com, atau nama domain yang mengandung karakter wildcard (*), seperti https://*.aliyun.com.

  • Allowed Methods: Pilih metode berdasarkan skenario Anda. Misalnya, pilih PUT untuk unggah multi-bagian atau DELETE untuk menghapus file.

  • Allowed Headers: Tetapkan parameter ini ke *.

  • Exposed Headers: Tetapkan header yang diekspos berdasarkan skenario Anda. Misalnya, tetapkan parameter ini ke ETag, x-oss-request-id, dan x-oss-version-id.

  

  Untuk informasi selengkapnya, lihat Konfigurasikan CORS.

Catatan

OSS Browser.js SDK menggunakan Browserify dan Babel untuk menghasilkan kode bagi browser. Fitur-fitur berikut tidak tersedia di lingkungan browser:

• Unggah streaming: Pengkodean chunked tidak dapat diatur di browser. Gunakan unggah multi-bagian sebagai gantinya.

• Operasi file lokal: Anda tidak dapat mengakses sistem file lokal secara langsung dari browser. Gunakan URL yang ditandatangani untuk mengunduh file.

• Karena OSS tidak mendukung permintaan lintas asal untuk bucket, Anda harus menggunakan Konsol untuk melakukan operasi terkait bucket.

Unduh SDK

Demo dalam dokumentasi ini didasarkan pada SDK versi 6.x. Untuk informasi tentang versi sebelum 6.x, lihat dokumentasi pengembangan 5.x. Untuk meningkatkan ke versi 6.x, lihat dokumen peningkatan.

• Repositori GitHub

• Referensi API

• ChangeLog

Instal SDK

• Browser yang didukung

  • IE 10 atau versi lebih baru

  • Microsoft Edge

  • Versi terbaru Chrome, Firefox, dan Safari

  • Browser bawaan pada versi terbaru Android, iOS, dan Windows Phone

• Metode instalasi

  Anda dapat menginstal Browser.js SDK dengan salah satu metode berikut.

  Impor di browser

  Penting

  Beberapa browser tidak mendukung promises. Anda harus mengimpor library kompatibilitas promise. Misalnya, untuk IE 10 dan IE 11, Anda harus mengimpor promise-polyfill.

  <!-- Impor resource online -->
  <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.20.0.min.js"></script>      
  <!-- Impor resource lokal -->
  <script src="./aliyun-oss-sdk-6.20.0.min.js"></script>

  Catatan

  • Mengimpor resource online bergantung pada stabilitas server CDN. Kami menyarankan Anda mengimpor SDK secara offline menggunakan resource lokal atau dengan membangun resource sendiri.

  • Saat Anda mengimpor resource lokal, tetapkan atribut `src` ke path relatif file resource tersebut.

  • Topik ini menggunakan versi 6.20.0 sebagai contoh. Untuk informasi selengkapnya tentang versi lainnya, lihat ali-oss.

  Gunakan objek OSS dalam kode Anda:

  Penting

  Browser.js SDK biasanya digunakan di lingkungan browser. Untuk menghindari paparan pasangan Kunci Akses (ID AccessKey dan Rahasia AccessKey) Akun Alibaba Cloud Anda, gunakan kredensial akses temporary untuk melakukan operasi OSS.

  Kredensial akses temporary mencakup pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) serta token keamanan. Anda dapat memperoleh kredensial akses temporary dengan memanggil operasi API STS AssumeRole atau menggunakan STS SDK untuk bahasa pemrograman Anda. Untuk informasi selengkapnya tentang cara membangun layanan STS, lihat Gunakan kredensial akses temporary yang disediakan oleh STS untuk mengakses OSS.

  <script type="text/javascript">
    const client = new OSS({
      // Tetapkan region ke wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), tetapkan region ke oss-cn-hangzhou.
      region: 'yourRegion',
      // Aktifkan tanda tangan V4.
      authorizationV4: true,
      // Pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) yang diperoleh dari STS.
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
      // Token keamanan yang diperoleh dari STS.
      stsToken: 'yourSecurityToken',
      refreshSTSToken: async () => {
      // Peroleh kredensial akses temporary dari layanan STS Anda.
        const info = await fetch('your_sts_server');
        return {
          accessKeyId: info.accessKeyId,
          accessKeySecret: info.accessKeySecret,
          stsToken: info.stsToken
        }
      },
      // Interval penyegaran kredensial akses temporary. Satuan: milidetik.
      refreshSTSTokenInterval: 300000,
      // Tentukan nama bucket.
      bucket: 'examplebucket'
    });
  </script>                           

  Instal paket SDK menggunakan npm

  npm install ali-oss

  Setelah instalasi selesai, Anda dapat menggunakan import atau require untuk mereferensikan paket tersebut. Karena browser tidak mendukung pola require secara native, gunakan alat pengemasan seperti webpack atau browserify di lingkungan pengembangan Anda.

  const OSS = require('ali-oss');
  
  const client = new OSS({
      // Tetapkan region ke wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), tetapkan region ke oss-cn-hangzhou.
      region: 'yourRegion',
      // Aktifkan tanda tangan V4.
      authorizationV4: true,
      // Pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) yang diperoleh dari STS.
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
      // Token keamanan yang diperoleh dari STS.
      stsToken: 'yourSecurityToken',
      refreshSTSToken: async () => {
      // Peroleh kredensial akses temporary dari layanan STS Anda.
        const info = await fetch('your_sts_server');
        return {
          accessKeyId: info.accessKeyId,
          accessKeySecret: info.accessKeySecret,
          stsToken: info.stsToken
        }
      },
      // Interval penyegaran kredensial akses temporary. Satuan: milidetik.
      refreshSTSTokenInterval: 300000,
      // Tentukan nama bucket.
      bucket: 'examplebucket'
  });

Penggunaan

OSS Browser.js SDK mendukung operasi sinkron dan asinkron. Untuk kedua jenis operasi tersebut, buat client menggunakan new OSS().

// Buat instance client OSS.
const client = new OSS(...);

async function put () {
  try {
    // object menentukan nama file yang akan diunggah ke OSS.
    // file menentukan file yang akan diunggah dari browser. Tipe HTML5 file dan BLOB didukung.
    const r1 = await client.put('object', file);
    console.log('put success: %j', r1);
    const r2 = await client.get('object');
    console.log('get success: %j', r2);
  } catch (e) {
    console.error('error: %j', e);
  }
}

put();                    

// Buat instance client OSS.
const client = new OSS(...);

// object menentukan nama file yang akan diunggah ke OSS.
// file menentukan file yang akan diunggah dari browser. Tipe HTML5 file dan BLOB didukung.
client.put('object', file).then(function (r1) {
  console.log('put success: %j', r1);
  return client.get('object');
}).then(function (r2) {
  console.log('get success: %j', r2);
}).catch(function (err) {
  console.error('error: %j', err);
});