La [Guía de referencia de la API de AWS SDK for JavaScript V3](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) describe en detalle todas las operaciones de la API para la versión 3 (V3) de AWS SDK for JavaScript.
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 AWS 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](welcome.md#v3_browsers).
Para ver otros ejemplos del uso (V3) del AWS SDK para JavaScript, consulte. [Ejemplos de código de SDK para JavaScript (v3)](javascript_code_examples.md)
**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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/).
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 AWS 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](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html) 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 Consola de administración de AWS y ábrala en. [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/)
1. En el panel de navegación de la izquierda, elija **Grupos de identidades**.
1. Elija **Crear grupo de identidades**.
1. En **Configurar la confianza del grupo de identidades**, elija **Acceso de invitado** para la autenticación de usuario.
1. En **Configurar permisos**, elija **Crear un nuevo rol de IAM** e introduzca un nombre (por ejemplo *getStartedRole*) en el nombre del rol de **IAM**.
1. En **Configurar propiedades**, introduzca un nombre (por ejemplo, *getStartedPool*) en el nombre del **grupo de identidades**.
1. 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**.
1. 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\$1POOL\$1ID* y *REGION* entrar[Paso 4: Configurar el código del navegador](#getting-started-browser-create-html).
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](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy) 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 Consola de administración de AWS y ábrala en. [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)
1. En el panel de navegación izquierdo, elija **Roles**.
1. Elija el nombre del rol que desee modificar (por ejemplo, *getStartedRole*) y, a continuación, elija la pestaña **Permisos**.
1. Elija **Agregar permisos** y luego **Adjuntar políticas**.
1. 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.
1. 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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html) 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 Consola de administración de AWS y ábrala en [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/).
1. En el panel de navegación de la izquierda, elija **Buckets** y, a continuación, seleccione **Crear bucket**.
1. Introduzca un nombre de bucket que se ajuste a las [reglas de denominación de buckets](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html) (por ejemplo, *getstartedbucket*) y seleccione **Crear bucket**.
1. Elija el bucket que ha creado y, a continuación, seleccione la pestaña **Objetos**. A continuación, elija **Cargar**.
1. En **Archivos y carpetas**, elija **Añadir archivos**.
1. Seleccione un archivo que cargar y luego seleccione **Abrir**. A continuación, seleccione **Cargar** para completar la carga del objeto a su bucket.
1. 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": []
}
]
```
1. 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](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/web/s3/list-objects).
**Configurar la aplicación de ejemplo**
1. Instale [Node.js](https://nodejs.org/en/download).
1. Desde la línea de comandos, clone el [Repositorio de ejemplos de código de AWS](https://github.com/awsdocs/aws-doc-sdk-examples/):
```
git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git
```
1. Desplácese hasta la aplicación de ejemplo:
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. Para instalar los paquetes necesarios, ejecute el comando siguiente:
```
npm install
```
1. A continuación, abra `src/App.tsx` en un editor de texto y haga lo siguiente:
+ *YOUR\$1IDENTITY\$1POOL\$1ID*Sustitúyalo por el ID del grupo de identidades de Amazon Cognito que has indicado. [Paso 1: Crear un grupo de identidades de Amazon Cognito y un rol de IAM](#getting-started-browser-create-identity-pool)
+ Sustituya el valor de la región por la región asignada a su bucket de Amazon S3 y al grupo de identidades de Amazon Cognito. Tenga en cuenta que las regiones de ambos servicios tienen que ser las mismas (por ejemplo, *us-east-2*).
+ *bucket-name*Sustitúyalo por el nombre del bucket en [Paso 3: Agregar un bucket y un objeto de Amazon S3](#getting-started-browser-create-s3-bucket) el que lo creaste.
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/
```
1. 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
```
1. 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:
+ En [la consola Amazon S3](https://console.aws.amazon.com/s3/), elimine todos los objetos y buckets creados (por ejemplo, *getstartedbucket*).
+ En [la consola de IAM](https://console.aws.amazon.com/iam/home#/roles), elimine el nombre del rol (por ejemplo, *getStartedRole*).
+ En [la consola de Amazon Cognito](https://console.aws.amazon.com/cognito/home#/identity), elimine el nombre del grupo de identidades (por ejemplo, *getStartedPool*).