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 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"} />