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 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*).