Comenzar en el navegador - AWS SDK para JavaScript
El escenarioPaso 1: Crear un grupo de identidades de Amazon Cognito y un rol de IAMPaso 2: Añadir una política al rol de IAM creadoPaso 3: Agregar un bucket y un objeto de Amazon S3Paso 4: Configurar el código del navegadorPaso 5: Ejecución del ejemploEliminación

La Guía de referencia de la API de AWS SDK for JavaScript V3 describe en detalle todas las operaciones de la API para la versión 3 (V3) de AWS SDK for JavaScript.

Comenzar en el navegador

En esta sección, se muestra un ejemplo que muestra cómo ejecutar la versión 3 (V3) del SDK para JavaScript en el navegador.

nota

La ejecución de la V3 en el navegador es ligeramente diferente de la versión 2 (V2). Para obtener más información, consulte Uso de navegadores en la versión 3.

Para ver otros ejemplos de uso (V3) del SDK para JavaScript, consulte Ejemplos de código de SDK para JavaScript (v3).

En este ejemplo de aplicación web se muestra lo siguiente:

  • Cómo acceder a los servicios de AWS con Amazon Cognito para la autenticación.

  • Cómo leer una lista de objetos de un bucket de Amazon Simple Storage Service (Amazon S3) con un rol de AWS Identity and Access Management (IAM).

nota

Este ejemplo no utiliza AWS Single Sign-On para la autenticación.

El escenario

Amazon S3 es un servicio de almacenamiento de objetos que ofrece escalabilidad, disponibilidad de datos, seguridad y rendimiento líderes del sector. Puede utilizar Amazon S3 para almacenar datos en forma de objetos dentro de contenedores denominados buckets. Para obtener más información sobre Amazon S3, consulte la Guía del usuario de Amazon S3.

En este ejemplo, se muestra cómo configurar y ejecutar una aplicación web que asume un rol de IAM para leer desde un bucket de Amazon S3. El ejemplo usa la biblioteca front-end React y las herramientas front-end Vite para proporcionar un entorno de desarrollo de JavaScript. La aplicación web utiliza un grupo de identidades de Amazon Cognito para proporcionar credenciales necesarias para acceder a los servicios de AWS. El ejemplo de código incluido muestra los patrones básicos para cargar y usar el SDK para JavaScript en aplicaciones web.

Paso 1: Crear un grupo de identidades de Amazon Cognito y un rol de IAM

En este ejercicio, deberá crear y utilizar un grupo de identidades de Amazon Cognito para proporcionar acceso sin autenticar a su app web para el servicio de Amazon S3. Al crear un grupo de identidades, también se crea un rol de AWS Identity and Access Management (IAM) para dar soporte a los usuarios invitados no autenticados. Para este ejemplo, vamos a trabajar con el rol de usuario sin autenticar para concentrarnos en la tarea. Puede integrar la compatibilidad con un proveedor de identidades y los usuarios autenticados más adelante. Para obtener más información sobre como añadir un grupo de identidades de Amazon Cognito, consulte Tutorial: Crear un grupo de identidades en la Guía para desarrolladores de Amazon Cognito.

Para crear un grupo de identidades de Amazon Cognito y un rol de IAM asociado

  1. Inicie sesión en AWS Management Console y abra la consola Amazon Cognito desde https://console.aws.amazon.com/cognito/.

  2. En el panel de navegación de la izquierda, elija Grupos de identidades.

  3. Elija Crear grupo de identidades.

  4. En Configurar la confianza del grupo de identidades, elija Acceso de invitado para la autenticación de usuario.

  5. En Configurar permisos, elija Crear un nuevo rol de IAM e introduzca un nombre (por ejemplo, GetStartedRole) en el nombre del rol de IAM.

  6. En Configurar propiedades, introduzca un nombre (por ejemplo, getStartedPool) en el nombre del grupo de identidades.

  7. En Revisar y crear, confirme las selecciones que realizó para el nuevo grupo de identidades. Seleccione Editar para volver al asistente y cambiar cualquier configuración. Cuando haya acabado, seleccione Crear grupo de identidades.

  8. Tenga en cuenta el ID del grupo de identidades y la Región del grupo de identidades de Amazon Cognito recién creado. Necesitará estos valores para sustituir IDENTITY_POOL_ID y REGION en Paso 4: Configurar el código del navegador.

Después de crear el grupo de identidades de Amazon Cognito, ya estará listo para añadir los permisos para Amazon S3 que necesita su app web.

Paso 2: Añadir una política al rol de IAM creado

