Comenzar en el navegador - AWS SDK for JavaScript
El escenarioPaso 1: Crear un grupo de identidades y un rol de Amazon Cognito IAMPaso 2: Añadir una política al IAM rol 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 formulario JavaScript en el SDK 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) de la forma JavaScript, SDK 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 la IAM función de leer desde un bucket de Amazon S3. El ejemplo utiliza la biblioteca front-end React y las herramientas front-end 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 de carga y uso del formulario JavaScript en SDK las aplicaciones web.

Paso 1: Crear un grupo de identidades y un rol de Amazon Cognito 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 ayudar 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 asociado IAM

  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 IAM rol e introduzca un nombre (por ejemplo getStartedRole) en el nombre del IAM rol.

  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. Necesita estos valores para reemplazar IDENTITY_POOL_ID y REGION entrarPaso 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 IAM rol creado

Para habilitar el acceso a un bucket de Amazon S3 en su aplicación web, utilice el IAM rol no autenticado (por ejemplo getStartedRole) creado para su grupo de identidades de Amazon Cognito (por ejemplo,). getStartedPool Esto requiere que adjunte una IAM política al rol. Para obtener más información sobre la modificación de IAM roles, consulte Modificación de la política de permisos de un rol en la Guía del IAM usuario.

Para añadir una política de Amazon S3 al IAM rol asociado a los usuarios no autenticados

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

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

  3. Elija el nombre del rol que desee modificar (por ejemplo, getStartedRole) 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 ReadOnlyAccess.

    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 IAM rol de 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 intercambio 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.

Para 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, selecciona la pestaña Permisos de tu bucket y, a continuación, selecciona Editar en la sección Uso compartido de recursos entre orígenes (CORS). Introduce lo siguiente: JSON

    [
  {
    "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 tu navegador web, navega hasta la imagen que URL 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: