Object Storage Service:Install the OSS Browser.js SDK

Requisitos previos

• Uso de un usuario de RAM o STS para el acceso

  El par de AccessKey de su cuenta de Alibaba Cloud otorga acceso completo a todas las API. Como práctica recomendada de seguridad, se desaconseja encarecidamente utilizar su par de AccessKey directamente. Para aplicaciones del lado del servidor, puede usar un usuario de RAM o STS para el acceso a la API y las operaciones rutinarias. En el caso de aplicaciones del lado del cliente, es obligatorio usar STS para acceder a la API. Para obtener más información, consulte access control.

• Configuración del intercambio de recursos de origen cruzado (CORS)

  Cuando accede a OSS directamente desde un navegador, debe configurar reglas de CORS para su bucket de la siguiente manera:

  • Origin: Especifique un nombre de dominio exacto, como https://www.aliyun.com, o un nombre de dominio que incluya el carácter comodín asterisco (*), como https://*.aliyun.com.

  • Allowed Methods: Seleccione los métodos según su caso de uso. Por ejemplo, seleccione PUT para cargas multiparte y DELETE para eliminar objetos.

  • Allowed Headers: Establezca este valor en *.

  • Exposed Headers: Configure los encabezados según su caso de uso. Por ejemplo, podría necesitar exponer ETag, x-oss-request-id y x-oss-version-id.

  

  Para obtener más información, consulte Configure CORS.

Limitaciones

El SDK de OSS para Browser.js utiliza Browserify y Babel para generar código compatible con navegadores. Debido a las limitaciones del entorno del navegador, las siguientes funciones no son compatibles:

• Carga mediante streaming: No es posible configurar la codificación por fragmentos en un navegador. Utilice la carga multiparte en su lugar.

• Operaciones con archivos locales: No se puede acceder directamente al sistema de archivos local desde un navegador. Utilice URL firmadas para descargar objetos.

• OSS no admite solicitudes de origen cruzado relacionadas con buckets. Realice las operaciones relacionadas con buckets en la consola.

Descarga del SDK

Los ejemplos de la documentación oficial se basan en el SDK v6.x. Para versiones anteriores a la 6.x, consulte la documentación de desarrollo 5.x. Para actualizar a la versión 6.x, consulte la guía de actualización.

• Repositorio de GitHub

• Operaciones de la API

• Registro de cambios

Instalación del SDK

• Navegadores compatibles

  • Internet Explorer 10 y posteriores

  • Edge

  • Versiones principales de Chrome, Firefox y Safari

  • Navegadores predeterminados en versiones principales de Android, iOS y Windows Phone

• Métodos de instalación

  Puede instalar el SDK de OSS para Browser.js de una de las siguientes maneras.

  Importación en un navegador

  Importante

  Algunos navegadores, como Internet Explorer 10 y 11, no admiten Promises de forma nativa. Debe incluir una biblioteca polyfill de Promise, como promise-polyfill.

  <!-- 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>

  Nota

  • La importación desde una CDN depende de la estabilidad del servidor de la CDN. Se recomienda importar el SDK desde un archivo local o compilarlo usted mismo.

  • Cuando importe desde un archivo local, establezca el atributo src en la ruta relativa del archivo.

  • Este tema utiliza la versión 6.20.0 como ejemplo. Para consultar otras versiones, visite ali-oss.

  Utilice el objeto OSS en su código:

  Importante

  El SDK de OSS para Browser.js suele ejecutarse en un entorno de navegador. Para evitar exponer el par de AccessKey de su cuenta de Alibaba Cloud (AccessKey ID y AccessKey secret), se recomienda encarecidamente utilizar credenciales de acceso temporales para las operaciones de OSS.

  Las credenciales de acceso temporales incluyen un par de AccessKey temporal (AccessKey ID y AccessKey secret) y un token de seguridad. Puede obtener credenciales de acceso temporales llamando a la operación AssumeRole de STS o utilizando STS SDKs for various programming languages. Para obtener información sobre cómo crear un servicio de STS, consulte Use temporary access credentials provided by STS to access OSS.

  <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>                           

  Instalación con npm

  npm install ali-oss

  Después de la instalación, puede importar el paquete mediante import o require. Dado que los navegadores no admiten de forma nativa el formato de módulo require, debe utilizar un empaquetador, como webpack o browserify, en su entorno de desarrollo.

  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'
  });

Modos de uso

El SDK de OSS para Browser.js admite modelos de programación síncrona y asíncrona. En ambos modelos, se crea una instancia de cliente con new OSS().

// 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);
});