Das [AWS SDK für JavaScript V3-API-Referenzhandbuch](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) beschreibt detailliert alle API-Operationen für die AWS SDK für 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 AWS 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](welcome.md#v3_browsers).
Weitere Beispiele für die Verwendung von (V3) des AWS SDK für JavaScript finden Sie unter[SDK für JavaScript (v3) -Codebeispiele](javascript_code_examples.md).
**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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/).
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 AWS 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](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html) 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 an AWS-Managementkonsole und öffnen Sie die Amazon Cognito Cognito-Konsole unter [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/).
1. Wählen Sie im linken Navigationsbereich **Identity Pools** aus.
1. Wählen Sie **Identitätspool erstellen**.
1. Wählen Sie unter **Vertrauensstellung im Identitätspool konfigurieren** die Option **Gastzugriff** für die Benutzerauthentifizierung aus.
1. 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.
1. Geben **Sie unter Eigenschaften konfigurieren** einen Namen ein (z. B. *getStartedPool*) im Feld **Identitätspoolname**.
1. 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.
1. Notieren Sie sich die **Identitätspool-ID** und die **Region** des neu erstellten Amazon Cognito Cognito-Identitätspools. Sie benötigen diese Werte, um sie zu ersetzen *IDENTITY\$1POOL\$1ID* und einzugeben*REGION*. [Schritt 4: Richten Sie den Browsercode ein](#getting-started-browser-create-html)
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](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy) 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 an AWS-Managementkonsole und öffnen Sie die IAM-Konsole unter. [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)
1. Wählen Sie im linken Navigationsbereich **Roles** aus.
1. Wählen Sie den Namen der Rolle aus, die Sie ändern möchten (z. B. *getStartedRole*), und wählen Sie dann die Registerkarte **Berechtigungen**.
1. Wählen Sie **Berechtigungen hinzufügen** aus und wählen Sie dann **Richtlinien anfügen** aus.
1. 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.
1. 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](https://docs.aws.amazon.com/AmazonS3/latest/userguide/GetStartedWithS3.html) im *Amazon S3 S3-Benutzerhandbuch*.
**Um einen Amazon S3 S3-Bucket und ein Objekt mit CORS hinzuzufügen**
1. Melden Sie sich bei der an AWS-Managementkonsole und öffnen Sie die Amazon S3 S3-Konsole unter [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/).
1. Wählen Sie im linken Navigationsbereich **Buckets** und dann **Create Bucket** aus.
1. **Geben Sie einen Bucket-Namen ein, der den [Regeln für die Benennung von Buckets](https://docs.aws.amazon.com/AmazonS3/latest/userguide/bucketnamingrules.html) entspricht (z. B. *getstartedbucket), und wählen Sie Create Bucket* aus.**
1. **Wählen Sie den Bucket aus, den Sie erstellt haben, und klicken Sie dann auf den Tab Objekte.** Klicken Sie anschließend auf **Upload**.
1. Wählen Sie unter **Files and folders (Dateien und Ordner)** die Option **Add files (Dateien hinzufügen)** aus.
1. 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.
1. 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": []
}
]
```
1. 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.](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/web/s3/list-objects)
**Um die Beispielanwendung einzurichten**
1. Installieren Sie [Node.js](https://nodejs.org/en/download).
1. Klonen Sie das [AWS Codebeispiel-Repository](https://github.com/awsdocs/aws-doc-sdk-examples/) von der Befehlszeile aus:
```
git clone --depth 1 https://github.com/awsdocs/aws-doc-sdk-examples.git
```
1. Navigieren Sie zur Beispielanwendung:
```
cd aws-doc-sdk-examples/javascriptv3/example_code/web/s3/list-objects/
```
1. Führen Sie den folgenden Befehl aus, um die erforderlichen Pakete zu installieren:
```
npm install
```
1. Öffnen Sie anschließend `src/App.tsx` in einem Texteditor und gehen Sie wie folgt vor:
+ *YOUR\$1IDENTITY\$1POOL\$1ID*Ersetzen Sie es durch die Amazon Cognito Cognito-Identitätspool-ID, die Sie notiert [Schritt 1: Erstellen Sie einen Amazon Cognito Cognito-Identitätspool und eine IAM-Rolle](#getting-started-browser-create-identity-pool) haben.
+ Ersetzen Sie den Wert für Region durch die Region, die Ihrem Amazon S3-Bucket und Amazon Cognito Cognito-Identitätspool zugewiesen wurde. Beachten Sie, dass die Regionen für beide Dienste identisch sein müssen (z. B. *us-east-2*).
+ Ersetzen Sie es durch *bucket-name* den Bucket-Namen, in dem Sie es erstellt haben. [Schritt 3: Fügen Sie einen Amazon S3 S3-Bucket und ein Objekt hinzu](#getting-started-browser-create-s3-bucket)
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/
```
1. 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
```
1. 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:
+ Löschen Sie in [der Amazon S3 S3-Konsole](https://console.aws.amazon.com/s3/) alle Objekte und erstellten Buckets (z. B. *getstartedbucket*).
+ Löschen Sie in [der IAM-Konsole](https://console.aws.amazon.com/iam/home#/roles) den Rollennamen (z. B.). *getStartedRole*
+ Löschen Sie in [der Amazon Cognito Cognito-Konsole](https://console.aws.amazon.com/cognito/home#/identity) den Namen des Identitätspools (z. B. *getStartedPool*).