Fangen Sie im Browser an - AWS SDK for JavaScript
Das SzenarioSchritt 1: Erstellen Sie einen Amazon Cognito Cognito-Identitätspool und eine IAM-RolleSchritt 2: Fügen Sie der erstellten IAM-Rolle eine Richtlinie hinzuSchritt 3: Fügen Sie einen Amazon S3 S3-Bucket und ein Objekt hinzuSchritt 4: Richten Sie den Browsercode einSchritt 5: Führen Sie das Beispiel ausBereinigen

Das AWS SDK for JavaScript V3-API-Referenzhandbuch beschreibt im Detail alle API-Operationen für die AWS SDK for JavaScript Version 3 (V3).

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Fangen Sie im Browser an

Dieser Abschnitt führt Sie durch ein Beispiel, das zeigt, wie Sie Version 3 (V3) des SDK für JavaScript im Browser ausführen.

Anmerkung

Die Ausführung von V3 im Browser unterscheidet sich geringfügig von Version 2 (V2). Weitere Informationen finden Sie unter Verwendung von Browsern in V3.

Weitere Beispiele für die Verwendung von (V3) des SDK für JavaScript finden Sie unterCodebeispiele für SDK für JavaScript (v3).

Dieses Beispiel für eine Webanwendung zeigt Ihnen:

  • So greifen Sie mit Amazon Cognito zur Authentifizierung auf AWS Dienste zu.

  • Wie liest man eine Liste von Objekten in einem Amazon Simple Storage Service (Amazon S3) -Bucket mithilfe einer AWS Identity and Access Management (IAM) -Rolle.

Anmerkung

Dieses Beispiel wird nicht AWS IAM Identity Center für die Authentifizierung verwendet.

Das Szenario

Amazon S3 ist ein Objektspeicherservice, der branchenführende Skalierbarkeit, Datenverfügbarkeit, Sicherheit und Leistung bietet. Sie können Amazon S3 verwenden, um Daten als Objekte in Containern, sogenannten Buckets, zu speichern. Weitere Informationen zu Amazon S3 finden Sie im Amazon S3 S3-Benutzerhandbuch.

Dieses Beispiel zeigt Ihnen, wie Sie eine Web-App einrichten und ausführen, die eine IAM-Rolle zum Lesen aus einem Amazon S3 S3-Bucket annimmt. Das Beispiel verwendet die React-Frontend-Bibliothek und die Vite-Frontend-Tools, um eine Entwicklungsumgebung bereitzustellen. JavaScript Die Web-App verwendet einen Amazon Cognito Cognito-Identitätspool, um Anmeldeinformationen bereitzustellen, die für den Zugriff auf AWS Dienste erforderlich sind. Das mitgelieferte Codebeispiel demonstriert die grundlegenden Muster für das Laden und Verwenden des SDK JavaScript in Web-Apps.

Schritt 1: Erstellen Sie einen Amazon Cognito Cognito-Identitätspool und eine IAM-Rolle

In dieser Übung erstellen und verwenden Sie einen Amazon Cognito Cognito-Identitätspool, um nicht authentifizierten Zugriff auf Ihre Web-App für den Amazon S3 S3-Service bereitzustellen. Durch die Erstellung eines Identitätspools wird auch eine AWS Identity and Access Management (IAM-) Rolle zur Unterstützung nicht authentifizierter Gastbenutzer erstellt. In diesem Beispiel werden wir nur mit der Rolle „Nicht authentifizierter Benutzer“ arbeiten, damit wir uns auf die Aufgabe konzentrieren können. Sie können die Unterstützung für einen Identitätsanbieter und authentifizierte Benutzer zu einem späteren Zeitpunkt integrieren. Weitere Informationen zum Hinzufügen eines Amazon Cognito-Identitätspools finden Sie unter Tutorial: Creating an Identity Pool im Amazon Cognito Developer Guide.

So erstellen Sie einen Amazon Cognito Cognito-Identitätspool und die zugehörige IAM-Rolle

  1. Melden Sie sich bei der Amazon Cognito Cognito-Konsole an AWS Management Console und öffnen Sie sie unter https://console.aws.amazon.com/cognito/.

  2. Wählen Sie im linken Navigationsbereich Identity Pools aus.

  3. Wählen Sie Identitätspool erstellen.

  4. Wählen Sie unter Vertrauensstellung im Identitätspool konfigurieren die Option Gastzugriff für die Benutzerauthentifizierung aus.

  5. Wählen Sie unter Berechtigungen konfigurieren die Option Neue IAM-Rolle erstellen aus und geben Sie einen Namen (z. B. getStartedRole) in den IAM-Rollennamen ein.

  6. Geben Sie unter Eigenschaften konfigurieren einen Namen ein (z. B. getStartedPool) im Feld Identitätspoolname.

  7. Bestätigen Sie unter Überprüfen und erstellen die Auswahl, die Sie für Ihren neuen Identitätspool getroffen haben. Wählen Sie Bearbeiten, um zum Assistenten zurückzukehren und Einstellungen zu ändern. Wählen Sie danach Identitätspool erstellen aus.

  8. Notieren Sie sich die Identitätspool-ID und die Region des neu erstellten Amazon Cognito Cognito-Identitätspools. Sie benötigen diese Werte, um IDENTITY_POOL_ID und REGION in zu ersetzen. Schritt 4: Richten Sie den Browsercode ein

Nachdem Sie Ihren Amazon Cognito Cognito-Identitätspool erstellt haben, können Sie Berechtigungen für Amazon S3 hinzufügen, die von Ihrer Web-App benötigt werden.

Schritt 2: Fügen Sie der erstellten IAM-Rolle eine Richtlinie hinzu

