Commencez dans le navigateur - AWS SDK for JavaScript
ScénarioÉtape 1 : créer un pool d'identités et un rôle IAM Amazon CognitoÉtape 2 : ajouter une politique au rôle IAM crééÉtape 3 : ajouter un compartiment et un objet Amazon S3Étape 4 : configurer le code du navigateurÉtape 5 : Exécuter l'exempleNettoyage

Le guide de API référence AWS SDK for JavaScript V3 décrit en détail toutes les API opérations de la AWS SDK for 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 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 plus d’informations, consultez Utilisation des navigateurs dans la V3.

Pour d'autres exemples d'utilisation (V3) du SDK pour JavaScript, voir. SDKpour des JavaScript exemples de code (v3)

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' AWS Identity and Access Management 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.

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 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 AWS Identity and Access Management (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 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/.

  2. Dans le volet de navigation de gauche, choisissez Identity pools.

  3. Choisissez Créer un groupe d'identités.

  4. Dans Configurer la confiance du pool d'identités, choisissez Accès invité pour l'authentification des utilisateurs.

  5. Dans Configurer les autorisations, choisissez Créer un nouveau rôle IAM et entrez un nom (par exemple, get StartedRole) dans le nom du rôle IAM.

  6. Dans Configurer les propriétés, entrez un nom (par exemple, get StartedPool) dans Nom du pool d'identités.

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

  8. 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 remplacer IDENTITY_POOL_ID et REGION dans. Étape 4 : configurer le code du navigateur

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, get StartedRole) créé pour votre pool d'identités Amazon Cognito (par exemple, get). StartedPool 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 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 à l'adresse https://console.aws.amazon.com/iam/.

  2. Dans le panneau de navigation de gauche, choisissez Rôles.

  3. Choisissez le nom du rôle que vous souhaitez modifier (par exemple, get StartedRole), puis cliquez sur l'onglet Autorisations.

  4. Choisissez Ajouter des autorisations, puis choisissez Joindre des politiques.

  5. Sur la page Ajouter des autorisations pour ce rôle, recherchez puis cochez la case pour AmazonS3 Access ReadOnly.

    Note

    Vous pouvez utiliser ce processus pour autoriser l'accès à n'importe quel AWS service.

  6. Choisissez Add permissions (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 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/.

  2. Dans le volet de navigation de gauche, choisissez Buckets, puis Create bucket.

  3. Entrez un nom de compartiment conforme aux règles de dénomination des compartiments (par exemple, getstartedbucket) et choisissez Create bucket.

  4. Choisissez le bucket que vous avez créé, puis cliquez sur l'onglet Objets. Choisissez ensuite Upload.

  5. Sous Fichiers et dossiers, choisissez Ajouter des fichiers.

  6. Choisissez un fichier à charger, puis choisissez Ouvrir. Choisissez ensuite Upload pour terminer le téléchargement de l'objet dans votre bucket.

  7. 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": []
  }
]

  8. 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.

Pour configurer l'exemple d'application

  1. Installez Node.js.

  2. À partir de la ligne de commande, clonez le référentiel d'exemples de AWS code :

    git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git

  3. Accédez à l'exemple d'application :

    cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/

  4. Exécutez la commande suivante pour installer les packages requis :

    npm install

  5. Ouvrez ensuite src/App.tsx dans un éditeur de texte et effectuez les opérations suivantes :

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/

  2. À 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

  3. 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, supprimez tous les objets et tous les compartiments créés (par exemple, getstartedbucket).

  • Dans la console IAM, supprimez le nom du rôle (par exemple, get StartedRole).

  • Dans la console Amazon Cognito, supprimez le nom du pool d'identités (par exemple, get StartedPool).