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 APIV3-Referenzhandbuch beschreibt detailliert alle API Funktionen 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 unterSDKfür JavaScript (v3) -Codebeispiele.

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. get StartedRole) in den IAM-Rollennamen ein.

  6. Geben Sie unter Eigenschaften konfigurieren einen Namen (z. B. get StartedPool) in das Feld Identitätspoolname ein.

  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. get StartedRole), die für Ihren Amazon Cognito Cognito-Identitätspool erstellt wurde (z. B. get). StartedPool 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.

So fügen Sie der IAM-Rolle, die nicht authentifizierten Benutzern zugeordnet ist, eine Amazon S3 S3-Richtlinie hinzu

  1. Melden Sie sich bei der an AWS Management Console 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. get StartedRole), und wählen Sie dann den Tab Permissions.

  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 Access und aktivieren Sie es ReadOnly.

    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 Amazon S3 S3-Konsole an AWS Management Console und öffnen Sie sie 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 Benennungsregeln für 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 AWS Codebeispiel-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: