Object Storage Service:Install the OSS Browser.js SDK

Önkoşullar

• Erişim için RAM kullanıcısı veya STS kullanma

  Alibaba Cloud hesabınızın AccessKey çifti, tüm API'lere tam erişim sağlar. Güvenlik açısından en iyi uygulama olarak, AccessKey çiftinizi doğrudan kullanmamanızı kesinlikle öneririz. Sunucu tarafı uygulamalar için API erişimi ve rutin işlemler amacıyla bir RAM kullanıcısı veya STS kullanabilirsiniz. İstemci tarafı uygulamalar için API erişimi amacıyla mutlaka STS kullanmanız gerekir. Daha fazla bilgi için bkz. erişim kontrolü.

• Çapraz kaynak paylaşımını (CORS) yapılandırma

  OSS'ye doğrudan bir tarayıcıdan eriştiğinizde, paketiniz için CORS kurallarını aşağıdaki gibi yapılandırmanız gerekir:

  • Origin: Tam bir alan adı belirtin; örneğin, https://www.aliyun.com veya joker karakter (*) içeren bir alan adı belirtin; örneğin, https://*.aliyun.com.

  • Allowed Methods: Kullanım durumunuza göre yöntemleri seçin. Örneğin, çok parçalı yüklemeler için PUT ve nesneleri silmek için DELETE öğesini seçin.

  • Allowed Headers: Bu değeri * olarak ayarlayın.

  • Exposed Headers: Kullanım durumunuza göre üstbilgileri ayarlayın. Örneğin, ETag, x-oss-request-id ve x-oss-version-id üstbilgilerini göstermeniz gerekebilir.

  

  Daha fazla bilgi için bkz. CORS Yapılandırma.

Sınırlamalar

OSS Browser.js SDK, tarayıcı uyumlu kod oluşturmak için Browserify ve Babel kullanır. Tarayıcı ortamının sınırlamaları nedeniyle aşağıdaki özellikler desteklenmez:

• Akışlı yükleme: Tarayıcıda yığın kodlaması yapılandırılamaz. Bunun yerine çok parçalı yükleme kullanın.

• Yerel dosya işlemleri: Tarayıcıdan yerel dosya sistemine doğrudan erişemezsiniz. Nesneleri indirmek için imzalı URL'ler kullanın.

• OSS, paketle ilgili çapraz kaynak isteklerini desteklemez. Paketle ilgili işlemleri konsolda gerçekleştirin.

SDK'yı indirin

Resmi belgelerdeki örnekler SDK v6.x sürümüne dayanmaktadır. 6.x öncesi sürümler için 5.x geliştirme belgelerine bakın. 6.x sürümüne yükseltme yapmak için yükseltme kılavuzuna bakın.

• GitHub deposu

• API işlemleri

• Değişiklik Günlüğü

SDK'yı yükleyin

• Desteklenen tarayıcılar

  • Internet Explorer 10 ve sonraki sürümler

  • Edge

  • Chrome, Firefox ve Safari'nin ana sürümleri

  • Android, iOS ve Windows Phone'un ana sürümlerindeki varsayılan tarayıcılar