Para habilitar el acceso a un bucket de Amazon S3 en su aplicación web, utilice el rol de IAM no autenticado (por ejemplo, getStartedRole) creado para su grupo de identidades de Amazon Cognito (por ejemplo, getStartedPool). Para ello, deberá adjuntar una política de IAM al rol. Para obtener más información acerca de cómo modificar roles de IAM, consulte la política Modificación de los permisos de un rol en la Guía del usuario de IAM.

Añadir una política de Amazon S3 al rol de IAM asociado a usuarios sin autenticar

  1. Inicie sesión en AWS Management Console y abra la consola IAM en https://console.aws.amazon.com/iam/.

  2. En el panel de navegación izquierdo, elija Roles.

  3. Elija el nombre del rol que desea modificar (por ejemplo, getStartedRole) y, a continuación, seleccione la pestaña Permisos.

  4. Elija Agregar permisos y luego Adjuntar políticas.

  5. En la página Añadir permisos de este rol, busque y luego seleccione la casilla de verificación de AmazonS3ReadOnlyAccess.

    nota

    Puede utilizar este proceso para habilitar el acceso a cualquier servicio de AWS.

  6. Elija Añadir permisos.

Tras crear su grupo de identidades de Amazon Cognito y añadir permisos para Amazon S3 a su rol de IAM para usuarios no autenticados, estará listo para añadir y configurar un bucket de Amazon S3.

Paso 3: Agregar un bucket y un objeto de Amazon S3

En este paso, agregará un bucket y un objeto de Amazon S3 para el ejemplo. También habilitará el uso compartido de recursos entre orígenes (CORS) para el bucket. Para obtener más información acerca de la creación de buckets y objetos de Amazon S3, consulte la Introducción a Amazon S3 en la Guía del usuario de Amazon S3.

Añadir un bucket y un objeto de Amazon S3 con CORS

  1. Inicie sesión en AWS Management Console y abra la consola Amazon S3 en https://console.aws.amazon.com/s3/.

  2. En el panel de navegación de la izquierda, elija Buckets y, a continuación, seleccione Crear bucket.

  3. Introduzca un nombre de bucket que se ajuste a las reglas de denominación de buckets (por ejemplo, getstartedbucket) y seleccione Crear bucket.

  4. Elija el bucket que ha creado y, a continuación, seleccione la pestaña Objetos. A continuación, elija Cargar.

  5. En Archivos y carpetas, elija Añadir archivos.

  6. Seleccione un archivo que cargar y luego seleccione Abrir. A continuación, seleccione Cargar para completar la carga del objeto a su bucket.

  7. A continuación, seleccione la pestaña Permisos de su bucket y, posteriormente, seleccione Editar en la sección Uso compartido de recursos entre orígenes (CORS). Introduzca el JSON siguiente:

    [
  {
    "AllowedHeaders": [
      "*"
    ],
    "AllowedMethods": [
      "GET"
    ],
    "AllowedOrigins": [
      "*"
    ],
    "ExposeHeaders": []
  }
]

  8. Elija Guardar cambios.

Tras añadir un bucket de Amazon S3 y un objeto, estará listo para configurar el código del navegador.

Paso 4: Configurar el código del navegador

La aplicación de ejemplo consiste en una aplicación React de una sola página. Los archivos de este ejemplo se pueden encontrar aquí en GitHub.

Configurar la aplicación de ejemplo

  1. Instale Node.js.

  2. Desde la línea de comandos, clone el Repositorio de ejemplos de código de AWS:

    git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git

  3. Desplácese hasta la aplicación de ejemplo:

    cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/

  4. Para instalar los paquetes necesarios, ejecute el comando siguiente:

    npm install

  5. A continuación, abra src/App.tsx en un editor de texto y haga lo siguiente:

Una vez que haya reemplazado el texto, guarde el archivo App.tsx. Ya tiene todo listo para ejecutar la aplicación web.

Paso 5: Ejecución del ejemplo

Ejecutar la aplicación de ejemplo

  1. Desde la línea de comandos, navegue hasta la aplicación de ejemplo:

    cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/

  2. Desde la línea de comandos, ejecute el comando siguiente:

    npm run dev

    El entorno de desarrollo de Vite se ejecutará con el siguiente mensaje:

    VITE v4.3.9  ready in 280 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

  3. En el navegador web, vaya a la URL que se muestra arriba (por ejemplo, http://localhost:5173). La aplicación de ejemplo le mostrará una lista de nombres de archivos de objetos de su bucket de Amazon S3.

Eliminación

Para limpiar los recursos que ha creado en este tutorial, haga lo siguiente: