Lo scenario Fase 1: creare un pool di identità Amazon Cognito e un ruolo IAM Passaggio 2: aggiungi una policy al ruolo IAM creato Fase 3: aggiungere un bucket e un oggetto Amazon S3 Passaggio 4: configura il codice del browser Passaggio 5: Esegui l'esempio Rimozione

Inizia nel browser

Questa sezione illustra un esempio che dimostra come eseguire la versione 3 (V3) dell'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.

Per altri esempi di utilizzo (V3) dell'SDK per, consulta. JavaScript SDK per esempi di JavaScript codice (v3)

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.

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'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à nella Amazon Cognito Developer Guide.

Per creare un pool di identità Amazon Cognito e un ruolo IAM associato

Accedi AWS Management Console e apri la console Amazon Cognito all'indirizzo. https://console.aws.amazon.com/cognito/
Nel riquadro di navigazione a sinistra, scegli Identity pool.
Scegli Crea pool di identità.
In Configura la fiducia del pool di identità, scegli Accesso ospite per l'autenticazione degli utenti.
In Configura le autorizzazioni, scegli Crea un nuovo ruolo IAM e inserisci un nome (ad esempio, getStartedRole) nel nome del ruolo IAM.
In Configure properties, inserisci un nome (ad esempio, getStartedPool) in Identity pool name.
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à.
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_POOL_ID e REGION inserirli. Passaggio 4: configura il codice 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 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 nella Guida per l'utente IAM.

Per aggiungere una policy Amazon S3 al ruolo IAM associato a utenti non autenticati

Accedi AWS Management Console e apri la console IAM all'indirizzo. https://console.aws.amazon.com/iam/
Nel pannello di navigazione a sinistra, seleziona Ruoli.
Scegli il nome del ruolo che desideri modificare (ad esempio, getStartedRole), quindi scegli la scheda Autorizzazioni.
Seleziona Aggiungi autorizzazioni, quindi seleziona Collega policy.
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
Scegli Aggiungi autorizzazioni.

Dopo aver creato il tuo pool di identità Amazon Cognito e aver 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 User Guide.

Per aggiungere un bucket e un oggetto Amazon S3 con CORS

Accedi a AWS Management Console e apri la console Amazon S3 all'indirizzo. https://console.aws.amazon.com/s3/
Nel riquadro di navigazione a sinistra, scegli Bucket e scegli Crea bucket.
Inserisci un nome di bucket conforme alle regole di denominazione dei bucket (ad esempio, getstartedbucket) e scegli Crea bucket.
Scegli il bucket che hai creato, quindi scegli la scheda Oggetti. Scegliere quindi Upload (Carica).
In File e cartelle, seleziona Aggiungi file.
Seleziona un file da caricare, quindi scegli Apri. Quindi scegli Carica per completare il caricamento dell'oggetto nel tuo bucket.

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

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.

Per configurare l'applicazione di esempio

Installa Node.js.

Dalla riga di comando, clona il AWS Code Examples Repository:


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

Passa all'applicazione di esempio:


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

Eseguite il comando seguente per installare i pacchetti richiesti:
```
npm install
```
Quindi, apri src/App.tsx in un editor di testo e completa quanto segue:
- Sostituisci YOUR_IDENTITY_POOL_ID 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
- 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-nameSostituiscilo con il nome del bucket in cui hai creato. Fase 3: aggiungere un bucket e un oggetto Amazon S3

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

Dalla riga di comando, accedete all'applicazione di esempio:


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

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

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.

Rimozione

Per ripulire le risorse create durante questo tutorial, procedi come segue:

Nella console Amazon S3, elimina tutti gli oggetti e i bucket creati (ad esempio getstartedbucket).
Nella console IAM, elimina il nome del ruolo (ad esempio,). getStartedRole
Nella console Amazon Cognito, elimina il nome del pool di identità (ad esempio, getStartedPool).

Avvertimento JavaScript è disabilitato o non è disponibile nel tuo browser.

Per usare la documentazione AWS, JavaScript deve essere abilitato. Consulta le pagine della guida del browser per le istruzioni.

Convenzioni dei documenti

Inizia a usare Node.js

Guida introduttiva a React Native