Erste Schritte in React Native - AWS SDK for JavaScript

Helfen Sie uns, dasAWS SDK for JavaScriptVersion 3 (V3) -Dokumentation durch Feedback unter Verwendung derFeedbackLink oder erstellen Sie ein Problem oder ziehen Sie eine Anfrage anGitHubaus.

DieAWS SDK for JavaScriptReferenzhandbuch zur V3-API-Referenzbeschreibt ausführlich alle API-Operationen für dieAWS SDK for JavaScriptVersion 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

In diesem Tutorial erfahren Sie, wie Sie eine React Native App mit erstellen könnenReact Native CLIaus.


                JavaScript code example that applies to React Native.

Dieses Tutorial zeigt Ihnen:

  • So installieren und schließen Sie dieAWS SDK for JavaScriptModule der 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-Dienst, mit dem Sie jederzeit beliebige Mengen von Daten von überall aus im Internet speichern und aufrufen 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 sich mit Amazon S3 verbindet, um einen Amazon S3 S3-Bucket zu erstellen und zu löschen.

Die App verwendet das folgende SDK für JavaScript-APIs:

Einrichtung für dieses Tutorial

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 Einrichten des -SDK für JavaScript.

Anmerkung

Wenn Sie bereits einen der folgenden Schritte durch andere Tutorials oder eine vorhandene Konfiguration ausgeführt haben, überspringen Sie diese Schritte.

So erstellen Sie einenAWSkonto, sieheWie erstelle und aktiviere ich ein neues Amazon Web Services Services-Konto?

Um diese Tutorials durchzuführen, müssen Sie eineAWS Identity and Access Management(IAM) -Benutzer und erhalten Sie Anmeldeinformationen für diesen -Benutzer. Nachdem Sie diese Anmeldeinformationen haben, stellen Sie sie dem SDK in Ihrer Entwicklungsumgebung zur Verfügung. Das geht so:

Erstellen und Verwenden von Anmeldeinformationen

  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 Users und dann Add user aus.

  3. Geben Sie einen Benutzernamen an. Für dieses Tutorial verwenden wirReact-Native-Tutorial-Benutzeraus.

  4. UNDERSelectAWSZugriffstyp, wählen SieProgrammatischer ZugriffKlicken Sie auf und wählen Sie dannWeiter: Berechtigungen.

  5. Wählen Sie Vorhandene Richtlinien direkt zuordnen.

  6. In :Suche, geben Sie eins3Klicken Sie auf und wählen Sie dannAmazonS3FullAccessaus.

  7. Wählen Sie Weiter. Tags,Weiter: Prüfen, undBenutzer erstellenaus.

  8. Notieren Sie die AnmeldeinformationenReact-Native-Tutorial-Benutzeraus. Sie können dies tun, indem Sie die Datei .csv herunterladen oder die Zugriffsschlüssel-ID und den geheimen Zugriffsschlüssel kopieren und einfügen.

    Warnung

    Verwenden Sie geeignete Sicherheitsmaßnahmen, damit diese Anmeldeinformationen geschützt sind und rotieren.

  9. Erstellen oder öffnen Sie die Datei für gemeinsam genutzte AWS-Anmeldeinformationen. Diese Datei ist~/.aws/credentialsAuf Linux- und macOS-Systemen und%USERPROFILE%\.aws\credentialsauf Windows.

  10. Fügen Sie der Datei für gemeinsam genutzte AWS-Anmeldeinformationen den folgenden Text hinzu, ersetzen Sie jedoch die Beispiel-ID und den Beispielschlüssel durch die zuvor erhaltenen Daten. Denken Sie daran, die Datei zu speichern.

    [javascript-tutorials] aws_access_key_id = AKIAIOSFODNN7EXAMPLE aws_secret_access_key = wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY

Das vorangegangene Verfahren ist die einfachste von mehreren Möglichkeiten zur Authentifizierung und Autorisierung. Ausführliche Informationen finden Sie unterFestlegen von Anmelaus.

Um dieses Tutorial abzuschließen, müssen Sie IhreReact Native Entwicklungsumgebungaus.

Außerdem müssen Sie die folgenden Tools installieren:

Schritt 1: Erstellen eines Amazon Cognito Cognito-Identitätspool

In dieser Übung erstellen und verwenden Sie einen Amazon Cognito Identitäten-Pool, um dem Amazon S3 S3-Dienst nicht authentifizierten Zugriff auf Ihre App zu gewähren. Durch das Erstellen eines Identitätspools werden auch zweiAWS Identity and Access Management-Rollen (IAM), 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 Identity Pool

  1. Melden Sie sich beimAWS Management Consoleund öffnen Sie die Amazon Cognito Cognito-Konsole unterAmazon Web Services Serviceskonsole.

  2. Wählen Sie auf der Startseite der Konsole Manage Identity Pools (Identitäten-Pools verwalten) aus.

  3. 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äten-Pools gibt, überspringt die Amazon Cognito Cognito-Konsole diese Seite und öffnen stattdessen die nächsten Seite.

  4. Geben Sie im Getting started wizard (Erste Schritte-Assistenten) einen Namen für Ihren Identitäten-Pool im Feld Identity pool name (Name des Identitäten-Pools) ein.

  5. Wählen Sie Enable access to unauthenticated identities (Zugriff für nicht authentifizierte Identitäten aktivieren) aus.

  6. Wählen Sie Create Pool.

  7. Wählen Sie auf der nächsten SeiteAnzeigen von DetailsUm die Namen der beiden IAM-Rollen anzuzeigen, die für Ihren Identitäten-Pool erstellt wurden. Notieren Sie sich den Namen der Rolle für nicht authentifizierte Identitäten. Sie benötigen diesen Namen, um die erforderliche Richtlinie für Amazon S3 hinzuzufügen.

  8. Wählen Sie Allow.

  9. Wählen Sie auf der Seite Sample code (Beispiecode) die Plattform von JavaScript aus. Anschließend kopieren oder notieren Sie die Identitäten-Pool-ID und die Region. Diese Werte benötigen Sie zum ErsetzenREGIONundIDENTITY_POOL_IDin Ihrem Browser-Skript.

Nach dem Erstellen des -Identitäten-Pools von Amazon Cognito können Sie Berechtigungen für Amazon S3 hinzufügen, die von Ihrer React Native App benötigt werden.

Schritt 2: Hinzufügen einer Richtlinie zur erstellten IAM-Rolle

Um den Zugriff vom Browser-Skript auf Amazon S3 zum Erstellen und Löschen eines Amazon S3 S3-Buckets zu gewähren, verwenden Sie die nicht authentifizierte IAM-Rolle, die für Ihren Amazon Cognito Cognito-Identitäten-Pool erstellt wurde. Dazu müssen Sie der Rolle eine IAM-Richtlinie hinzufügen. Weitere Informationen zu IAM-Rollen finden Sie unterErstellen einer Rolle zum Delegieren von Berechtigungen an eineAWS-ServiceimIAM User Guideaus.

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

  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 Navigationsbereich links auf der Seite Roles (Rollen) aus.

  3. Klicken Sie in der Liste der IAM-Rollen auf den Link für die Rolle der nicht authentifizierten Identitäten, die zuvor von Amazon Cognito erstellt wurde.

  4. Wählen Sie auf der Seite Summary (Übersicht) für diese Rolle die Option Attach policies (Richtlinien anfügen) aus.

  5. In derAnfügen von BerechtigungenFinden Sie für diese Rolle das Kontrollkästchen für diese Rolle und aktivieren Sie esAmazonS3FullAccessaus.

    Anmerkung

    Sie können diesen Prozess verwenden, um den Zugriff auf alleAWSService-Service.

  6. Wählen Sie Attach policy aus.

Nach dem Erstellen des -Identitäten-Pools von Amazon Cognito und dem Hinzufügen von Berechtigungen für Amazon S3 zu Ihrer IAM-Rolle für nicht authentifizierte Benutzer können Sie die App erstellen.

Schritt 3: Erstellen Sie eine App 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-Paket und andere Abhängigkeiten

Führen Sie im Verzeichnis des Projekts die folgenden Befehle aus, um das Amazon S3-Paket zu installieren.

npm install @aws-sdk/client-s3

Mit diesem Befehl wird das Amazon S3-Paket in Ihrem Projekt installiert und aktualisiertpackage.jsonum Amazon S3 als Projektabhängigkeit aufzulisten. Sie finden Informationen zu diesem Paket, indem Sie nach "@aws -sdk“ auf derhttps://www.npmjs.com/NPM Webseite.

Diese Pakete und der zugehörige Code werden im node_modules-Unterverzeichnis Ihres Projekts installiert.

Weitere Informationen zum Installieren von Paketen von Node.js finden Sie unterPakete lokal herunterladen und installierenundErstellen von Node.js Modulenauf dernpm (Paketmanager Node.js) -Websiteaus. Weitere Informationen zum Herunterladen und Installieren des AWS SDK for JavaScript finden Sie unter Installieren des -SDK für JavaScript.

Installieren Sie andere für die Authentifizierung erforderliche Abhängigkeiten.

npm install @aws-sdk/client-cognito-identity @aws-sdk/credential-provider-cognito-identity

Schritt 5: Schreiben des React Native-Codes

Fügen Sie den folgenden Code zuApp.jsaus.

import React, { useState } from "javascriptv3/example_code/reactnative/App"; import { Button, StyleSheet, Text, TextInput, View } from "react-native"; import { S3Client, CreateBucketCommand, DeleteBucketCommand, } from "@aws-sdk/client-s3"; import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity"; const App = () => { const [bucketName, setBucketName] = useState(""); const [successMsg, setSuccessMsg] = useState(""); const [errorMsg, setErrorMsg] = useState(""); // Replace REGION with the appropriate AWS Region, such as 'us-east-1'. const region = "REGION"; const client = new S3Client({ region, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region }), // Replace IDENTITY_POOL_ID with an appropriate Amazon Cognito Identity Pool ID for, such as 'us-east-1:xxxxxx-xxx-4103-9936-b52exxxxfd6'. identityPoolId: "IDENTITY_POOL_ID", }), }); const createBucket = async () => { setSuccessMsg(""); setErrorMsg(""); try { await client.send(new CreateBucketCommand({ Bucket: bucketName })); setSuccessMsg(`Bucket "${bucketName}" created.`); } catch (e) { setErrorMsg(e); } }; const deleteBucket = async () => { setSuccessMsg(""); setErrorMsg(""); try { await client.send(new DeleteBucketCommand({ Bucket: bucketName })); setSuccessMsg(`Bucket "${bucketName}" deleted.`); } catch (e) { setErrorMsg(e); } }; return ( <View style={styles.container}> <Text style={{ color: "green" }}> {successMsg ? `Success: ${successMsg}` : ``} </Text> <Text style={{ color: "red" }}> {errorMsg ? `Error: ${errorMsg}` : ``} </Text> <View> <TextInput style={styles.textInput} onChangeText={(text) => setBucketName(text)} autoCapitalize={"none"} value={bucketName} placeholder={"Enter Bucket Name"} /> <Button backroundColor="#68a0cf" title="Create Bucket" onPress={createBucket} /> <Button backroundColor="#68a0cf" title="Delete Bucket" onPress={deleteBucket} /> </View> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", justifyContent: "center", }, }); export default App;

Der Code zuerst importiert erforderlich React, React Native undAWSSDK-Abhängigkeiten.

Innerhalb der Funktion App:

  • Das S3Client-Objekt wird erstellt und gibt die zuvor erstellten Anmeldeinformationen mit Amazon Cognito Identity Pool an.

  • Die MethodencreateBucketunddeleteBucketerstellen bzw. löschen Sie den angegebenen Bucket.

  • In der Nativen Ansicht „React Native View“ wird ein Texteingabefeld angezeigt, in dem der Benutzer einen Amazon S3 S3-Bucket-Namen angeben kann, und Schaltflächen zum Erstellen und Löschen des angegebenen Amazon S3 S3-Buckets.

