La [AWS SDK per JavaScript V3 API Reference Guide](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) descrive in dettaglio tutte le operazioni API per la AWS SDK per JavaScript versione 3 (V3). Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà. # Guida introduttiva a React Native Questo tutorial mostra come creare un'app React Native utilizzando la [CLI React Native](https://reactnative.dev/docs/environment-setup). ![\[JavaScript code example that applies to React Native.\]](http://docs.aws.amazon.com/it_it/sdk-for-javascript/v3/developer-guide/images/browsericon.png) **Questo tutorial ti mostra:** + Come installare e includere l' AWS SDK per i moduli della JavaScript versione 3 (V3) utilizzati dal progetto. + Come scrivere codice che si connetta ad Amazon Simple Storage Service (Amazon S3) per creare ed eliminare un bucket Amazon S3. ## Lo scenario Amazon S3 è un servizio cloud che consente di archiviare e recuperare qualsiasi quantità di dati in qualsiasi momento, da qualsiasi punto del Web. React Native è un framework di sviluppo che consente di creare applicazioni mobili. Questo tutorial mostra come creare un'app React Native che si connette ad Amazon S3 per creare ed eliminare un bucket Amazon S3. L'app utilizza il seguente AWS SDK per: JavaScript APIs + Costruttore [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/) + Costruttore [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/) ## Attività prerequisite **Nota** Se hai già completato uno dei passaggi seguenti con altri tutorial o configurazioni, ignora questi passaggi. Questa sezione fornisce la configurazione minima necessaria per completare questo tutorial. Non la considerare come una configurazione completa. Per la configurazione completa, vedi [Configura l'SDK per JavaScript](setting-up.md). + Installa i seguenti strumenti: + [npm](https://docs.npmjs.com/getting-started/) + [Node.js](https://nodejs.org/en/download/) + [Xcode](https://developer.apple.com/xcode/) se stai testando su iOS + [Android Studio](https://developer.android.com/studio/) se esegui il test su Android + Configura il tuo [ambiente di sviluppo React Native](https://reactnative.dev/docs/environment-setup) + Configura l'ambiente di progetto per eseguire questi TypeScript esempi di Node e installa l' AWS SDK richiesto per i JavaScript moduli di terze parti. Segui le istruzioni su. [ GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/README.md) + È necessario stabilire in che modo il codice si autentica AWS durante lo sviluppo con AWS i servizi. Per ulteriori informazioni, consulta [Autenticazione SDK con AWS](getting-your-credentials.md). **Nota** Il ruolo IAM per questo esempio deve essere impostato per utilizzare le autorizzazioni **FullAccessAmazonS3**. ## Fase 1: creare un pool di identità di Amazon Cognito In questo esercizio, crei e utilizzi un pool di identità Amazon Cognito per fornire un accesso non autenticato alla tua app per il servizio Amazon S3. La creazione di un pool di identità crea anche due ruoli AWS Identity and Access Management (IAM), uno per supportare gli utenti autenticati da un provider di identità e l'altro per supportare gli utenti guest non autenticati. In questo esercizio, lavoreremo solo con il ruolo degli utenti non autenticati in modo che l'attività risulti mirata. È possibile integrare il supporto per un provider di identità e per gli utenti autenticati in un secondo momento. **Per creare un pool di identità Amazon Cognito** 1. Accedi Console di gestione AWS e apri la console Amazon Cognito su [Amazon Web Services](https://console.aws.amazon.com/cognito/) Console. 1. Scegli **Identity Pools** nella pagina di apertura della console. 1. Nella pagina successiva, scegliere **Create new identity pool (Crea nuovo pool di identità)**. **Nota** Se non sono presenti altri pool di identità, la console Amazon Cognito salterà questa pagina e aprirà invece la pagina successiva. 1. In **Configure identity pool trust**, scegli **Accesso ospite per l'autenticazione degli** utenti. 1. In **Configura le autorizzazioni**, scegli **Crea un nuovo ruolo IAM** e inserisci un nome (ad esempio, *getStartedReactRuolo*) nel **nome del ruolo IAM**. 1. In **Configure properties**, inserisci un nome (ad esempio, *getStartedReactPool*) nel campo **Identity pool name**. 1. In **Esamina e crea**, conferma le selezioni effettuate per il nuovo pool di identità. Seleziona **Modifica** per tornare alla procedura guidata e modificare le eventuali impostazioni. Al termine, seleziona **Crea un pool di identità**. 1. Annota l'ID del pool di identità e la regione per questo pool di identità appena creato. Questi valori devono essere sostituiti *region* e inseriti *identityPoolId* nello script del browser. Dopo aver creato il tuo pool di identità Amazon Cognito, sei pronto per aggiungere le autorizzazioni per Amazon S3 necessarie alla tua app React Native. ## Fase 2: aggiungere una policy al ruolo IAM creato Per consentire l'accesso tramite script del browser ad Amazon S3 per creare ed eliminare un bucket Amazon S3, utilizza il ruolo IAM non autenticato creato per il tuo pool di identità Amazon Cognito. Ciò richiede l'aggiunta di una policy IAM al ruolo. Per ulteriori informazioni sui ruoli IAM, consulta [Creating a Role to Delegate Permissions to an AWS Service](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) nella *IAM User Guide*. **Per aggiungere una policy Amazon S3 al ruolo IAM associato a utenti non autenticati** 1. Accedi Console di gestione AWS e apri la console IAM all'indirizzo. [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/) 1. Nel pannello di navigazione a sinistra, seleziona **Ruoli**. 1. Scegli il nome del ruolo che desideri modificare (ad esempio, *getStartedRole*), quindi scegli la scheda **Autorizzazioni**. 1. Seleziona **Aggiungi autorizzazioni**, quindi seleziona **Collega policy**. 1. **Nella pagina **Aggiungi autorizzazioni** per questo ruolo, trova e seleziona la casella di controllo per AmazonS3. ReadOnlyAccess** **Nota** Puoi utilizzare questo processo per abilitare l'accesso a qualsiasi servizio. AWS 1. Scegli **Add Permissions (Aggiungi autorizzazioni)**. Dopo aver creato il tuo pool di identità Amazon Cognito e aggiunto le autorizzazioni per Amazon S3 al tuo ruolo IAM per utenti non autenticati, sei pronto per creare l'app. ## Passaggio 3: crea l'app utilizzando create-react-native-app Crea un'app React Native eseguendo il seguente comando. ``` npx react-native init ReactNativeApp --npm ``` ## Fase 4: Installare il pacchetto Amazon S3 e altre dipendenze All'interno della directory del progetto, esegui i seguenti comandi per installare il pacchetto Amazon S3. ``` npm install @aws-sdk/client-s3 ``` Questo comando installa il pacchetto Amazon S3 nel progetto e lo `package.json` aggiorna per elencare Amazon S3 come dipendenza del progetto. Puoi trovare informazioni su questo pacchetto cercando "@aws -sdk» sul sito web di npm. [https://www.npmjs.com/](https://www.npmjs.com/) Questi pacchetti e il relativo codice vengono installati nella sottodirectory `node_modules` del progetto. Per ulteriori informazioni sull'installazione dei pacchetti Node.js, consulta [Scaricamento e installazione dei pacchetti localmente](https://docs.npmjs.com/downloading-and-installing-packages-locally) e [Creazione dei moduli Node.js sul sito](https://docs.npmjs.com/creating-node-js-modules) web di [npm (Node.js package manager)](https://www.npmjs.com/). Per informazioni sul download e l'installazione dell' AWS SDK per JavaScript, consulta. [Installa l'SDK per JavaScript](setting-up.md#installing-jssdk) Installa le altre dipendenze necessarie per l'autenticazione. ``` npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity ``` ## Passaggio 5: scrivere il codice React Native Aggiungi il codice seguente a`App.tsx`. Sostituisci *identityPoolId* e *region* con l'ID del pool di identità e la regione in cui verrà creato il bucket Amazon S3. ``` 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"} />