Commencez dans le navigateur - AWS SDK for JavaScript
ScénarioÉtape 1 : créer un pool d'identités et un rôle Amazon Cognito IAMÉtape 2 : ajouter une politique au IAM rôle 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 formulaire 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.

Pour d'autres exemples d'utilisation (V3) du SDK for JavaScript, voirSDKpour 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 AWS Identity and Access Management d'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 le IAM rôle de lecture 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 for JavaScript dans les applications Web.

Étape 1 : créer un pool d'identités et un rôle Amazon Cognito IAM

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 associé IAM

  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 IAM rôle et entrez un nom (par exemple, getStartedRole) dans le nom du IAM rôle.

  6. Dans Configurer les propriétés, entrez un nom (par exemple, getStartedPool) 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 and 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 IAM rôle créé

Pour activer l'accès à un compartiment Amazon S3 dans votre application Web, utilisez le IAM rôle non authentifié (par exemple, getStartedRole) créé pour votre pool d'identités Amazon Cognito (par exemple,). getStartedPool Vous devez pour cela associer une IAM politique au rôle. Pour plus d'informations sur la modification IAM des rôles, voir Modifier la politique d'autorisation d'un rôle dans le Guide de IAM l'utilisateur.

Pour ajouter une politique Amazon S3 au IAM rôle associé aux utilisateurs non authentifiés

  1. Connectez-vous à la IAM console 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, getStartedRole), 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 ReadOnlyAccess.

    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 IAM rôle 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 compartiment. 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 bucket, puis sélectionnez Modifier dans la section Partage de ressources entre origines (CORS). Entrez les informations suivantes JSON :

    [
  {
    "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. Depuis 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 à ce qui URL est indiqué 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 IAM console, supprimez le nom du rôle (par exemple, getStartedRole).

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