Inizia nel browser - AWS SDK for JavaScript
Lo scenarioFase 1: creare un pool di identità e un ruolo di Amazon Cognito IAMPassaggio 2: aggiungi una policy al ruolo creato IAMFase 3: aggiungere un bucket e un oggetto Amazon S3Passaggio 4: configura il codice del browserPassaggio 5: Esegui l'esempioRimozione

La Guida API di riferimento AWS SDK for JavaScript V3 descrive in dettaglio tutte le API operazioni per la AWS SDK for 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) di SDK for JavaScript nel browser.

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 di (V3) di SDK for JavaScript, vedere. SDKper JavaScript esempi di 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 assume un IAM ruolo di 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 del modulo JavaScript nelle SDK app Web.

Fase 1: creare un pool di identità e un ruolo di Amazon Cognito 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 associato IAM

  1. Accedi AWS Management Console e apri la console Amazon Cognito all'indirizzo. https://console.aws.amazon.com/cognito/

  2. Nel riquadro di navigazione a sinistra, scegli Identity pool.

  3. Scegli Crea pool di identità.

  4. In Configura la fiducia del pool di identità, scegli Accesso ospite per l'autenticazione degli utenti.

  5. In Configura le autorizzazioni, scegli Crea un nuovo IAM ruolo e inserisci un nome (ad esempio, getStartedRole) nel nome del IAM ruolo.

  6. In Configura proprietà, inserisci un nome (ad esempio, getStartedPool) nel nome del pool di identità.

  7. 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à.

  8. Prendi nota dell'ID del pool di identità e della regione del pool di identità di Amazon Cognito appena creato. Questi valori devono essere sostituiti IDENTITY_POOL_ID e REGION nella sezione 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 creato IAM

Per abilitare l'accesso a un bucket Amazon S3 nella tua app Web, utilizza il IAM ruolo non autenticato (ad esempio, getStartedRole) creato per il tuo pool di identità Amazon Cognito (ad esempio,). getStartedPool Ciò richiede l'associazione di una policy al ruoloIAM. Per ulteriori informazioni sulla modifica IAM dei ruoli, vedere Modifica dei criteri di autorizzazione di un ruolo nella Guida per l'IAMutente.

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

  1. Accedi a AWS Management Console e apri la console all'IAMindirizzo. https://console.aws.amazon.com/iam/

  2. Nel pannello di navigazione a sinistra, seleziona Ruoli.

  3. Scegli il nome del ruolo che desideri modificare (ad esempio, getStartedRole), quindi scegli la scheda Autorizzazioni.

  4. Scegli Aggiungi autorizzazioni, quindi scegli Allega politiche.

  5. 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

  6. Scegli Aggiungi autorizzazioni.

Dopo aver creato il tuo pool di identità Amazon Cognito e aver aggiunto le autorizzazioni per Amazon S3 al tuo IAM ruolo per gli 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 di risorse tra origini diverse (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

  1. Accedi a AWS Management Console e apri la console Amazon S3 all'indirizzo. https://console.aws.amazon.com/s3/

  2. Nel riquadro di navigazione a sinistra, scegli Bucket e scegli Crea bucket.

  3. Inserisci un nome di bucket conforme alle regole di denominazione dei bucket (ad esempio, getstartedbucket) e scegli Crea bucket.

  4. Scegli il bucket che hai creato, quindi scegli la scheda Oggetti. Scegliere quindi Upload (Carica).

  5. In File e cartelle, seleziona Aggiungi file.

  6. Seleziona un file da caricare, quindi scegli Apri. Quindi scegli Carica per completare il caricamento dell'oggetto nel tuo bucket.

  7. Quindi, scegli la scheda Autorizzazioni del tuo bucket, quindi scegli Modifica nella sezione Condivisione di risorse tra origini (). CORS Inserisci quanto segue: JSON

    [
  {
    "AllowedHeaders": [
      "*"
    ],
    "AllowedMethods": [
      "GET"
    ],
    "AllowedOrigins": [
      "*"
    ],
    "ExposeHeaders": []
  }
]

  8. 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

  1. Installa Node.js.

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

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

  3. Passa all'applicazione di esempio:

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

  4. Eseguite il comando seguente per installare i pacchetti richiesti:

    npm install

  5. Quindi, apri src/App.tsx in un editor di testo e completa quanto segue:

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/

  2. 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

  3. Nel tuo browser web, vai alla pagina URL mostrata 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: