Object Storage Service:Instal OSS Browser.js SDK

Prasyarat

• Gunakan RAM user atau STS untuk akses

  Pasangan AccessKey Akun Alibaba Cloud memberikan akses penuh ke semua API. Sebagai praktik keamanan terbaik, kami sangat menyarankan agar Anda tidak menggunakan pasangan AccessKey secara langsung. Untuk aplikasi sisi server, Anda dapat menggunakan RAM user atau STS untuk akses API dan operasi rutin. Untuk aplikasi sisi klien, Anda harus menggunakan STS untuk akses API. Untuk informasi selengkapnya, lihat kontrol akses.

• Konfigurasikan cross-origin resource sharing (CORS)

  Saat mengakses OSS langsung dari browser, Anda harus mengonfigurasi aturan CORS untuk bucket Anda sebagai berikut:

  • Origin: Tentukan nama domain yang tepat, seperti https://www.aliyun.com, atau nama domain yang mencakup karakter wildcard asterisk (*), seperti https://*.aliyun.com.

  • Allowed Methods: Pilih metode berdasarkan kasus penggunaan Anda. Misalnya, pilih PUT untuk unggah multi-bagian dan DELETE untuk menghapus objek.

  • Allowed Headers: Atur nilai ini menjadi *.

  • Exposed Headers: Atur header berdasarkan kasus penggunaan Anda. Misalnya, Anda mungkin perlu mengekspos ETag, x-oss-request-id, dan x-oss-version-id.

  

  Untuk informasi selengkapnya, lihat Konfigurasi CORS.

Batasan

OSS SDK untuk Browser.js menggunakan Browserify dan Babel untuk menghasilkan kode yang kompatibel dengan browser. Karena keterbatasan lingkungan browser, fitur-fitur berikut tidak didukung:

• Unggah streaming: Encoding chunked tidak dapat dikonfigurasi 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 objek.

• OSS tidak mendukung permintaan lintas asal yang terkait bucket. Lakukan operasi terkait bucket di Konsol.

Unduh SDK

Contoh dalam dokumentasi resmi didasarkan pada SDK v6.x. Untuk versi sebelum 6.x, lihat dokumentasi pengembangan 5.x. Untuk meningkatkan ke versi 6.x, lihat panduan peningkatan.

• Repositori GitHub

• Operasi API

• ChangeLog

Instal SDK

• Browser yang didukung

  • Internet Explorer 10 dan versi lebih baru

  • Edge

  • Versi utama Chrome, Firefox, dan Safari

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

• Metode instalasi

  Anda dapat menginstal OSS SDK untuk Browser.js dengan salah satu cara berikut.

  Impor di browser

  Penting

  Beberapa browser, seperti Internet Explorer 10 dan 11, tidak mendukung Promise secara native. Anda harus menyertakan library polyfill Promise, seperti promise-polyfill.

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

  Catatan

  • Mengimpor dari CDN bergantung pada stabilitas server CDN. Kami menyarankan agar Anda mengimpor SDK dari file lokal atau membangunnya sendiri.

  • Saat mengimpor dari file lokal, atur atribut src ke path relatif file tersebut.

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

  Gunakan objek OSS dalam kode Anda:

  Penting

  OSS SDK untuk Browser.js biasanya dijalankan di lingkungan browser. Untuk menghindari pengeksposan pasangan AccessKey Akun Alibaba Cloud (ID AccessKey dan Rahasia AccessKey), kami sangat menyarankan agar Anda menggunakan kredensial akses temporary untuk 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 STS AssumeRole atau dengan menggunakan SDK STS untuk berbagai bahasa pemrograman. Untuk informasi tentang cara membangun layanan STS, lihat Gunakan kredensial akses temporary yang disediakan oleh STS untuk mengakses OSS.

  <script type="text/Browser.jsscript">
    const client = new OSS({
      // Atur region ke wilayah tempat bucket berada. Misalnya, jika bucket Anda berada di wilayah China (Hangzhou), atur region ke oss-cn-hangzhou.
      region: 'yourRegion',
      // Aktifkan signature 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, dalam milidetik.
      refreshSTSTokenInterval: 300000,
      // Nama bucket.
      bucket: 'examplebucket'
    });
  </script>                           

  Instal dengan npm

  npm install ali-oss

  Setelah instalasi, Anda dapat mengimpor paket menggunakan import atau require. Karena browser tidak mendukung format modul require secara native, Anda harus menggunakan bundler, seperti webpack atau browserify, di lingkungan pengembangan Anda.

  const OSS = require('ali-oss');
  
  const client = new OSS({
      // Atur region ke wilayah tempat bucket berada. Misalnya, jika bucket Anda berada di wilayah China (Hangzhou), atur region ke oss-cn-hangzhou.
      region: 'yourRegion',
      // Aktifkan signature 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, dalam milidetik.
      refreshSTSTokenInterval: 300000,
      // Nama bucket.
      bucket: 'examplebucket'
  });

Mode penggunaan

OSS SDK untuk Browser.js mendukung model pemrograman sinkron dan asinkron. Pada kedua model tersebut, Anda membuat instans klien dengan new OSS().

// Buat instans klien.
const client = new OSS(...);

async function put () {
  try {
    // Nama objek yang akan diunggah ke OSS.
    // File yang akan diunggah dari browser. Dapat berupa objek HTML5 File atau Blob.
    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 instans klien.
const client = new OSS(...);

// Nama objek yang akan diunggah ke OSS.
// File yang akan diunggah dari browser. Dapat berupa objek HTML5 File atau Blob.
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);
});