Le [guide de référence de l'API AWS SDK pour JavaScript V3](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) décrit en détail toutes les opérations de l'API pour la AWS SDK pour JavaScript version 3 (V3). Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra. # Commencez avec le AWS SDK pour JavaScript Le AWS SDK pour JavaScript permet d'accéder aux services Web dans un navigateur ou dans un environnement Node.js. Cette section contient des exercices de démarrage qui vous montrent comment utiliser le AWS SDK JavaScript dans chacun de ces JavaScript environnements. **Topics** + [Authentification du SDK avec AWS](getting-your-credentials.md) + [Commencez avec Node.js](getting-started-nodejs.md) + [Commencez dans le navigateur](getting-started-browser.md) + [Commencer à utiliser React Native](getting-started-react-native.md) # Authentification du SDK avec AWS Vous devez définir la manière dont votre code s'authentifie AWS lorsque vous développez avec Services AWS. Vous pouvez configurer l'accès programmatique aux AWS ressources de différentes manières en fonction de l'environnement et de l' AWS accès dont vous disposez. Pour choisir votre méthode d'authentification et la configurer pour le SDK, consultez la section [Authentification et accès](https://docs.aws.amazon.com/sdkref/latest/guide/access.html) dans le *guide de référence des outils AWS SDKs et*. Nous recommandons aux nouveaux utilisateurs qui se développent localement et qui n'ont pas reçu de méthode d'authentification de la part de leur employeur de les configurer AWS IAM Identity Center. Cette méthode inclut l'installation AWS CLI pour faciliter la configuration et pour vous connecter régulièrement au portail AWS d'accès. Si vous choisissez cette méthode, votre environnement doit contenir les éléments suivants une fois que vous avez terminé la procédure d'[authentification IAM Identity Center décrite](https://docs.aws.amazon.com/sdkref/latest/guide/access-sso.html) dans le *guide de référence AWS SDKs and Tools :* + Le AWS CLI, que vous utilisez pour démarrer une session de portail d' AWS accès avant d'exécuter votre application. + [AWS`config`Fichier partagé doté](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html) d'un `[default]` profil avec un ensemble de valeurs de configuration pouvant être référencées à partir du SDK. Pour connaître l'emplacement de ce fichier, reportez-vous à la section [Emplacement des fichiers partagés](https://docs.aws.amazon.com/sdkref/latest/guide/file-location.html) dans le *Guide de référence des outils AWS SDKs et*. + Le `config` fichier partagé définit le [https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html](https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html)paramètre. Cela définit la valeur par défaut Région AWS que le SDK utilise pour les AWS demandes. Cette région est utilisée pour les demandes de service du SDK qui ne sont pas spécifiées avec une région à utiliser. + Le SDK utilise la [configuration du fournisseur de jetons SSO](https://docs.aws.amazon.com/sdkref/latest/guide/feature-sso-credentials.html#feature-sso-credentials-profile) du profil pour obtenir des informations d'identification avant d'envoyer des demandes à. AWS La `sso_role_name` valeur, qui est un rôle IAM connecté à un ensemble d'autorisations IAM Identity Center, permet d'accéder à l'utilisateur Services AWS dans votre application. Le `config` fichier d'exemple suivant montre un profil par défaut configuré avec la configuration du fournisseur de jetons SSO. Le `sso_session` paramètre du profil fait référence à la [`sso-session`section](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html#section-session) nommée. La `sso-session` section contient les paramètres permettant de lancer une session sur le portail AWS d'accès. ``` [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 ``` Le AWS SDK pour la JavaScript version 3 n'a pas besoin de packages supplémentaires (tels que `SSO` et`SSOOIDC`) à ajouter à votre application pour utiliser l'authentification IAM Identity Center. Pour plus de détails sur l'utilisation explicite de ce fournisseur d'informations d'identification, consultez [https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso](https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso)le site Web npm (gestionnaire de packages Node.js). ## Démarrer une session sur le portail AWS d'accès Avant d'exécuter une application qui y accède Services AWS, vous avez besoin d'une session de portail d' AWS accès active pour que le SDK utilise l'authentification IAM Identity Center pour résoudre les informations d'identification. En fonction de la durée de session que vous avez configurée, votre accès finira par expirer et le SDK rencontrera une erreur d'authentification. Pour vous connecter au portail AWS d'accès, exécutez la commande suivante dans le AWS CLI. ``` aws sso login ``` Si vous avez suivi les instructions et que vous avez configuré un profil par défaut, il n'est pas nécessaire d'appeler la commande avec une `--profile` option. Si la configuration de votre fournisseur de jetons SSO utilise un profil nommé, la commande est `aws sso login --profile named-profile`. Pour éventuellement vérifier si vous avez déjà une session active, exécutez la AWS CLI commande suivante. ``` aws sts get-caller-identity ``` Si votre session est active, la réponse à cette commande indique le compte IAM Identity Center et l'ensemble d'autorisations configurés dans le `config` fichier partagé. **Note** Si vous disposez déjà d'une session active sur le portail AWS d'accès et que vous l'exécutez`aws sso login`, il ne vous sera pas demandé de fournir des informations d'identification. Le processus de connexion peut vous demander d'autoriser l' AWS CLI accès à vos données. Comme AWS CLI il repose sur le SDK pour Python, les messages d'autorisation peuvent contenir des variantes du `botocore` nom. ## Utilisation des informations de connexion à la console Vous pouvez utiliser vos identifiants de connexion existants à la console de AWS gestion pour accéder aux AWS services par programmation. Après un flux d'authentification basé sur un navigateur, AWS génère des informations d'identification temporaires qui fonctionnent avec les outils de développement locaux tels que la AWS CLI et le AWS SDK pour. JavaScript Cette fonctionnalité simplifie le processus de configuration et de gestion des informations d'identification de la AWS CLI. Pour savoir comment démarrer, suivez les instructions de [connexion pour le développement AWS local à l'aide des informations d'identification de la console](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-sign-in.html). Lorsque vous exécutez la **aws login** commande, vous pouvez effectuer une sélection parmi vos sessions de console actives ou vous connecter via le flux d'authentification basé sur le navigateur, ce qui générera automatiquement des informations d'identification temporaires. Le AWS SDK actualise JavaScript automatiquement les informations d'identification 5 minutes avant leur expiration, chaque ensemble d'informations d'identification étant valide pendant 12 heures au maximum. Pour de plus amples informations, veuillez consulter [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). ## Plus d'informations d'authentification Les utilisateurs humains, également connus sous le nom *identités humaines, * sont les personnes, les administrateurs, les développeurs, les opérateurs et les consommateurs de vos applications. Ils doivent disposer d'une identité pour accéder à vos AWS environnements et applications. Les utilisateurs humains membres de votre organisation, c'est-à-dire vous, le développeur, sont appelés *identités du personnel*. Utilisez des informations d'identification temporaires lors de l'accès AWS. Vous pouvez utiliser un fournisseur d'identité pour vos utilisateurs humains afin de fournir un accès fédéré aux AWS comptes en assumant des rôles fournissant des informations d'identification temporaires. Pour une gestion centralisée des accès, nous vous recommandons d'utiliser AWS IAM Identity Center (IAM Identity Center) pour gérer l'accès à vos comptes et les autorisations associées à ces comptes. Pour d'autres alternatives, consultez les rubriques suivantes : + Pour en savoir plus sur les bonnes pratiques, consultez [Bonnes pratiques de sécurité dans IAM](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html) dans le *Guide de l'utilisateur IAM*. + Pour créer des AWS informations d'identification à court terme, consultez la section [Informations d'identification de sécurité temporaires](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html) dans le *guide de l'utilisateur IAM*. + Pour en savoir plus sur les autres fournisseurs de AWS SDK pour les fournisseurs d'informations d'identification JavaScript V3, consultez la section Fournisseurs [d'informations d'identification standardisés dans le guide](https://docs.aws.amazon.com/sdkref/latest/guide/standardized-credentials.html) de référence *AWS SDKs and* Tools. # Commencez avec Node.js Ce guide explique comment initialiser un package NPM, ajouter un client de service à votre package et utiliser le JavaScript SDK pour appeler une action de service. ## Le scénario **Créez un nouveau package NPM avec un fichier principal qui effectue les opérations suivantes :** + Crée un bucket Amazon Simple Storage Service + Place un objet dans le compartiment Amazon S3 + Lit l'objet dans le compartiment Amazon S3 + Confirme si l'utilisateur souhaite supprimer des ressources ## Conditions préalables Avant de pouvoir exécuter cet exemple, vous devez effectuer les opérations suivantes : + Configurez l'authentification de votre SDK. Pour de plus amples informations, veuillez consulter [Authentification du SDK avec AWS](getting-your-credentials.md). + Installez [Node.js](https://nodejs.org/en/download). AWS recommande d'utiliser la version Active LTS de Node.js pour le développement. ## Étape 1 : Configuration de la structure des packages et installation des packages clients Pour configurer la structure des packages et installer les packages clients : 1. Créez un nouveau dossier `nodegetstarted` pour contenir le package. 1. À partir de la ligne de commande, accédez au nouveau dossier. 1. Exécutez la commande suivante pour créer un `package.json` fichier par défaut : ``` npm init -y ``` 1. Exécutez la commande suivante pour installer le package client Amazon S3 : ``` npm i @aws-sdk/client-s3 ``` 1. Ajoutez `"type": "module"` au `package.json` fichier. Cela indique à Node.js d'utiliser la syntaxe ESM moderne. La finale `package.json` devrait ressembler à ce qui suit : ``` { "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" } ``` ## Étape 2 : ajouter les importations et le code SDK nécessaires Ajoutez le code suivant à un fichier nommé `index.js` dans le `nodegetstarted` dossier. ``` // 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(); } ``` L'exemple de code se trouve [ici GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/index.js). ## Étape 3 : Exécutez l'exemple **Note** N'oubliez pas de vous connecter \$1 Si vous utilisez IAM Identity Center pour vous authentifier, n'oubliez pas de vous connecter à l'aide de la AWS CLI `aws sso login` commande. 1. Exécutez `node index.js`. 1. Choisissez de vider et de supprimer le compartiment. 1. Si vous ne supprimez pas le compartiment, veillez à le vider manuellement et à le supprimer ultérieurement. # Commencez dans le navigateur Cette section présente un exemple qui montre comment exécuter la version 3 (V3) du AWS SDK JavaScript dans le navigateur. **Note** L'exécution de la V3 dans le navigateur est légèrement différente de la version 2 (V2). Pour de plus amples informations, veuillez consulter [Utilisation des navigateurs dans la V3](welcome.md#v3_browsers). Pour d'autres exemples d'utilisation (V3) du AWS SDK pour JavaScript, voir. [SDK pour exemples de JavaScript code (v3)](javascript_code_examples.md) **Cet exemple d'application Web vous montre :** + Comment accéder aux AWS services à l'aide d'Amazon Cognito pour l'authentification. + Comment lire une liste d'objets dans un compartiment Amazon Simple Storage Service (Amazon S3) à l'aide d' Gestion des identités et des accès AWS un rôle (IAM). **Note** Cet exemple n'est pas utilisé AWS IAM Identity Center pour l'authentification. ## Scénario Amazon S3 est un service de stockage d'objets qui offre une évolutivité, une disponibilité des données, une sécurité et des performances de pointe. Vous pouvez utiliser Amazon S3 pour stocker des données sous forme d'objets dans des conteneurs appelés buckets. Pour plus d'informations sur Amazon S3, consultez le [guide de l'utilisateur Amazon S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/). Cet exemple vous montre comment configurer et exécuter une application Web qui assume un rôle IAM pour lire depuis un compartiment Amazon S3. L'exemple utilise la bibliothèque frontale React et les outils frontaux Vite pour fournir un JavaScript environnement de développement. L'application Web utilise un pool d'identités Amazon Cognito pour fournir les informations d'identification nécessaires pour accéder AWS aux services. L'exemple de code inclus illustre les modèles de base pour le chargement et l'utilisation du AWS SDK pour JavaScript les applications Web. ## Étape 1 : créer un pool d'identités et un rôle IAM Amazon Cognito Dans cet exercice, vous allez créer et utiliser un pool d'identités Amazon Cognito afin de fournir un accès non authentifié à votre application Web pour le service Amazon S3. La création d'un pool d'identités crée également un rôle Gestion des identités et des accès AWS (IAM) pour prendre en charge les utilisateurs invités non authentifiés. Dans cet exemple, nous ne travaillerons qu'avec le rôle d'utilisateur non authentifié afin de nous concentrer sur la tâche. Vous pouvez vous former à la prise en charge d'un fournisseur d'identité et des utilisateurs authentifiés ultérieurement. Pour plus d'informations sur l'ajout d'un pool d'identités Amazon Cognito, consultez [Tutoriel : Création d'un pool d'identités](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html) dans le guide du développeur *Amazon Cognito*. **Pour créer un pool d'identités Amazon Cognito et le rôle IAM associé** 1. Connectez-vous à la console Amazon Cognito AWS Management Console et ouvrez-la à l'adresse. [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/) 1. Dans le volet de navigation de gauche, choisissez **Identity pools**. 1. Choisissez **Créer un groupe d'identités**. 1. Dans **Configurer la confiance du pool d'identités**, choisissez **Accès invité** pour l'authentification des utilisateurs. 1. Dans **Configurer les autorisations**, choisissez **Créer un nouveau rôle IAM** et entrez un nom (par exemple, *getStartedRole*) dans le nom du **rôle IAM**. 1. Dans **Configurer les propriétés**, entrez un nom (par exemple, *getStartedPool*) dans **Nom du pool d'identités**. 1. Dans **Vérifier et créer**, confirmez les sélections que vous avez effectuées pour votre nouvelle réserve d'identités. Sélectionnez **Modifier** pour revenir dans l'assistant et modifier des paramètres. Lorsque vous avez terminé, sélectionnez **Créer un groupe d'identités**. 1. Notez l'**ID du pool d'identités** et la **région** du pool d'identités Amazon Cognito récemment créé. Vous avez besoin de ces valeurs pour les remplacer *IDENTITY\$1POOL\$1ID* et *REGION* les insérer[Étape 4 : configurer le code du navigateur](#getting-started-browser-create-html). Après avoir créé votre pool d'identités Amazon Cognito, vous êtes prêt à ajouter les autorisations nécessaires à votre application Web pour Amazon S3. ## Étape 2 : ajouter une politique au rôle IAM créé Pour activer l'accès à un compartiment Amazon S3 dans votre application Web, utilisez le rôle IAM non authentifié (par exemple *getStartedRole*) créé pour votre pool d'identités Amazon Cognito (par exemple,). *getStartedPool* Vous devez pour cela associer une politique IAM au rôle. Pour plus d'informations sur la modification des rôles IAM, consultez la section [Modification d'une politique d'autorisations de rôle](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy) dans le Guide de l'*utilisateur IAM*. **Pour ajouter une politique Amazon S3 au rôle IAM associé aux utilisateurs non authentifiés** 1. Connectez-vous à la console IAM AWS Management Console et ouvrez-la à [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)l'adresse. 1. Dans le volet de navigation de gauche, choisissez **Rôles**. 1. Choisissez le nom du rôle que vous souhaitez modifier (par exemple, *getStartedRole*), puis cliquez sur l'onglet **Autorisations**. 1. Choisissez **Ajouter des autorisations**, puis **Attacher des politiques**. 1. Sur la page **Ajouter des autorisations** pour ce rôle, recherchez puis cochez la case pour **AmazonS3 ReadOnlyAccess**. **Note** Vous pouvez utiliser ce processus pour autoriser l'accès à n'importe quel AWS service. 1. Choisissez **Ajouter des autorisations**. Après avoir créé votre pool d'identités Amazon Cognito et ajouté des autorisations pour Amazon S3 à votre rôle IAM pour les utilisateurs non authentifiés, vous êtes prêt à ajouter et à configurer un compartiment Amazon S3. ## Étape 3 : ajouter un compartiment et un objet Amazon S3 Au cours de cette étape, vous allez ajouter un compartiment et un objet Amazon S3 pour l'exemple. Vous allez également activer le partage de ressources entre origines (CORS) pour le bucket. Pour plus d'informations sur la création de buckets et d'objets Amazon S3, consultez [Getting started with Amazon S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html) dans le *guide de l'utilisateur Amazon S3*. **Pour ajouter un compartiment et un objet Amazon S3 avec CORS** 1. Connectez-vous à la console Amazon S3 AWS Management Console et ouvrez-la à l'adresse [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/). 1. Dans le volet de navigation de gauche, choisissez **Buckets**, puis **Create bucket**. 1. **Entrez un nom de compartiment conforme aux [règles de dénomination des compartiments](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html) (par exemple, *getstartedbucket) et choisissez Create bucket*.** 1. Choisissez le bucket que vous avez créé, puis cliquez sur l'onglet **Objets**. Choisissez ensuite **Upload**. 1. Sous **Fichiers et dossiers**, choisissez **Ajouter des fichiers**. 1. Choisissez un fichier à charger, puis choisissez **Ouvrir**. Choisissez ensuite **Upload** pour terminer le téléchargement de l'objet dans votre bucket. 1. Choisissez ensuite l'onglet **Autorisations** de votre compartiment, puis sélectionnez **Modifier** dans la **section Partage de ressources entre origines (CORS).** Entrez le code JSON suivant : ``` [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [] } ] ``` 1. Sélectionnez **Enregistrer les modifications**. Après avoir ajouté un compartiment Amazon S3 et un objet, vous êtes prêt à configurer le code du navigateur. ## Étape 4 : configurer le code du navigateur L'exemple d'application consiste en une application React d'une seule page. Les fichiers de cet exemple se trouvent [ici GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/web/s3/list-objects). **Pour configurer l'exemple d'application** 1. Installez [Node.js](https://nodejs.org/en/download). 1. À partir de la ligne de commande, clonez le [référentiel d'exemples de AWS code](https://github.com/awsdocs/aws-doc-sdk-examples/) : ``` git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git ``` 1. Accédez à l'exemple d'application : ``` cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/ ``` 1. Exécutez la commande suivante pour installer les packages requis : ``` npm install ``` 1. Ouvrez ensuite `src/App.tsx` dans un éditeur de texte et effectuez les opérations suivantes : + *YOUR\$1IDENTITY\$1POOL\$1ID*Remplacez-le par l'ID du pool d'identités Amazon Cognito que vous avez indiqué. [Étape 1 : créer un pool d'identités et un rôle IAM Amazon Cognito](#getting-started-browser-create-identity-pool) + Remplacez la valeur de région par la région attribuée à votre compartiment Amazon S3 et à votre pool d'identités Amazon Cognito. Notez que les régions des deux services doivent être identiques (par exemple, *us-east-2*). + *bucket-name*Remplacez-le par le nom du bucket dans lequel vous l'avez créé[Étape 3 : ajouter un compartiment et un objet Amazon S3](#getting-started-browser-create-s3-bucket). Après avoir remplacé le texte, enregistrez le `App.tsx` fichier. Vous êtes maintenant prêt à exécuter l'application Web. ## Étape 5 : Exécuter l'exemple **Pour exécuter l'exemple d'application** 1. À partir de la ligne de commande, accédez à l'exemple d'application : ``` cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/ ``` 1. À partir de la ligne de commande, exécutez la commande suivante : ``` npm run dev ``` L'environnement de développement Vite s'exécutera avec le message suivant : ``` VITE v4.3.9 ready in 280 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help ``` 1. Dans votre navigateur Web, accédez à l'URL ci-dessus (par exemple, http://localhost:5173). L'exemple d'application vous montrera une liste de noms de fichiers d'objets dans votre compartiment Amazon S3. ## Nettoyage Pour nettoyer les ressources que vous avez créées au cours de ce didacticiel, procédez comme suit : + Dans [la console Amazon S3](https://console.aws.amazon.com/s3/), supprimez tous les objets et tous les compartiments créés (par exemple, *getstartedbucket*). + Dans [la console IAM](https://console.aws.amazon.com/iam/home#/roles), supprimez le nom du rôle (par exemple, *getStartedRole*). + Dans [la console Amazon Cognito](https://console.aws.amazon.com/cognito/home#/identity), supprimez le nom du pool d'identités (par exemple, *getStartedPool*). # Commencer à utiliser React Native Ce didacticiel vous montre comment créer une application React Native à l'aide de la [CLI React Native](https://reactnative.dev/docs/environment-setup). ![\[JavaScript code example that applies to React Native.\]](http://docs.aws.amazon.com/fr_fr/sdk-for-javascript/v3/developer-guide/images/browsericon.png) **Ce didacticiel vous montre :** + Comment installer et inclure le AWS SDK pour les modules de JavaScript la version 3 (V3) utilisés par votre projet. + Comment écrire du code qui se connecte à Amazon Simple Storage Service (Amazon S3) afin de créer et de supprimer un compartiment Amazon S3. ## Scénario Amazon S3 est un service cloud qui vous permet de stocker et de récupérer n'importe quel volume de données à tout moment, où que vous soyez sur le Web. React Native est un framework de développement qui permet de créer des applications mobiles. Ce didacticiel explique comment créer une application React Native qui se connecte à Amazon S3 pour créer et supprimer un compartiment Amazon S3. L'application utilise le AWS SDK suivant pour JavaScript APIs : + Constructeur [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/) + Constructeur [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/) ## Tâches préalables **Note** Si vous avez déjà effectué l'une des étapes suivantes via d'autres didacticiels ou une configuration existante, ignorez ces étapes. Cette section fournit la configuration minimale nécessaire pour effectuer ce didacticiel. Vous ne devez pas considérer cela comme une configuration complète. Pour cela, consultez [Configurez le SDK pour JavaScript](setting-up.md). + Installez les outils suivants : + [npm](https://docs.npmjs.com/getting-started/) + [Node.js](https://nodejs.org/en/download/) + [Xcode](https://developer.apple.com/xcode/) si vous testez sur iOS + [Android Studio](https://developer.android.com/studio/) si vous testez sur Android + Configurez votre [environnement de développement React Native](https://reactnative.dev/docs/environment-setup) + Configurez l'environnement du projet pour exécuter ces TypeScript exemples de nœuds et installez le AWS SDK requis pour les modules tiers JavaScript et les modules tiers. Suivez les instructions figurant sur [ GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/README.md). + Vous devez définir le mode d'authentification de votre code AWS lorsque vous développez avec des AWS services. Pour de plus amples informations, veuillez consulter [Authentification du SDK avec AWS](getting-your-credentials.md). **Note** Dans cet exemple, le rôle IAM doit être défini pour utiliser les autorisations **Amazon S3 FullAccess**. ## Étape 1 : créer un pool d'identités Amazon Cognito Dans cet exercice, vous allez créer et utiliser un pool d'identités Amazon Cognito afin de fournir un accès non authentifié à votre application pour le service Amazon S3. La création d'un pool d'identités crée également deux rôles Gestion des identités et des accès AWS (IAM), l'un pour prendre en charge les utilisateurs authentifiés par un fournisseur d'identité et l'autre pour prendre en charge les utilisateurs invités non authentifiés. Dans cet exercice, nous allons uniquement avoir recours à un rôle utilisateur non authentifié afin de rester concentré sur la tâche. Vous pouvez vous former à la prise en charge d'un fournisseur d'identité et des utilisateurs authentifiés ultérieurement. **Pour créer un pool d'identités Amazon Cognito** 1. Connectez-vous à la console Amazon Cognito AWS Management Console et ouvrez-la sur la console [Amazon Web Services](https://console.aws.amazon.com/cognito/). 1. Choisissez **Identity Pools** sur la page d'ouverture de la console. 1. Sur la page suivante, choisissez **Créer un groupe d'identités**. **Note** S'il n'existe aucun autre pool d'identités, la console Amazon Cognito ignore cette page et ouvre la page suivante à la place. 1. Dans **Configurer la confiance du pool d'identités**, choisissez **Accès invité** pour l'authentification des utilisateurs. 1. Dans **Configurer les autorisations**, choisissez **Créer un nouveau rôle IAM** et entrez un nom (par exemple, *getStartedReactRôle*) dans le nom du **rôle IAM**. 1. Dans **Configurer les propriétés**, entrez un nom (par exemple, *getStartedReactPool*) dans **Nom du pool d'identités**. 1. Dans **Vérifier et créer**, confirmez les sélections que vous avez effectuées pour votre nouvelle réserve d'identités. Sélectionnez **Modifier** pour revenir dans l'assistant et modifier des paramètres. Lorsque vous avez terminé, sélectionnez **Créer un groupe d'identités**. 1. Notez l'ID du pool d'identités et la région de ce groupe d'identités nouvellement créé. Vous avez besoin de ces valeurs pour remplacer *region* et *identityPoolId* dans le script de votre navigateur. Après avoir créé votre pool d'identités Amazon Cognito, vous êtes prêt à ajouter les autorisations nécessaires à votre application React Native pour Amazon S3. ## Étape 2 : ajouter une politique au rôle IAM créé Pour permettre l'accès par script de navigateur à Amazon S3 afin de créer et de supprimer un compartiment Amazon S3, utilisez le rôle IAM non authentifié créé pour votre pool d'identités Amazon Cognito. Cela nécessite que vous ajoutiez une politique IAM au rôle. Pour plus d'informations sur les rôles IAM, consultez la section [Création d'un rôle pour déléguer des autorisations à un AWS service](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) dans le Guide de l'*utilisateur IAM*. **Pour ajouter une politique Amazon S3 au rôle IAM associé aux utilisateurs non authentifiés** 1. Connectez-vous à la console IAM AWS Management Console et ouvrez-la à [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)l'adresse. 1. Dans le volet de navigation de gauche, choisissez **Rôles**. 1. Choisissez le nom du rôle que vous souhaitez modifier (par exemple, *getStartedRole*), puis cliquez sur l'onglet **Autorisations**. 1. Choisissez **Ajouter des autorisations**, puis **Attacher des politiques**. 1. Sur la page **Ajouter des autorisations** pour ce rôle, recherchez puis cochez la case pour **AmazonS3 ReadOnlyAccess**. **Note** Vous pouvez utiliser ce processus pour autoriser l'accès à n'importe quel AWS service. 1. Choisissez **Ajouter des autorisations**. Après avoir créé votre pool d'identités Amazon Cognito et ajouté des autorisations pour Amazon S3 à votre rôle IAM pour les utilisateurs non authentifiés, vous êtes prêt à créer l'application. ## Étape 3 : créer une application à l'aide de create-react-native-app Créez une application React Native en exécutant la commande suivante. ``` npx react-native init ReactNativeApp --npm ``` ## Étape 4 : Installation du package Amazon S3 et des autres dépendances Dans le répertoire du projet, exécutez les commandes suivantes pour installer le package Amazon S3. ``` npm install @aws-sdk/client-s3 ``` Cette commande installe le package Amazon S3 dans votre projet et est mise à jour `package.json` pour répertorier Amazon S3 en tant que dépendance du projet. Vous pouvez trouver des informations sur ce package en recherchant "@aws -sdk » sur le site Web de [https://www.npmjs.com/](https://www.npmjs.com/) npm. Ces packages et le code associé sont installés dans le sous-répertoire `node_modules` de votre projet. Pour plus d'informations sur l'installation des packages Node.js, voir [Téléchargement et installation de packages localement](https://docs.npmjs.com/downloading-and-installing-packages-locally) et [Création de modules Node.js](https://docs.npmjs.com/creating-node-js-modules) sur le [site Web npm (Node.js package manager)](https://www.npmjs.com/). Pour plus d'informations sur le téléchargement et l'installation du AWS SDK pour JavaScript, consultez[Installez le SDK pour JavaScript](setting-up.md#installing-jssdk). Installez les autres dépendances requises pour l'authentification. ``` npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity ``` ## Étape 5 : Écrire le code React Native Ajoutez le code suivant au`App.tsx`. Remplacez *identityPoolId* et *region* par l'ID du pool d'identités et la région dans lesquels votre compartiment Amazon S3 sera créé. ``` 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"} />