Um den Zugriff auf einen Amazon S3 S3-Bucket in Ihrer Web-App zu aktivieren, verwenden Sie die nicht authentifizierte IAM-Rolle (z. B. getStartedRole), die für Ihren Amazon Cognito Cognito-Identitätspool erstellt wurde (z. B.). getStartedPool Dazu müssen Sie der Rolle eine IAM-Richtlinie hinzufügen. Weitere Informationen zum Ändern von IAM-Rollen finden Sie unter Ändern einer Rollenberechtigungsrichtlinie im IAM-Benutzerhandbuch.

Um der IAM-Rolle, die nicht authentifizierten Benutzern zugeordnet ist, eine Amazon S3 S3-Richtlinie hinzuzufügen

  1. Melden Sie sich bei der AWS Management Console an und öffnen Sie die IAM-Konsole unter https://console.aws.amazon.com/iam/.

  2. Wählen Sie im linken Navigationsbereich Roles aus.

  3. Wählen Sie den Namen der Rolle aus, die Sie ändern möchten (z. B. getStartedRole), und wählen Sie dann die Registerkarte Berechtigungen.

  4. Wählen Sie „Berechtigungen hinzufügen“ und anschließend „Richtlinien anhängen“.

  5. Suchen Sie auf der Seite „Berechtigungen hinzufügen“ für diese Rolle nach dem Kontrollkästchen für AmazonS3 und aktivieren Sie es. ReadOnlyAccess

    Anmerkung

    Sie können diesen Prozess verwenden, um den Zugriff auf jeden AWS Dienst zu aktivieren.

  6. Wählen Sie Add permissions (Berechtigungen hinzufügen) aus.

Nachdem Sie Ihren Amazon Cognito Cognito-Identitätspool erstellt und Ihrer IAM-Rolle für nicht authentifizierte Benutzer Berechtigungen für Amazon S3 hinzugefügt haben, können Sie einen Amazon S3 S3-Bucket hinzufügen und konfigurieren.

Schritt 3: Fügen Sie einen Amazon S3 S3-Bucket und ein Objekt hinzu

In diesem Schritt fügen Sie einen Amazon S3 S3-Bucket und ein Objekt für das Beispiel hinzu. Sie werden auch Cross-Origin Resource Sharing (CORS) für den Bucket aktivieren. Weitere Informationen zum Erstellen von Amazon S3-Buckets und -Objekten finden Sie unter Erste Schritte mit Amazon S3 im Amazon S3 S3-Benutzerhandbuch.

Um einen Amazon S3 S3-Bucket und ein Objekt mit CORS hinzuzufügen

  1. Melden Sie sich bei der AWS Management Console an und öffnen Sie die Amazon S3-Konsole unter https://console.aws.amazon.com/s3/.

  2. Wählen Sie im linken Navigationsbereich Buckets und dann Create Bucket aus.

  3. Geben Sie einen Bucket-Namen ein, der den Regeln für die Benennung von Buckets entspricht (z. B. getstartedbucket), und wählen Sie Create Bucket aus.

  4. Wählen Sie den Bucket aus, den Sie erstellt haben, und klicken Sie dann auf den Tab Objekte. Klicken Sie anschließend auf Upload.

  5. Wählen Sie unter Files and folders (Dateien und Ordner) die Option Add files (Dateien hinzufügen) aus.

  6. Wählen Sie eine hochzuladende Datei und dann Öffnen aus. Wählen Sie dann Hochladen, um den Upload des Objekts in Ihren Bucket abzuschließen.

  7. Wählen Sie als Nächstes den Tab „Berechtigungen“ Ihres Buckets und anschließend im Abschnitt Cross-Origin Resource Sharing (CORS) die Option Bearbeiten aus. Geben Sie den folgenden JSON-Code ein:

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

  8. Wählen Sie Änderungen speichern aus.

Nachdem Sie einen Amazon S3 S3-Bucket und ein Objekt hinzugefügt haben, können Sie den Browsercode einrichten.

Schritt 4: Richten Sie den Browsercode ein

Die Beispielanwendung besteht aus einer einseitigen React-Anwendung. Die Dateien für dieses Beispiel finden Sie hier auf GitHub.

Um die Beispielanwendung einzurichten

  1. Installieren Sie Node.js.

  2. Klonen Sie das AWSCodebeispiel-Repository von der Befehlszeile aus:

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

  3. Navigieren Sie zur Beispielanwendung:

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

  4. Führen Sie den folgenden Befehl aus, um die erforderlichen Pakete zu installieren:

    npm install

  5. Öffnen Sie anschließend src/App.tsx in einem Texteditor und gehen Sie wie folgt vor:

Nachdem Sie den Text ersetzt haben, speichern Sie die App.tsx Datei. Sie sind jetzt bereit, die Web-App auszuführen.

Schritt 5: Führen Sie das Beispiel aus

Um die Beispielanwendung auszuführen

  1. Navigieren Sie von der Befehlszeile aus zur Beispielanwendung:

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

  2. Führen Sie in der Befehlszeile den folgenden Befehl aus:

    npm run dev

    Die Vite-Entwicklungsumgebung wird mit der folgenden Meldung ausgeführt:

    VITE v4.3.9  ready in 280 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h to show help

  3. Navigieren Sie in Ihrem Webbrowser zu der oben angegebenen URL (z. B. http://localhost:5173). Die Beispiel-App zeigt Ihnen eine Liste von Objektdateinamen in Ihrem Amazon S3 S3-Bucket.

Bereinigen

Gehen Sie wie folgt vor, um die Ressourcen zu bereinigen, die Sie in diesem Tutorial erstellt haben: