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. # Erstellen Sie eine React-App mithilfe von AWS Amplify und fügen Sie die Authentifizierung mit Amazon Cognito hinzu *Rishi Singla, Amazon Web Services* ## Zusammenfassung Dieses Muster zeigt, wie Sie mit AWS Amplify eine React-basierte App erstellen und wie Sie mithilfe von Amazon Cognito Authentifizierung zum Frontend hinzufügen. AWS Amplify besteht aus einer Reihe von Tools (Open-Source-Framework, visuelle Entwicklungsumgebung, Konsole) und Services (Web-App und statisches Website-Hosting), um die Entwicklung von Mobil- und Web-Apps auf AWS zu beschleunigen. ## Voraussetzungen und Einschränkungen **Voraussetzungen** + Ein aktives AWS-Konto + [Node.js](https://nodejs.org/en/download/) und [npm](https://www.npmjs.com/get-npm) sind auf Ihrem Computer installiert **Produktversionen** + Node.js Version 10.x oder höher (um Ihre Version zu überprüfen, führen Sie es `node -v` in einem Terminalfenster aus) + npm Version 6.x oder höher (um Ihre Version zu überprüfen, führen Sie es `npm -v` in einem Terminalfenster aus) ## Architektur **Zieltechnologie-Stack** + AWS Amplify + Amazon Cognito ## Tools + [Befehlszeilenschnittstelle (CLI) Amplify](https://docs.amplify.aws/cli/) + [Amplify Libraries](https://docs.amplify.aws/lib/q/platform/react-native/) (Open-Source-Clientbibliotheken) + [Amplify Studio](https://docs.amplify.aws/console/) (visuelle Oberfläche) ## Epen ### Installieren Sie AWS Amplify CLI | Aufgabe | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Installieren Sie die Amplify CLI. | Die Amplify CLI ist eine einheitliche Toolchain zur Erstellung von AWS-Cloud-Services für Ihre React-App. Führen Sie Folgendes aus, um die Amplify-CLI zu installieren:

npm install -g @aws-amplify/cli

npm benachrichtigt Sie, wenn eine neue Hauptversion verfügbar ist. Wenn ja, verwenden Sie den folgenden Befehl, um Ihre Version von npm zu aktualisieren:

npm install -g npm@9.8.0

wobei sich 9.8.0 auf die Version bezieht, die Sie installieren möchten. | App-Developer | ### Erstelle eine React-App | Aufgabe | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Erstellen Sie eine React-App. | Verwenden Sie den folgenden Befehl, um eine neue React-App zu erstellen:

npx create-react-app amplify-react-application

wo `ampify-react-application` ist der Name der App.Wenn die App erfolgreich erstellt wurde, wird die Meldung angezeigt:

Success! Created amplify-react-application

Für die React-App wird ein Verzeichnis mit verschiedenen Unterordnern erstellt. | App-Developer | | Starten Sie die App auf Ihrem lokalen Computer. | Gehen Sie zu dem Verzeichnis`amplify-react-application`, das im vorherigen Schritt erstellt wurde, und führen Sie den folgenden Befehl aus:

amplify-react-application% npm start

Dadurch wird die React-App auf Ihrem lokalen Computer gestartet. | App-Developer | ### Konfigurieren Sie die Amplify CLI | Aufgabe | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Konfigurieren Sie Amplify so, dass es eine Verbindung zu Ihrem AWS-Konto herstellt. | Konfigurieren Sie Amplify, indem Sie den folgenden Befehl ausführen:

amplify-react-application % amplify configure

