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. # Comience con el AWS SDK para JavaScript El AWS SDK JavaScript proporciona acceso a los servicios web en un navegador o en un entorno Node.js. En esta sección se incluyen ejercicios de introducción que muestran cómo trabajar con el AWS SDK JavaScript en cada uno de estos JavaScript entornos. **Topics** + [Autenticación del SDK con AWS](getting-your-credentials.md) + [Introducción a Node.js](getting-started-nodejs.md) + [Comenzar en el navegador](getting-started-browser.md) + [Introducción a React Native](getting-started-react-native.md) # Autenticación del SDK con AWS Debes establecer cómo se autentica tu código AWS al desarrollar con Servicios de AWS. Puedes configurar el acceso programático a AWS los recursos de diferentes maneras en función del entorno y del AWS acceso del que dispongas. Para elegir el método de autenticación y configurarlo para el SDK, consulte [Autenticación y acceso](https://docs.aws.amazon.com/sdkref/latest/guide/access.html) en la *Guía de referencia sobre herramientas AWS SDKs y herramientas*. Recomendamos a los nuevos usuarios que desarrollen sus proyectos a nivel local y que no cuenten con un método de autenticación de su empresa para configurarlo AWS IAM Identity Center. Este método incluye la instalación del AWS CLI para facilitar la configuración y para iniciar sesión con regularidad en el portal de AWS acceso. Si elige este método, su entorno debería contener los siguientes elementos después de completar el procedimiento de [autenticación del Centro de Identidad de IAM descrito](https://docs.aws.amazon.com/sdkref/latest/guide/access-sso.html) en la *Guía de referencia de herramientas AWS SDKs y herramientas:* + El AWS CLI, que se utiliza para iniciar una sesión en el portal de AWS acceso antes de ejecutar la aplicación. + Un [archivo `config` compartido de AWS](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html) que tiene un perfil `[default]` con un conjunto de valores de configuración a los que se puede hacer referencia desde el SDK. Para encontrar la ubicación de este archivo, consulte [Ubicación de los archivos compartidos](https://docs.aws.amazon.com/sdkref/latest/guide/file-location.html) en la *Guía de referencia de AWS SDKs and Tools*. + El archivo compartido de `config` establece la configuración de [https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html](https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html). Esto establece el valor predeterminado Región de AWS que el SDK usa para AWS las solicitudes. Esta región se usa para las solicitudes de servicio del SDK que no tienen especificadas una región. + El SDK utiliza la [configuración de proveedor de token de SSO](https://docs.aws.amazon.com/sdkref/latest/guide/feature-sso-credentials.html#feature-sso-credentials-profile) del perfil para adquirir las credenciales antes de enviar las solicitudes a AWS. El `sso_role_name` valor, que es un rol de IAM conectado a un conjunto de permisos del Centro de Identidad de IAM, permite el acceso a los Servicios de AWS utilizados en la aplicación. El siguiente archivo `config` de ejemplo muestra la configuración de un perfil predeterminado con el proveedor de token de SSO. La configuración `sso_session` del perfil hace referencia a la [sección llamada `sso-session`](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html#section-session). La `sso-session` sección contiene la configuración para iniciar una sesión en el portal de AWS acceso. ``` [default] sso_session = my-sso sso_account_id = 111122223333 sso_role_name = SampleRole region = us-east-1 output = json [sso-session my-sso] sso_region = us-east-1 sso_start_url = https://provided-domain.awsapps.com/start sso_registration_scopes = sso:account:access ``` El AWS SDK de la JavaScript versión 3 no necesita que se agreguen paquetes adicionales (por ejemplo, `SSO` y`SSOOIDC`) a la aplicación para utilizar la autenticación del IAM Identity Center. Para obtener más información sobre el uso explícito de este proveedor de credenciales, consulte [https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso](https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso) en el sitio web de npm (administrador de paquetes Node.js). ## Inicie una sesión en el portal de AWS acceso Antes de ejecutar una aplicación para acceder Servicios de AWS, necesita una sesión activa en el portal de AWS acceso para que el SDK utilice la autenticación del IAM Identity Center a fin de resolver las credenciales. En función de la duración de las sesiones configuradas, el acceso terminará por caducar y SDK detectará un error de autenticación. Para iniciar sesión en el portal de AWS acceso, ejecute el siguiente comando en. AWS CLI ``` aws sso login ``` Si sigue la guía y utiliza una configuración de perfil predeterminada, no necesita llamar al comando con una opción `--profile`. Si la configuración del proveedor de token de SSO utiliza un perfil con nombre, el comando es `aws sso login --profile named-profile`. Si lo desea, puede comprobar si ya tiene una sesión activa, ejecute el siguiente AWS CLI comando. ``` aws sts get-caller-identity ``` Si su sesión está activa, la respuesta a este comando debe indicar la cuenta y el conjunto de permisos del Centro de identidades de IAM configurados en el archivo `config` compartido. **nota** Si ya tiene una sesión activa en el portal de AWS acceso y la ejecuta`aws sso login`, no tendrá que proporcionar credenciales. Es posible que el proceso de inicio de sesión le pida que permita el AWS CLI acceso a sus datos. Como AWS CLI se basa en el SDK para Python, los mensajes de permiso pueden contener variaciones del `botocore` nombre. ## Uso de credenciales de inicio de sesión de consola Puede usar sus credenciales de inicio de sesión AWS de Management Console actuales para acceder a AWS los servicios mediante programación. Tras un flujo de autenticación basado en un navegador, AWS genera credenciales temporales que funcionan en todas las herramientas de desarrollo locales, como la AWS CLI y el AWS SDK para. JavaScript Esta función simplifica el proceso de configuración y administración de las credenciales de AWS CLI. Para saber cómo empezar, siga las instrucciones [para iniciar sesión para el desarrollo AWS local con las credenciales de la consola](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-sign-in.html). Al ejecutar el comando **aws login**, puede seleccionar una de las sesiones de consola activas o iniciar sesión mediante el flujo de autenticación basado en el navegador, lo que generará credenciales temporales automáticamente. El AWS SDK actualiza JavaScript automáticamente las credenciales 5 minutos antes de que caduquen, y cada conjunto de credenciales es válido durante un máximo de 12 horas. Para obtener más información, consulte [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials). ## Información adicional de autenticación Los usuarios humanos, que también reciben el nombre de *identidades humanas*, son las personas, los administradores, los desarrolladores, los operadores y los consumidores de las aplicaciones. Deben tener una identidad para acceder a sus AWS entornos y aplicaciones. Los usuarios humanos que son miembros de su organización (es decir, usted, el desarrollador) se conocen como *identidades de personal*. Utilice credenciales temporales al acceder AWS. Puede usar un proveedor de identidad para que sus usuarios humanos proporcionen acceso federado a AWS las cuentas asumiendo funciones, que proporcionan credenciales temporales. Si desea administrar el acceso de manera centralizada, se recomienda utilizar (IAM Identity Center) para administrar el acceso a las cuentas y los permisos de esas cuentas. Para obtener más alternativas, consulte lo siguiente: + Para obtener más información sobre las prácticas recomendadas, consulte [Prácticas recomendadas de seguridad en IAM](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html) en la *Guía del usuario de IAM*. + Para crear AWS credenciales de corta duración, consulte [Credenciales de seguridad temporales](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html) en la Guía del *usuario de IAM*. + Para obtener más información sobre otros proveedores de credenciales AWS del SDK para la JavaScript versión 3, consulte los proveedores de [credenciales estandarizados en la Guía de referencia](https://docs.aws.amazon.com/sdkref/latest/guide/standardized-credentials.html) de herramientas *AWS SDKs y* herramientas. # Introducción a Node.js Esta guía le muestra cómo inicializar un paquete de NPM, agregar un cliente de servicio a su paquete y usar el JavaScript SDK para realizar una acción de servicio. ## El escenario **Cree un nuevo paquete de NPM con un archivo principal que haga lo siguiente:** + Crea un bucket de Amazon Simple Storage Service + Coloca un objeto en el bucket de Amazon S3 + Lee el objeto en el bucket de Amazon S3 + Confirma si el usuario quiere eliminar los recursos ## Requisitos previos Para poder ejecutar el ejemplo, debe hacer lo siguiente: + Configura la autenticación del SDK. Para obtener más información, consulte [Autenticación del SDK con AWS](getting-your-credentials.md). + [Instale Node.js.](https://nodejs.org/en/download) AWS recomienda utilizar la versión Active LTS de Node.js para el desarrollo. ## Paso 1: Configurar la estructura de paquetes e instalar los paquetes de cliente Para configurar la estructura de paquetes e instalar los paquetes de clientes: 1. Cree una nueva carpeta `nodegetstarted` para meter el paquete. 1. Desde la línea de comandos, navegue hasta la nueva carpeta. 1. Ejecute el siguiente comando para crear un archivo `package.json` predeterminado: ``` npm init -y ``` 1. Para instalar el paquete de cliente de AMazon S3, ejecute el comando siguiente: ``` npm i @aws-sdk/client-s3 ``` 1. Añada `"type": "module"` al archivo `package.json`. Esto le indica a Node.js que utilice la sintaxis ESM moderna. El `package.json` final debe ser similar al siguiente: ``` { "name": "example-javascriptv3-get-started-node", "version": "1.0.0", "description": "This guide shows you how to initialize an NPM package, add a service client to your package, and use the JavaScript SDK to call a service action.", "main": "index.js", "scripts": { "test": "vitest run **/*.unit.test.js" }, "author": "Your Name", "license": "Apache-2.0", "dependencies": { "@aws-sdk/client-s3": "^3.420.0" }, "type": "module" } ``` ## Paso 2: Agregar las importaciones y el código de SDK necesarios Agregue el siguiente código a un archivo llamado `index.js` en la carpeta `nodegetstarted`. ``` // This is used for getting user input. import { createInterface } from "node:readline/promises"; import { S3Client, PutObjectCommand, CreateBucketCommand, DeleteObjectCommand, DeleteBucketCommand, paginateListObjectsV2, GetObjectCommand, } from "@aws-sdk/client-s3"; export async function main() { // A region and credentials can be declared explicitly. For example // `new S3Client({ region: 'us-east-1', credentials: {...} })` would //initialize the client with those settings. However, the SDK will // use your local configuration and credentials if those properties // are not defined here. const s3Client = new S3Client({}); // Create an Amazon S3 bucket. The epoch timestamp is appended // to the name to make it unique. const bucketName = `test-bucket-${Date.now()}`; await s3Client.send( new CreateBucketCommand({ Bucket: bucketName, }), ); // Put an object into an Amazon S3 bucket. await s3Client.send( new PutObjectCommand({ Bucket: bucketName, Key: "my-first-object.txt", Body: "Hello JavaScript SDK!", }), ); // Read the object. const { Body } = await s3Client.send( new GetObjectCommand({ Bucket: bucketName, Key: "my-first-object.txt", }), ); console.log(await Body.transformToString()); // Confirm resource deletion. const prompt = createInterface({ input: process.stdin, output: process.stdout, }); const result = await prompt.question("Empty and delete bucket? (y/n) "); prompt.close(); if (result === "y") { // Create an async iterator over lists of objects in a bucket. const paginator = paginateListObjectsV2( { client: s3Client }, { Bucket: bucketName }, ); for await (const page of paginator) { const objects = page.Contents; if (objects) { // For every object in each page, delete it. for (const object of objects) { await s3Client.send( new DeleteObjectCommand({ Bucket: bucketName, Key: object.Key }), ); } } } // Once all the objects are gone, the bucket can be deleted. await s3Client.send(new DeleteBucketCommand({ Bucket: bucketName })); } } // Call a function if this file was run directly. This allows the file // to be runnable without running on import. import { fileURLToPath } from "node:url"; if (process.argv[1] === fileURLToPath(import.meta.url)) { main(); } ``` El código de ejemplo se puede encontrar [aquí en GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/index.js). ## Paso 3: Ejecutar el ejemplo **nota** ¡Recuerde iniciar sesión\$1 Si utiliza el Centro de identidad de IAM para autenticarse, recuerde iniciar sesión con el AWS CLI `aws sso login` comando. 1. Ejecute `node index.js`. 1. Indique si quiere vaciar y eliminar el bucket. 1. Si no elimina el bucket, asegúrese de vaciarlo manualmente y eliminarlo más adelante. # 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*). # Introducción a React Native En este tutorial, se muestra cómo crear una aplicación React Native mediante la [CLI de React Native](https://reactnative.dev/docs/environment-setup). ![\[JavaScript code example that applies to React Native.\]](http://docs.aws.amazon.com/es_es/sdk-for-javascript/v3/developer-guide/images/browsericon.png) **Este tutorial muestra:** + Cómo instalar e incluir el AWS SDK para los módulos de la JavaScript versión 3 (V3) que utiliza tu proyecto. + Cómo escribir código que se conecte a Amazon Simple Storage Service (Amazon S3) para crear y eliminar un bucket de Amazon S3. ## El escenario Amazon S3 es un servicio en la nube que le permite almacenar y recuperar cualquier cantidad de datos en cualquier momento y desde cualquier lugar de la web. React Native es un marco de desarrollo que le permite crear aplicaciones móviles. En este tutorial, se muestra cómo crear una aplicación React Native que se conecte a Amazon S3 para crear y eliminar un bucket de Amazon S3. La aplicación usa el siguiente AWS SDK para JavaScript APIs: + Constructor de [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/) + Constructor de [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/) ## Tareas previas necesarias **nota** Si ya ha completado alguno de los siguientes pasos a través de otros tutoriales o una configuración ya existente, omita esos pasos. Esta sección proporciona la configuración mínima necesaria para completar este tutorial. No debería tomarse esto como una configuración completa. Para una configuración completa, vaya a [Configurar el SDK para JavaScript](setting-up.md). + Instale las siguientes herramientas: + [npm](https://docs.npmjs.com/getting-started/) + [Node.js](https://nodejs.org/en/download/) + [Xcode](https://developer.apple.com/xcode/) si está probando en iOS + [Android Studio](https://developer.android.com/studio/) si está probando en Android + Configure su [entorno de desarrollo de React Native](https://reactnative.dev/docs/environment-setup) + Configure el entorno del proyecto para ejecutar estos TypeScript ejemplos de Node e instale el AWS SDK necesario para los módulos de terceros JavaScript y los de terceros. Siga las instrucciones de [ GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/README.md). + Debes establecer cómo se autentica tu código AWS al desarrollar con AWS servicios. Para obtener más información, consulte [Autenticación del SDK con AWS](getting-your-credentials.md). **nota** La función de IAM de este ejemplo debe configurarse para utilizar los permisos de **FullAccessAmazonS3**. ## Paso 1: Creación de un grupo de identidades en Amazon Cognito En este ejercicio, deberá crear y utilizar un grupo de identidades de Amazon Cognito para proporcionar acceso sin autenticar a su aplicación para el servicio de Amazon S3. Al crear un grupo de identidades, también se crean dos funciones AWS Identity and Access Management (IAM), una para dar soporte a los usuarios autenticados por un proveedor de identidades y otra para admitir a los usuarios invitados no autenticados. En este ejercicio, 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. **Cómo crear un grupo de identidades de Amazon Cognito** 1. Inicie sesión en la consola de Amazon Cognito Consola de administración de AWS y ábrala en [Amazon Web Services](https://console.aws.amazon.com/cognito/) Console. 1. Elija **Grupos de identidades** en la página de inicio de la consola. 1. En la página siguiente, seleccione **Create new identity pool (Crear nuevo grupo de identidades)**. **nota** Si no hay otros grupos de identidades, la consola de Amazon Cognito omitirá esta página y abrirá en su lugar la página siguiente. 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, *getStartedReactrol) en el nombre del rol* de **IAM**. 1. En **Configurar propiedades**, introduzca un nombre (por ejemplo, *getStartedReactgrupo) 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. Anote el ID del grupo de identidades y la región de este grupo de identidades recién creado. Necesita estos valores para reemplazar *region* y *identityPoolId* en el script de su 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 aplicación React Native. ## Paso 2: Añadir una política al rol de IAM creado Para habilitar el acceso del script del navegador a Amazon S3 con el fin de crear y eliminar un bucket de Amazon S3, utilice el rol de IAM sin autenticar creado para su grupo de identidades de Amazon Cognito. Para ello tiene que añadir una política de IAM al rol. Para obtener más información sobre las funciones de IAM, consulte [Creación de una función para delegar permisos a un AWS servicio](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) 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 crear la aplicación. ## Paso 3: Crea una aplicación usando create-react-native-app Cree una aplicación React Native ejecutando el siguiente comando. ``` npx react-native init ReactNativeApp --npm ``` ## Paso 4: Instalación del paquete de Amazon S3 y otras dependencias En el directorio del proyecto, ejecute los siguientes comandos para instalar el paquete de Amazon S3. ``` npm install @aws-sdk/client-s3 ``` Este comando instala el paquete de Amazon S3 en su proyecto y actualiza `package.json` para incluir Amazon S3 como dependencia del proyecto. Puede encontrar información sobre este paquete buscando “@aws-sdk” en el sitio web de npm [https://www.npmjs.com/](https://www.npmjs.com/). Estos paquetes y su código asociado se instalan en el subdirectorio `node_modules` del proyecto. Para obtener más información acerca de la instalación de paquetes de Node.js, consulte las secciones [Descarga e instalación de paquetes a nivel local](https://docs.npmjs.com/downloading-and-installing-packages-locally) y [Creación de módulos de Node.js](https://docs.npmjs.com/creating-node-js-modules) en el [sitio web de npm (administrador de paquetes de Node.js)](https://www.npmjs.com/). Para obtener información sobre cómo descargar e instalar el AWS SDK para JavaScript, consulte[Instale el SDK para JavaScript](setting-up.md#installing-jssdk). Instale las demás dependencias necesarias para la autenticación. ``` npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity ``` ## Paso 5: Escritura del código de React Native Añada el siguiente código al `App.tsx`. Sustituya *identityPoolId* y *region* por el ID del grupo de identidades y la región en la que se creará el bucket de Amazon S3. ``` import React, { useCallback, useState } from "react"; import { Button, StyleSheet, Text, TextInput, View } from "react-native"; import "react-native-get-random-values"; import "react-native-url-polyfill/auto"; import { S3Client, CreateBucketCommand, DeleteBucketCommand, } from "@aws-sdk/client-s3"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers"; const client = new S3Client({ // The AWS Region where the Amazon Simple Storage Service (Amazon S3) bucket will be created. Replace this with your Region. region: "us-east-1", credentials: fromCognitoIdentityPool({ // Replace the value of 'identityPoolId' with the ID of an Amazon Cognito identity pool in your Amazon Cognito Region. identityPoolId: "us-east-1:edbe2c04-7f5d-469b-85e5-98096bd75492", // Replace the value of 'region' with your Amazon Cognito Region. clientConfig: { region: "us-east-1" }, }), }); enum MessageType { SUCCESS = 0, FAILURE = 1, EMPTY = 2, } const App = () => { const [bucketName, setBucketName] = useState(""); const [msg, setMsg] = useState<{ message: string; type: MessageType }>({ message: "", type: MessageType.EMPTY, }); const createBucket = useCallback(async () => { setMsg({ message: "", type: MessageType.EMPTY }); try { await client.send(new CreateBucketCommand({ Bucket: bucketName })); setMsg({ message: `Bucket "${bucketName}" created.`, type: MessageType.SUCCESS, }); } catch (e) { console.error(e); setMsg({ message: e instanceof Error ? e.message : "Unknown error", type: MessageType.FAILURE, }); } }, [bucketName]); const deleteBucket = useCallback(async () => { setMsg({ message: "", type: MessageType.EMPTY }); try { await client.send(new DeleteBucketCommand({ Bucket: bucketName })); setMsg({ message: `Bucket "${bucketName}" deleted.`, type: MessageType.SUCCESS, }); } catch (e) { setMsg({ message: e instanceof Error ? e.message : "Unknown error", type: MessageType.FAILURE, }); } }, [bucketName]); return ( {msg.type !== MessageType.EMPTY && ( {msg.message} )} setBucketName(text)} autoCapitalize={"none"} value={bucketName} placeholder={"Enter Bucket Name"} />