Die vollständige JavaScript-Seite ist verfügbarhier auf GitHubaus.

Schritt 6: Ausführen des Beispiels

Um das Beispiel auszuführen, führen Sie entweder web-, ios- oder android-Befehl mit npm aus.

Ein Beispiel für das Laufenios-Befehl auf macOS.

$ npm run ios > ReactNativeApp@0.0.1 ios /Users/trivikr/workspace/ReactNativeApp > react-native run-ios info Found Xcode workspace "ReactNativeApp.xcworkspace" info Launching iPhone 11 (iOS 14.2) info Building (using "xcodebuild -workspace ReactNativeApp.xcworkspace -configuration Debug -scheme ReactNativeApp -destination id=706C1A97-FA38-407D-AD77-CB4FCA9134E9") success Successfully built the app info Installing "/Users/trivikr/Library/Developer/Xcode/DerivedData/ReactNativeApp-cfhmsyhptwflqqejyspdqgjestra/Build/Products/Debug-iphonesimulator/ReactNativeApp.app" info Launching "org.reactjs.native.example.ReactNativeApp" success Successfully launched the app on the simulator

Ein Beispiel für das Laufenandroid-Befehl auf macOS.

$ npm run android > ReactNativeApp@0.0.1 android > react-native run-android info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag. Jetifier found 970 file(s) to forward-jetify. Using 12 workers... info Starting JS server... info Launching emulator... info Successfully launched emulator. info Installing the app... > Task :app:stripDebugDebugSymbols UP-TO-DATE Compatible side by side NDK version was not found. > Task :app:installDebug 02:18:38 V/ddms: execute: running am get-config 02:18:38 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -1 02:18:38 V/ddms: execute: returning Installing APK 'app-debug.apk' on 'Pixel_3a_API_30_x86(AVD) - 11' for app:debug 02:18:38 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554' 02:18:38 D/Device: Uploading file onto device 'emulator-5554' 02:18:38 D/ddms: Reading file permision of /Users/trivikr/workspace/ReactNativeApp/android/app/build/outputs/apk/debug/app-debug.apk as: rw-r--r-- 02:18:40 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk" 02:18:41 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1 02:18:41 V/ddms: execute: returning 02:18:41 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk" 02:18:41 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1 02:18:41 V/ddms: execute: returning Installed on 1 device. Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0. Use '--warning-mode all' to show the individual deprecation warnings. See https://docs.gradle.org/6.2/userguide/command_line_interface.html#sec:command_line_warnings BUILD SUCCESSFUL in 6s 27 actionable tasks: 2 executed, 25 up-to-date info Connecting to the development server... 8081 info Starting the app on "emulator-5554"... Starting: Intent { cmp=com.reactnativeapp/.MainActivity }

Geben Sie den Bucket-Namen ein, den Sie erstellen oder löschen möchten, und klicken Sie aufBucket erstellenoderBucket löschenaus. Der entsprechende Befehl wird an Amazon S3 gesendet und eine Erfolgs- oder Fehlermeldung wird angezeigt.

Mögliche Erweiterungen

Hier sind Varianten dieser Anwendung, die Sie verwenden können, um mithilfe des SDKs für JavaScript in einer React Native App weiter zu arbeiten.

  • Fügen Sie eine Schaltfläche hinzu, um Amazon S3 S3-Buckets aufzulisten, und geben Sie neben jedem aufgelisteten Bucket eine Schaltfläche zum Löschen bereit.

  • Fügen Sie eine Schaltfläche hinzu, um Textobjekt in einen Bucket zu legen.

  • Integrieren Sie einen externen Identitätsanbieter wie Facebook oder Amazon zur Verwendung mit der authentifizierten IAM-Rolle.