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à.
# Inizia nel browser
Questa sezione illustra un esempio che dimostra come eseguire la versione 3 (V3) dell' AWS SDK for nel browser. JavaScript
**Nota**
L'esecuzione di V3 nel browser è leggermente diversa dalla versione 2 (V2). Per ulteriori informazioni, consulta [Utilizzo dei browser in V3](welcome.md#v3_browsers).
Per altri esempi di utilizzo (V3) dell' AWS SDK per, consulta. JavaScript [SDK per esempi di JavaScript codice (v3)](javascript_code_examples.md)
**Questo esempio di applicazione web mostra:**
+ Come accedere ai AWS servizi utilizzando Amazon Cognito per l'autenticazione.
+ Come leggere un elenco di oggetti in un bucket Amazon Simple Storage Service (Amazon S3) utilizzando AWS Identity and Access Management un ruolo (IAM).
**Nota**
Questo esempio non viene utilizzato AWS IAM Identity Center per l'autenticazione.
## Lo scenario
Amazon S3 è un servizio di archiviazione di oggetti che offre scalabilità, disponibilità dei dati, sicurezza e prestazioni tra le migliori del settore. Puoi usare Amazon S3 per archiviare dati come oggetti all'interno di contenitori chiamati bucket. Per ulteriori informazioni su Amazon S3, consulta la Amazon [S3 User Guide](https://docs.aws.amazon.com/AmazonS3/latest/userguide/).
Questo esempio mostra come configurare ed eseguire un'app Web che presuppone un ruolo IAM per la lettura da un bucket Amazon S3. L'esempio utilizza la libreria front-end React e gli strumenti front-end Vite per fornire un ambiente di sviluppo. JavaScript L'app Web utilizza un pool di identità Amazon Cognito per fornire le credenziali necessarie per accedere ai servizi. AWS L'esempio di codice incluso illustra i modelli di base per il caricamento e l'utilizzo dell' AWS SDK per JavaScript le app Web.
## Fase 1: creare un pool di identità Amazon Cognito e un ruolo IAM
In questo esercizio, crei e utilizzi un pool di identità Amazon Cognito per fornire un accesso non autenticato alla tua app Web per il servizio Amazon S3. La creazione di un pool di identità crea anche un ruolo AWS Identity and Access Management (IAM) per supportare gli utenti guest non autenticati. In questo esempio, lavoreremo solo con il ruolo utente non autenticato per mantenere l'attività concentrata. È possibile integrare il supporto per un provider di identità e per gli utenti autenticati in un secondo momento. Per ulteriori informazioni sull'aggiunta di un pool di identità di Amazon Cognito, consulta il [Tutorial: Creazione di un pool di identità](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html) nella *Amazon Cognito Developer Guide*.
**Per creare un pool di identità Amazon Cognito e un ruolo IAM associato**
1. Accedi Console di gestione AWS e apri la console Amazon Cognito all'indirizzo. [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/)
1. Nel riquadro di navigazione a sinistra, scegli **Identity pool**.
1. Scegli **Crea pool di identità**.
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, *getStartedRole*) nel **nome del ruolo IAM**.
1. In **Configure properties**, inserisci un nome (ad esempio, *getStartedPool*) in **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. Prendi nota dell'**ID del pool di identità** e della **regione** del pool di identità di Amazon Cognito appena creato. Questi valori sono necessari per sostituirli *IDENTITY\$1POOL\$1ID* e *REGION* inserirli. [Passaggio 4: configura il codice del browser](#getting-started-browser-create-html)
Dopo aver creato il tuo pool di identità Amazon Cognito, sei pronto per aggiungere le autorizzazioni per Amazon S3 necessarie alla tua app web.
## Passaggio 2: aggiungi una policy al ruolo IAM creato
Per abilitare l'accesso a un bucket Amazon S3 nella tua app Web, utilizza il ruolo IAM non autenticato (ad esempio, *getStartedRole*) creato per il tuo pool di identità Amazon Cognito (ad esempio,). *getStartedPool* Ciò richiede l'associazione di una policy IAM al ruolo. Per ulteriori informazioni sulla modifica dei ruoli IAM, consulta [Modifica della politica di autorizzazione di un ruolo](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy) nella Guida per l'utente *IAM*.
**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 aggiungere e configurare un bucket Amazon S3.
## Fase 3: aggiungere un bucket e un oggetto Amazon S3
In questo passaggio, aggiungerai un bucket Amazon S3 e un oggetto per l'esempio. Attiverai anche la condivisione delle risorse tra le origini (CORS) per il bucket. *Per ulteriori informazioni sulla creazione di bucket e oggetti Amazon S3, consulta la sezione [Guida introduttiva ad Amazon S3 nella Amazon S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html) User Guide.*
**Per aggiungere un bucket e un oggetto Amazon S3 con CORS**
1. Accedi a Console di gestione AWS e apri la console Amazon S3 all'indirizzo. [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)
1. Nel riquadro di navigazione a sinistra, scegli **Bucket e scegli **Crea** bucket**.
1. **Inserisci un nome di bucket conforme alle [regole di denominazione dei bucket](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html) (ad esempio, *getstartedbucket*) e scegli Crea bucket.**
1. **Scegli il bucket che hai creato, quindi scegli la scheda Oggetti.** Scegliere quindi **Upload (Carica)**.
1. In **File e cartelle**, seleziona **Aggiungi file**.
1. Seleziona un file da caricare, quindi scegli **Apri**. Quindi scegli **Carica** per completare il caricamento dell'oggetto nel tuo bucket.
1. Quindi, scegli la scheda **Autorizzazioni** del tuo bucket, quindi scegli **Modifica** nella sezione **Cross-origin resource sharing** (CORS). Inserisci il seguente codice JSON:
```
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": []
}
]
```
1. Scegli **Save changes** (Salva modifiche).
Dopo aver aggiunto un bucket Amazon S3 e aggiunto un oggetto, sei pronto per configurare il codice del browser.
## Passaggio 4: configura il codice del browser
L'applicazione di esempio è costituita da un'applicazione React a pagina singola. I file di questo esempio possono essere trovati [qui su GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/web/s3/list-objects).
**Per configurare l'applicazione di esempio**
1. Installa [Node.js](https://nodejs.org/en/download).
1. Dalla riga di comando, clona il [AWS Code Examples Repository](https://github.com/awsdocs/aws-doc-sdk-examples/):
```
git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git
```
1. Passa all'applicazione di esempio:
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. Eseguite il comando seguente per installare i pacchetti richiesti:
```
npm install
```
1. Quindi, apri `src/App.tsx` in un editor di testo e completa quanto segue:
+ *YOUR\$1IDENTITY\$1POOL\$1ID*Sostituiscilo con l'ID del pool di identità di Amazon Cognito in cui hai registrato. [Fase 1: creare un pool di identità Amazon Cognito e un ruolo IAM](#getting-started-browser-create-identity-pool)
+ Sostituisci il valore per regione con la regione assegnata al tuo bucket Amazon S3 e al pool di identità Amazon Cognito. Tieni presente che le regioni per entrambi i servizi devono essere le stesse (ad esempio, *us-east-2*).
+ *bucket-name*Sostituiscilo con il nome del bucket in cui hai creato. [Fase 3: aggiungere un bucket e un oggetto Amazon S3](#getting-started-browser-create-s3-bucket)
Dopo aver sostituito il testo, salva il `App.tsx` file. Ora sei pronto per eseguire l'app web.
## Passaggio 5: Esegui l'esempio
**Per eseguire l'applicazione di esempio**
1. Dalla riga di comando, accedete all'applicazione di esempio:
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. Dalla riga di comando, esegui il seguente comando:
```
npm run dev
```
L'ambiente di sviluppo Vite verrà eseguito con il seguente messaggio:
```
VITE v4.3.9 ready in 280 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
```
1. Nel tuo browser web, accedi all'URL mostrato sopra (ad esempio, http://localhost:5173). L'app di esempio ti mostrerà un elenco di nomi di file di oggetti nel tuo bucket Amazon S3.
## Pulizia
Per ripulire le risorse create durante questo tutorial, procedi come segue:
+ [Nella console Amazon S3](https://console.aws.amazon.com/s3/)*, elimina tutti gli oggetti e i bucket creati (ad esempio getstartedbucket).*
+ Nella [console IAM, elimina il](https://console.aws.amazon.com/iam/home#/roles) nome del ruolo (ad esempio,). *getStartedRole*
+ [Nella console Amazon Cognito](https://console.aws.amazon.com/cognito/home#/identity), elimina il nome del pool di identità (ad esempio, *getStartedPool*).