Comenzar en el navegador - AWS SDK for 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 ejemploLimpieza

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

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

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 del uso (V3) del SDK para JavaScript, consulte. SDKpara JavaScript ejemplos de código (v3)

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

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

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

nota

Este ejemplo no se utiliza AWS IAM Identity Center 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 utiliza la biblioteca de interfaz de React y las herramientas de interfaz de usuario de Vite para proporcionar un entorno de desarrollo. JavaScript La aplicación web utiliza un grupo de identidades de Amazon Cognito para proporcionar las credenciales necesarias para acceder AWS a los servicios. El ejemplo de código incluido muestra los patrones básicos para cargar y usar el SDK 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 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 la consola de Amazon Cognito AWS Management Console y ábrala en 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, get StartedRole) en el nombre del rol de IAM.

  6. En Configurar propiedades, introduzca un nombre (por ejemplo, get StartedPool) 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, get StartedRole) creado para su grupo de identidades de Amazon Cognito (por ejemplo, get). StartedPool 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 la consola de IAM AWS Management Console y ábrala en https://console.aws.amazon.com/iam/.

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

  3. Elija el nombre del rol que desee modificar (por ejemplo, get StartedRole) y, a continuación, elija la pestaña Permisos.

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

  5. En la página Añadir permisos para este rol, busque y, a continuación, active la casilla de verificación de AmazonS3 ReadOnly Access.

    nota

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

  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 la consola de Amazon S3 AWS Management Console y ábrala 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 encuentran 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.

Limpieza

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