Die Amplify CLI fordert Sie auf, die folgenden Schritte auszuführen, um den Zugriff auf Ihr AWS-Konto einzurichten:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html)Für dieses Szenario sind IAM-Benutzer mit programmatischem Zugriff und langfristigen Anmeldeinformationen erforderlich, was ein Sicherheitsrisiko darstellt. Um dieses Risiko zu minimieren, empfehlen wir, diesen Benutzern nur die Berechtigungen zu gewähren, die sie für die Ausführung der Aufgabe benötigen, und diese Benutzer zu entfernen, wenn sie nicht mehr benötigt werden. Die Zugriffsschlüssel können bei Bedarf aktualisiert werden. Weitere Informationen finden Sie im *IAM-Benutzerhandbuch* unter [Aktualisieren von Zugriffsschlüsseln](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_credentials_access-keys.html#Using_RotateAccessKey).Diese Schritte werden im Terminal wie folgt angezeigt.

Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region:  us-east-1
Follow the instructions at
https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli
to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue
Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  new

Successfully set up the new user.

Weitere Informationen zu diesen Schritten finden Sie in der [Dokumentation](https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli) im Amplify Dev Center. | Allgemein AWS, App-Entwickler | ### Amplify initialisieren | Aufgabe | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Initialisieren Sie Amplify. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | App-Entwickler, General AWS | ### Fügen Sie dem Frontend eine Authentifizierung hinzu | Aufgabe | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Authentifizierung hinzufügen. | Sie können den `amplify add ` Befehl verwenden, um Funktionen wie eine Benutzeranmeldung oder eine Backend-API hinzuzufügen. In diesem Schritt verwenden Sie den Befehl, um die Authentifizierung hinzuzufügen.Amplify bietet einen Backend-Authentifizierungsservice mit Amazon Cognito, Frontend-Bibliotheken und einer Drop-In-Authenticator-UI-Komponente. Zu den Funktionen gehören Benutzeranmeldung, Benutzeranmeldung, Multi-Faktor-Authentifizierung, Benutzerabmeldung und passwortlose Anmeldung. Sie können Benutzer auch authentifizieren, indem Sie föderierte Identitätsanbieter wie Amazon, Google und Facebook integrieren. Die Amplify-Authentifizierungskategorie lässt sich nahtlos in andere Amplify-Kategorien wie API, Analytik und Speicher integrieren, sodass Sie Autorisierungsregeln für authentifizierte und nicht authentifizierte Benutzer definieren können.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito.html) | App-Entwickler, General AWS | ### Ändern Sie die Datei App.js | Aufgabe | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Ändern Sie die Datei App.js. | Öffnen und überarbeiten Sie die `App.js` Datei in dem `src` Ordner. Die geänderte Datei sollte wie folgt aussehen:

{  App.Js File after modifications:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Amplify } from 'aws-amplify';
import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
function App({ signOut }) {
  return (
      
      Thankyou for doing verification

      My Content

       
    

  );
}
export default withAuthenticator(App);

| App-Developer | | Importiere React-Pakete. | Die `App.js` Datei importiert zwei React-Pakete. Installieren Sie diese Pakete mit dem folgenden Befehl:

amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react

| App-Developer | ### Starten Sie die React-App und überprüfen Sie die Authentifizierung | Aufgabe | Description | Erforderliche Fähigkeiten | | --- | --- | --- | | Starte die App. | Starten Sie die React-App auf Ihrem lokalen Computer:

amplify-react-application1 % npm start

| App-Entwickler, General AWS | | Überprüfen Sie die Authentifizierung. | Prüfen Sie, ob die App zur Eingabe von Authentifizierungsparametern auffordert. (In unserem Beispiel haben wir E-Mail als Anmeldemethode konfiguriert.)Die Frontend-Benutzeroberfläche sollte Sie zur Eingabe der Anmeldeinformationen auffordern und eine Option zum Erstellen eines Kontos bieten.Sie können den Amplify-Build-Prozess auch so konfigurieren, dass das Backend als Teil eines kontinuierlichen Bereitstellungsworkflows hinzugefügt wird. Dieses Muster deckt diese Option jedoch nicht ab. | App-Entwickler, General AWS | ## Zugehörige Ressourcen + [Erste Schritte](https://docs.npmjs.com/getting-started) (npm-Dokumentation) + [Ein eigenständiges AWS-Konto erstellen](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) (Dokumentation zur AWS-Kontoverwaltung) + [Dokumentation zu AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) + [Amazon Cognito Cognito-Dokumentation](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html)