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. # Erste Schritte mit dem AWS SDK für JavaScript Das AWS SDK für JavaScript bietet Zugriff auf Webdienste in einer Browser- oder Node.js -Umgebung. In diesem Abschnitt finden Sie Übungen für die ersten Schritte, die Ihnen zeigen, wie Sie mit dem AWS SDK für JavaScript jede dieser JavaScript Umgebungen arbeiten können. **Topics** + [SDK-Authentifizierung mit AWS](getting-your-credentials.md) + [Beginnen Sie mit Node.js](getting-started-nodejs.md) + [Fangen Sie im Browser an](getting-started-browser.md) + [Erste Schritte in React Native](getting-started-react-native.md) # SDK-Authentifizierung mit AWS Sie müssen festlegen, wie sich Ihr Code AWS bei der Entwicklung mit AWS-Services authentifiziert. Sie können den programmatischen Zugriff auf AWS Ressourcen je nach Umgebung und verfügbarem AWS Zugriff auf unterschiedliche Weise konfigurieren. Informationen zur Auswahl Ihrer Authentifizierungsmethode und deren Konfiguration für das SDK finden Sie unter [Authentifizierung und Zugriff](https://docs.aws.amazon.com/sdkref/latest/guide/access.html) im *AWS SDKs Referenzhandbuch zu Tools.* Wir empfehlen neuen Benutzern, die sich lokal weiterentwickeln und von ihrem Arbeitgeber keine Authentifizierungsmethode zur Einrichtung erhalten AWS IAM Identity Center. Diese Methode beinhaltet die Installation von, AWS CLI um die Konfiguration zu vereinfachen und sich regelmäßig beim AWS Zugangsportal anzumelden. Wenn Sie sich für diese Methode entscheiden, sollte Ihre Umgebung die folgenden Elemente enthalten, nachdem Sie das Verfahren für die [IAM Identity Center-Authentifizierung](https://docs.aws.amazon.com/sdkref/latest/guide/access-sso.html) im Referenzhandbuch *AWS SDKs und im Tools-Referenzhandbuch* abgeschlossen haben: + Die AWS CLI, mit der Sie eine AWS Access-Portal-Sitzung starten, bevor Sie Ihre Anwendung ausführen. + Eine [gemeinsam genutzte AWS`config` Datei](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html) mit einem `[default]` Profil mit einer Reihe von Konfigurationswerten, auf die vom SDK aus verwiesen werden kann. Informationen zum Speicherort dieser Datei finden Sie unter [Speicherort der gemeinsam genutzten Dateien](https://docs.aws.amazon.com/sdkref/latest/guide/file-location.html) im Referenzhandbuch *AWS SDKs und im Tools-Referenzhandbuch*. + Die gemeinsam genutzte `config` Datei legt die [https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html](https://docs.aws.amazon.com/sdkref/latest/guide/feature-region.html)Einstellung fest. Dies legt die Standardeinstellung AWS-Region fest, die das SDK für AWS Anfragen verwendet. Diese Region wird für SDK-Dienstanforderungen verwendet, für die keine zu verwendende Region angegeben ist. + Das SDK verwendet die [Konfiguration des SSO-Token-Anbieters](https://docs.aws.amazon.com/sdkref/latest/guide/feature-sso-credentials.html#feature-sso-credentials-profile) des Profils, um Anmeldeinformationen abzurufen, bevor Anfragen an gesendet AWS werden. Der `sso_role_name` Wert, bei dem es sich um eine IAM-Rolle handelt, die mit einem IAM Identity Center-Berechtigungssatz verbunden ist, ermöglicht den Zugriff auf die in Ihrer AWS-Services Anwendung verwendeten. Die folgende `config` Beispieldatei zeigt ein Standardprofil, das mit der Konfiguration des SSO-Token-Anbieters eingerichtet wurde. Die `sso_session` Einstellung des Profils bezieht sich auf den benannten [`sso-session`Abschnitt](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html#section-session). Der `sso-session` Abschnitt enthält Einstellungen zum Initiieren einer AWS Access-Portal-Sitzung. ``` [default] sso_session = my-sso sso_account_id = 111122223333 sso_role_name = SampleRole region = us-east-1 output = json [sso-session my-sso] sso_region = us-east-1 sso_start_url = https://provided-domain.awsapps.com/start sso_registration_scopes = sso:account:access ``` Für das AWS SDK für JavaScript Version 3 müssen Ihrer Anwendung keine zusätzlichen Pakete (wie `SSO` und`SSOOIDC`) hinzugefügt werden, um die IAM Identity Center-Authentifizierung verwenden zu können. Einzelheiten zur expliziten Verwendung dieses Anmeldeinformationsanbieters finden Sie [https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso](https://www.npmjs.com/package/@aws-sdk/credential-providers#fromsso)auf der npm-Website (Node.js package manager). ## Starten Sie eine AWS Access-Portal-Sitzung Bevor Sie eine Zugriffsanwendung ausführen AWS-Services, benötigen Sie eine aktive AWS Access-Portal-Sitzung, damit das SDK die IAM Identity Center-Authentifizierung zur Auflösung von Anmeldeinformationen verwenden kann. Abhängig von Ihrer konfigurierten Sitzungsdauer läuft Ihr Zugriff irgendwann ab und das SDK wird auf einen Authentifizierungsfehler stoßen. Um sich beim AWS Zugriffsportal anzumelden, führen Sie den folgenden Befehl in der aus AWS CLI. ``` aws sso login ``` Wenn Sie die Anweisungen befolgt haben und ein Standardprofil eingerichtet haben, müssen Sie den Befehl nicht mit einer `--profile` Option aufrufen. Wenn die Konfiguration Ihres SSO-Token-Anbieters ein benanntes Profil verwendet, lautet der Befehl `aws sso login --profile named-profile`. Führen Sie den folgenden AWS CLI Befehl aus, um optional zu testen, ob Sie bereits eine aktive Sitzung haben. ``` aws sts get-caller-identity ``` Wenn Ihre Sitzung aktiv ist, werden in der Antwort auf diesen Befehl das in der gemeinsam genutzten `config` Datei konfigurierte IAM Identity Center-Konto und der Berechtigungssatz gemeldet. **Anmerkung** Wenn Sie bereits eine aktive AWS Access-Portal-Sitzung haben und ausführen`aws sso login`, müssen Sie keine Anmeldeinformationen angeben. Beim Anmeldevorgang werden Sie möglicherweise aufgefordert, den AWS CLI Zugriff auf Ihre Daten zu gewähren. Da AWS CLI das auf dem SDK für Python aufbaut, können Berechtigungsnachrichten Variationen des `botocore` Namens enthalten. ## Mithilfe der Anmeldeinformationen für die Konsole Sie können Ihre vorhandenen Anmeldedaten für die AWS Management Console für den programmgesteuerten Zugriff AWS auf Dienste verwenden. AWS Generiert nach einem browserbasierten Authentifizierungsablauf temporäre Anmeldeinformationen, die in allen lokalen Entwicklungstools wie der AWS CLI und dem AWS SDK für JavaScript funktionieren. Diese Funktion vereinfacht die Konfiguration und Verwaltung von AWS CLI-Anmeldeinformationen. Folgen Sie den Anweisungen zur [Anmeldung für die AWS lokale Entwicklung mit Konsolenanmeldedaten](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-sign-in.html), um zu erfahren, wie Sie loslegen können. Wenn Sie den **aws login** Befehl ausführen, können Sie aus Ihren aktiven Konsolensitzungen auswählen oder sich über den browserbasierten Authentifizierungsablauf anmelden. Dabei werden automatisch temporäre Anmeldeinformationen generiert. Das AWS SDK für aktualisiert die Anmeldeinformationen JavaScript automatisch 5 Minuten vor Ablauf, wobei jeder Satz von Anmeldeinformationen bis zu 12 Stunden gültig ist. Weitere Informationen finden Sie unter [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/Package/-aws-sdk-credential-providers/#fromlogincredentials). ## Weitere Authentifizierungsinformationen Menschliche Benutzer, auch bekannt als *menschliche Identitäten,* sind die Personen, Administratoren, Entwickler, Betreiber und Verbraucher Ihrer Anwendungen. Sie müssen über eine Identität verfügen, um auf Ihre AWS Umgebungen und Anwendungen zugreifen zu können. Menschliche Benutzer, die Mitglieder Ihres Unternehmens sind — also Sie, der Entwickler — werden als *Personalidentitäten* bezeichnet. Verwenden Sie beim Zugriff AWS temporäre Anmeldeinformationen. Sie können einen Identitätsanbieter für Ihre menschlichen Benutzer verwenden, um Verbundzugriff auf AWS Konten zu ermöglichen, indem Sie Rollen übernehmen, die temporäre Anmeldeinformationen bereitstellen. Für eine zentralisierte Zugriffsverwaltung empfehlen wir Ihnen, AWS IAM Identity Center (IAM Identity Center) zu verwenden, um den Zugriff auf Ihre Konten und die Berechtigungen innerhalb dieser Konten zu verwalten. Weitere Alternativen finden Sie im Folgenden: + Weitere Informationen zu bewährten Methoden finden Sie unter [Bewährte Methoden für die Sicherheit in IAM](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html) im *IAM-Benutzerhandbuch*. + Informationen zum Erstellen kurzfristiger AWS Anmeldeinformationen finden Sie unter [Temporäre Sicherheitsanmeldedaten](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_temp.html) im *IAM-Benutzerhandbuch*. + Weitere Informationen zu anderen AWS SDKs für JavaScript V3-Anmeldeinformationsanbieter finden Sie unter [Standardisierte Anmeldeinformationsanbieter](https://docs.aws.amazon.com/sdkref/latest/guide/standardized-credentials.html) im Referenzhandbuch *AWS SDKs und im Tools-Referenzhandbuch*. # Beginnen Sie mit Node.js Diese Anleitung zeigt Ihnen, wie Sie ein NPM-Paket initialisieren, Ihrem Paket einen Service-Client hinzufügen und das JavaScript SDK verwenden, um eine Serviceaktion aufzurufen. ## Das Szenario **Erstellen Sie ein neues NPM-Paket mit einer Hauptdatei, die Folgendes tut:** + Erstellt einen Amazon Simple Storage Service-Bucket + Fügt ein Objekt in den Amazon S3 S3-Bucket ein + Liest das Objekt im Amazon S3 S3-Bucket + Bestätigt, ob der Benutzer Ressourcen löschen möchte ## Voraussetzungen Bevor Sie das Beispiel ausführen können, müssen Sie Folgendes tun: + Konfigurieren Sie Ihre SDK-Authentifizierung. Weitere Informationen finden Sie unter [SDK-Authentifizierung mit AWS](getting-your-credentials.md). + Installieren Sie [Node.js](https://nodejs.org/en/download). AWS empfiehlt, die Active LTS-Version von Node.js für die Entwicklung zu verwenden. ## Schritt 1: Richten Sie die Paketstruktur ein und installieren Sie die Client-Pakete So richten Sie die Paketstruktur ein und installieren die Client-Pakete: 1. Erstellen Sie einen neuen Ordner`nodegetstarted`, der das Paket enthalten soll. 1. Navigieren Sie von der Befehlszeile aus zu dem neuen Ordner. 1. Führen Sie den folgenden Befehl aus, um eine `package.json` Standarddatei zu erstellen: ``` npm init -y ``` 1. Führen Sie den folgenden Befehl aus, um das Amazon S3 S3-Client-Paket zu installieren: ``` npm i @aws-sdk/client-s3 ``` 1. `"type": "module"`Zur `package.json` Datei hinzufügen. Dadurch wird Node.js angewiesen, die moderne ESM-Syntax zu verwenden. Das Finale `package.json` sollte etwa wie folgt aussehen: ``` { "name": "example-javascriptv3-get-started-node", "version": "1.0.0", "description": "This guide shows you how to initialize an NPM package, add a service client to your package, and use the JavaScript SDK to call a service action.", "main": "index.js", "scripts": { "test": "vitest run **/*.unit.test.js" }, "author": "Your Name", "license": "Apache-2.0", "dependencies": { "@aws-sdk/client-s3": "^3.420.0" }, "type": "module" } ``` ## Schritt 2: Fügen Sie die erforderlichen Importe und den SDK-Code hinzu Fügen Sie den folgenden Code zu einer Datei hinzu, die `index.js` im `nodegetstarted` Ordner benannt ist. ``` // This is used for getting user input. import { createInterface } from "node:readline/promises"; import { S3Client, PutObjectCommand, CreateBucketCommand, DeleteObjectCommand, DeleteBucketCommand, paginateListObjectsV2, GetObjectCommand, } from "@aws-sdk/client-s3"; export async function main() { // A region and credentials can be declared explicitly. For example // `new S3Client({ region: 'us-east-1', credentials: {...} })` would //initialize the client with those settings. However, the SDK will // use your local configuration and credentials if those properties // are not defined here. const s3Client = new S3Client({}); // Create an Amazon S3 bucket. The epoch timestamp is appended // to the name to make it unique. const bucketName = `test-bucket-${Date.now()}`; await s3Client.send( new CreateBucketCommand({ Bucket: bucketName, }), ); // Put an object into an Amazon S3 bucket. await s3Client.send( new PutObjectCommand({ Bucket: bucketName, Key: "my-first-object.txt", Body: "Hello JavaScript SDK!", }), ); // Read the object. const { Body } = await s3Client.send( new GetObjectCommand({ Bucket: bucketName, Key: "my-first-object.txt", }), ); console.log(await Body.transformToString()); // Confirm resource deletion. const prompt = createInterface({ input: process.stdin, output: process.stdout, }); const result = await prompt.question("Empty and delete bucket? (y/n) "); prompt.close(); if (result === "y") { // Create an async iterator over lists of objects in a bucket. const paginator = paginateListObjectsV2( { client: s3Client }, { Bucket: bucketName }, ); for await (const page of paginator) { const objects = page.Contents; if (objects) { // For every object in each page, delete it. for (const object of objects) { await s3Client.send( new DeleteObjectCommand({ Bucket: bucketName, Key: object.Key }), ); } } } // Once all the objects are gone, the bucket can be deleted. await s3Client.send(new DeleteBucketCommand({ Bucket: bucketName })); } } // Call a function if this file was run directly. This allows the file // to be runnable without running on import. import { fileURLToPath } from "node:url"; if (process.argv[1] === fileURLToPath(import.meta.url)) { main(); } ``` Den Beispielcode finden Sie [hier auf GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/index.js). ## Schritt 3: Führen Sie das Beispiel aus **Anmerkung** Denken Sie daran, sich anzumelden\$1 Wenn Sie IAM Identity Center zur Authentifizierung verwenden, denken Sie daran, sich mit dem AWS CLI `aws sso login` folgenden Befehl anzumelden. 1. Führen Sie `node index.js`. 1. Wählen Sie aus, ob der Bucket geleert und gelöscht werden soll. 1. Wenn Sie den Bucket nicht löschen, stellen Sie sicher, dass Sie ihn manuell leeren und später löschen. # 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*). # Erste Schritte in React Native Dieses Tutorial zeigt Ihnen, wie Sie mit React Native [CLI eine React Native-App](https://reactnative.dev/docs/environment-setup) erstellen können. ![\[JavaScript code example that applies to React Native.\]](http://docs.aws.amazon.com/de_de/sdk-for-javascript/v3/developer-guide/images/browsericon.png) **Dieses Tutorial zeigt dir:** + So installieren und integrieren Sie das AWS SDK für Module der JavaScript Version 3 (V3), die Ihr Projekt verwendet. + So schreiben Sie Code, der eine Verbindung zu Amazon Simple Storage Service (Amazon S3) herstellt, um einen Amazon S3-Bucket zu erstellen und zu löschen. ## Das Szenario Amazon S3 ist ein Cloud-Service, mit dem Sie beliebige Datenmengen zu jeder Zeit und von überall im Internet speichern und abrufen können. React Native ist ein Entwicklungsframework, mit dem Sie mobile Anwendungen erstellen können. Dieses Tutorial zeigt Ihnen, wie Sie eine React Native-App erstellen können, die eine Verbindung zu Amazon S3 herstellt, um einen Amazon S3 S3-Bucket zu erstellen und zu löschen. Die App verwendet das folgende AWS SDK für JavaScript APIs: + [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/cognito-identity/) Konstruktor + [https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/client/s3/) Konstruktor ## Erforderliche Aufgaben **Anmerkung** Wenn Sie bereits einen der folgenden Schritte durch andere Tutorials oder eine vorhandene Konfiguration ausgeführt haben, überspringen Sie diese Schritte. Dieser Abschnitt enthält die minimale Einrichtung, die erforderlich ist, um dieses Tutorial abzuschließen. Sie sollten dies nicht als vollständiges Setup betrachten. Sehen Sie dazu [Richten Sie das SDK ein für JavaScript](setting-up.md). + Installieren Sie die folgenden Tools: + [npm](https://docs.npmjs.com/getting-started/) + [Node.js](https://nodejs.org/en/download/) + [Xcode](https://developer.apple.com/xcode/), wenn Sie auf iOS testen + [Android Studio](https://developer.android.com/studio/), wenn Sie auf Android testen + Richten Sie Ihre [React Native-Entwicklungsumgebung](https://reactnative.dev/docs/environment-setup) ein + Richten Sie die Projektumgebung ein, um diese TypeScript Node-Beispiele auszuführen, und installieren Sie das erforderliche AWS SDK für Module JavaScript und Module von Drittanbietern. Folgen Sie den Anweisungen auf [ GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/nodegetstarted/README.md). + Sie müssen festlegen, wie sich Ihr Code AWS bei der Entwicklung mit AWS Diensten authentifiziert. Weitere Informationen finden Sie unter [SDK-Authentifizierung mit AWS](getting-your-credentials.md). **Anmerkung** Die IAM-Rolle für dieses Beispiel sollte so eingestellt sein, dass sie **FullAccessAmazonS3-Berechtigungen** verwendet. ## Schritt 1: Erstellen Sie einen Amazon Cognito Cognito-Identitätspool In dieser Übung erstellen und verwenden Sie einen Amazon Cognito Cognito-Identitätspool, um nicht authentifizierten Zugriff auf Ihre App für den Amazon S3 S3-Service bereitzustellen. Durch die Erstellung eines Identitätspools werden auch zwei AWS Identity and Access Management (IAM-) Rollen erstellt, eine zur Unterstützung von Benutzern, die von einem Identitätsanbieter authentifiziert wurden, und die andere zur Unterstützung nicht authentifizierter Gastbenutzer. In dieser Übung arbeiten wir nur mit der Rolle für nicht authentifizierte Benutzer, um uns auf die Aufgabe zu konzentrieren. Sie können die Unterstützung für einen Identitätsanbieter und authentifizierte Benutzer zu einem späteren Zeitpunkt integrieren. **So erstellen Sie einen Amazon Cognito Cognito-Identitätspool** 1. Melden Sie sich bei der Amazon Cognito-Konsole an AWS-Managementkonsole und öffnen Sie die Amazon Cognito Cognito-Konsole in der [Amazon Web Services Console](https://console.aws.amazon.com/cognito/). 1. Wählen Sie auf der Eröffnungsseite der Konsole **Identity Pools** aus. 1. Wählen Sie auf der nächsten Seite die Option **Create new identity pool (Neuen Identitäten-Pool erstellen)** aus. **Anmerkung** Wenn es keine anderen Identitätspools gibt, überspringt die Amazon Cognito Cognito-Konsole diese Seite und öffnet stattdessen die nächste Seite. 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. *getStartedReactRolle*) in den **IAM-Rollennamen** ein. 1. Geben **Sie unter Eigenschaften konfigurieren** einen Namen (z. B. *getStartedReactPool*) im Feld **Identitätspoolname ein**. 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 für diesen neu erstellten Identitätspool. Sie benötigen diese Werte als Ersatz für *region* und *identityPoolId* in Ihrem Browser-Skript. Nachdem Sie Ihren Amazon Cognito Cognito-Identitätspool erstellt haben, können Sie Berechtigungen für Amazon S3 hinzufügen, die von Ihrer React Native-App benötigt werden. ## Schritt 2: Fügen Sie der erstellten IAM-Rolle eine Richtlinie hinzu Um den Browser-Skriptzugriff auf Amazon S3 zum Erstellen und Löschen eines Amazon S3 S3-Buckets zu aktivieren, verwenden Sie die nicht authentifizierte IAM-Rolle, die für Ihren Amazon Cognito Cognito-Identitätspool erstellt wurde. Dazu müssen Sie der Rolle eine IAM-Richtlinie hinzufügen. Weitere Informationen zu IAM-Rollen finden Sie unter [Creating a Role to Delegate Permissions to an AWS Service](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_create_for-service.html) 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 die App erstellen. ## Schritt 3: App erstellen mit create-react-native-app Erstellen Sie eine React Native-App, indem Sie den folgenden Befehl ausführen. ``` npx react-native init ReactNativeApp --npm ``` ## Schritt 4: Installieren Sie das Amazon S3 S3-Paket und andere Abhängigkeiten Führen Sie im Verzeichnis des Projekts die folgenden Befehle aus, um das Amazon S3 S3-Paket zu installieren. ``` npm install @aws-sdk/client-s3 ``` Mit diesem Befehl wird das Amazon S3-Paket in Ihrem Projekt installiert und aktualisiert`package.json`, sodass Amazon S3 als Projektabhängigkeit aufgeführt wird. Informationen zu diesem Paket finden Sie, indem Sie auf der [https://www.npmjs.com/](https://www.npmjs.com/) npm-Website nach "@aws -sdk“ suchen. Diese Pakete und der zugehörige Code werden im `node_modules`-Unterverzeichnis Ihres Projekts installiert. Weitere Informationen zur Installation von Paketen mit Node.js finden Sie unter [Pakete lokal herunterladen und installieren](https://docs.npmjs.com/downloading-and-installing-packages-locally) und [Module der Datei Node.js erstellen](https://docs.npmjs.com/creating-node-js-modules) auf der [npm-Website (Node.js package manager](https://www.npmjs.com/)). Informationen zum Herunterladen und Installieren des AWS SDK für finden Sie JavaScript unter[Installieren Sie das SDK für JavaScript](setting-up.md#installing-jssdk). Installieren Sie andere Abhängigkeiten, die für die Authentifizierung erforderlich sind. ``` npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity ``` ## Schritt 5: Schreiben Sie den React Native-Code Fügen Sie den folgenden Code zum hinzu`App.tsx`. Ersetzen Sie *identityPoolId* und *region* durch die Identitätspool-ID und die Region, in der Ihr Amazon S3 S3-Bucket erstellt wird. ``` import React, { useCallback, useState } from "react"; import { Button, StyleSheet, Text, TextInput, View } from "react-native"; import "react-native-get-random-values"; import "react-native-url-polyfill/auto"; import { S3Client, CreateBucketCommand, DeleteBucketCommand, } from "@aws-sdk/client-s3"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers"; const client = new S3Client({ // The AWS Region where the Amazon Simple Storage Service (Amazon S3) bucket will be created. Replace this with your Region. region: "us-east-1", credentials: fromCognitoIdentityPool({ // Replace the value of 'identityPoolId' with the ID of an Amazon Cognito identity pool in your Amazon Cognito Region. identityPoolId: "us-east-1:edbe2c04-7f5d-469b-85e5-98096bd75492", // Replace the value of 'region' with your Amazon Cognito Region. clientConfig: { region: "us-east-1" }, }), }); enum MessageType { SUCCESS = 0, FAILURE = 1, EMPTY = 2, } const App = () => { const [bucketName, setBucketName] = useState(""); const [msg, setMsg] = useState<{ message: string; type: MessageType }>({ message: "", type: MessageType.EMPTY, }); const createBucket = useCallback(async () => { setMsg({ message: "", type: MessageType.EMPTY }); try { await client.send(new CreateBucketCommand({ Bucket: bucketName })); setMsg({ message: `Bucket "${bucketName}" created.`, type: MessageType.SUCCESS, }); } catch (e) { console.error(e); setMsg({ message: e instanceof Error ? e.message : "Unknown error", type: MessageType.FAILURE, }); } }, [bucketName]); const deleteBucket = useCallback(async () => { setMsg({ message: "", type: MessageType.EMPTY }); try { await client.send(new DeleteBucketCommand({ Bucket: bucketName })); setMsg({ message: `Bucket "${bucketName}" deleted.`, type: MessageType.SUCCESS, }); } catch (e) { setMsg({ message: e instanceof Error ? e.message : "Unknown error", type: MessageType.FAILURE, }); } }, [bucketName]); return ( {msg.type !== MessageType.EMPTY && ( {msg.message} )} setBucketName(text)} autoCapitalize={"none"} value={bucketName} placeholder={"Enter Bucket Name"} />