• Yükleme yöntemleri

  OSS Browser.js SDK'yı aşağıdaki yöntemlerden birini kullanarak yükleyebilirsiniz.

  Tarayıcıda içeri aktarma

  Önemli

  Internet Explorer 10 ve 11 gibi bazı tarayıcılar Promises özelliğini yerel olarak desteklemez. promise-polyfill gibi bir Promise polyfill kitaplığı eklemeniz gerekir.

  <!-- Import from a CDN -->
  <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.20.0.min.js"></script>      
  <!-- Import from a local file -->
  <script src="./aliyun-oss-sdk-6.20.0.min.js"></script>

  Not

  • CDN'den içeri aktarma, CDN sunucusunun kararlılığına bağlıdır. SDK'yı yerel bir dosyadan içeri aktarmanızı veya kendiniz derlemenizi öneririz.

  • Yerel bir dosyadan içeri aktardığınızda, src özniteliğini dosyanın göreli yoluna ayarlayın.

  • Bu konuda örnek olarak 6.20.0 sürümü kullanılmıştır. Diğer sürümler için bkz. ali-oss.

  Kodunuzda OSS nesnesini kullanın:

  Önemli

  OSS Browser.js SDK genellikle bir tarayıcı ortamında çalışır. Alibaba Cloud hesabınızın AccessKey çiftinin (AccessKey ID ve AccessKey secret) açığa çıkmasını önlemek için OSS işlemlerinde geçici erişim kimlik bilgileri kullanmanızı kesinlikle öneririz.

  Geçici erişim kimlik bilgileri, geçici bir AccessKey çifti (AccessKey ID ve AccessKey secret) ve bir güvenlik belirteci içerir. STS AssumeRole işlemini çağırarak veya çeşitli programlama dilleri için STS SDK'larını kullanarak geçici erişim kimlik bilgileri edinebilirsiniz. Bir STS hizmeti oluşturma hakkında bilgi için bkz. OSS'ye erişmek için STS tarafından sağlanan geçici erişim kimlik bilgilerini kullanma.

  <script type="text/Browser.jsscript">
    const client = new OSS({
      // Set region to the region where the bucket is located. For example, if your bucket is in the China (Hangzhou) region, set region to oss-cn-hangzhou.
      region: 'yourRegion',
      // Enable V4 signature.
      authorizationV4: true,
      // The temporary AccessKey pair (AccessKey ID and AccessKey secret) obtained from STS.
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
      // The security token obtained from STS.
      stsToken: 'yourSecurityToken',
      refreshSTSToken: async () => {
      // Obtain temporary access credentials from your STS service.
        const info = await fetch('your_sts_server');
        return {
          accessKeyId: info.accessKeyId,
          accessKeySecret: info.accessKeySecret,
          stsToken: info.stsToken
        }
      },
      // The interval for refreshing temporary access credentials, in milliseconds.
      refreshSTSTokenInterval: 300000,
      // The bucket name.
      bucket: 'examplebucket'
    });
  </script>                           

  **npm ile yükleme**

  npm install ali-oss

  Yüklemeden sonra paketi import veya require kullanarak içeri aktarabilirsiniz. Tarayıcılar require modül biçimini yerel olarak desteklemediğinden, geliştirme ortamınızda webpack veya browserify gibi bir paketleyici kullanmanız gerekir.

  const OSS = require('ali-oss');
  
  const client = new OSS({
      // Set region to the region where the bucket is located. For example, if your bucket is in the China (Hangzhou) region, set region to oss-cn-hangzhou.
      region: 'yourRegion',
      // Enable V4 signature.
      authorizationV4: true,
      // The temporary AccessKey pair (AccessKey ID and AccessKey secret) obtained from STS.
      accessKeyId: 'yourAccessKeyId',
      accessKeySecret: 'yourAccessKeySecret',
      // The security token obtained from STS.
      stsToken: 'yourSecurityToken',
      refreshSTSToken: async () => {
      // Obtain temporary access credentials from your STS service.
        const info = await fetch('your_sts_server');
        return {
          accessKeyId: info.accessKeyId,
          accessKeySecret: info.accessKeySecret,
          stsToken: info.stsToken
        }
      },
      // The interval for refreshing temporary access credentials, in milliseconds.
      refreshSTSTokenInterval: 300000,
      // The bucket name.
      bucket: 'examplebucket'
  });

Kullanım modları

OSS Browser.js SDK, eşzamanlı ve eşzamansız programlama modellerini destekler. Her iki modelde de new OSS() ile bir istemci örneği oluşturursunuz.

// Create a client instance.
const client = new OSS(...);

async function put () {
  try {
    // The name of the object to upload to OSS.
    // The file to upload from the browser. It can be an HTML5 File or Blob object.
    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();                    

// Create a client instance.
const client = new OSS(...);

// The name of the object to upload to OSS.
// The file to upload from the browser. It can be an HTML5 File or Blob object.
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);
});