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. # 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"} />