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
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito"></a>

*Rishi Singla, Amazon Web Services*

## Zusammenfassung
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-summary"></a>

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
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-prereqs"></a>

**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
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-architecture"></a>

**Zieltechnologie-Stack**
+ AWS Amplify
+ Amazon Cognito

## Tools
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-tools"></a>
+ [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
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-epics"></a>

### Installieren Sie AWS Amplify CLI
<a name="install-aws-amplify-cli"></a>


| 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:<pre>npm install -g @aws-amplify/cli</pre><br />npm benachrichtigt Sie, wenn eine neue Hauptversion verfügbar ist. Wenn ja, verwenden Sie den folgenden Befehl, um Ihre Version von npm zu aktualisieren:<pre>npm install -g npm@9.8.0</pre><br />wobei sich 9.8.0 auf die Version bezieht, die Sie installieren möchten. | App-Developer | 

### Erstelle eine React-App
<a name="create-a-react-app"></a>


| Aufgabe | Description | Erforderliche Fähigkeiten | 
| --- | --- | --- | 
| Erstellen Sie eine React-App. | Verwenden Sie den folgenden Befehl, um eine neue React-App zu erstellen:<pre>npx create-react-app amplify-react-application</pre><br />wo `ampify-react-application` ist der Name der App.<br />Wenn die App erfolgreich erstellt wurde, wird die Meldung angezeigt:<pre>Success! Created amplify-react-application</pre><br />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:<pre>amplify-react-application% npm start</pre><br />Dadurch wird die React-App auf Ihrem lokalen Computer gestartet. | App-Developer | 

### Konfigurieren Sie die Amplify CLI
<a name="configure-the-amplify-cli"></a>


| 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:<pre>amplify-react-application % amplify configure</pre><br />Die Amplify CLI fordert Sie auf, die folgenden Schritte auszuführen, um den Zugriff auf Ihr AWS-Konto einzurichten:1. Melden Sie sich mit Ihrem AWS-Administratorkonto an.<br />2. Geben Sie die AWS-Region an, die Sie verwenden möchten.<br />3. Erstellen Sie einen AWS Identity and Access Management (IAM) -Benutzer mit programmatischem Zugriff und hängen Sie die `AdministratorAccess-Amplify` Berechtigungsrichtlinie an den Benutzer an.<br />4. Erstellen Sie die Zugriffsschlüssel-ID und den geheimen Zugriffsschlüssel und kopieren Sie sie anschließend.<br />5. Geben Sie diese Daten in das Terminal ein.<br />6. Erstellen Sie einen Profilnamen oder verwenden Sie das Standardprofil.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).<br />Diese Schritte werden im Terminal wie folgt angezeigt.<pre>Follow these steps to set up access to your AWS account:<br />Sign in to your AWS administrator account:<br />https://console.aws.amazon.com/<br />Press Enter to continue<br />Specify the AWS Region<br />? region:  us-east-1<br />Follow the instructions at<br />https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli<br />to complete the user creation in the AWS console<br />https://console.aws.amazon.com/iamv2/home#/users/create<br />Press Enter to continue<br />Enter the access key of the newly created user:<br />? accessKeyId:  ********************<br />? secretAccessKey:  ****************************************<br />This would update/create the AWS Profile in your local machine<br />? Profile Name:  new<br /><br />Successfully set up the new user.</pre><br />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
<a name="initialize-amplify"></a>


| Aufgabe | Description | Erforderliche Fähigkeiten | 
| --- | --- | --- | 
| Initialisieren Sie Amplify. | 1. Um Amplify im neuen Verzeichnis zu initialisieren, führen Sie Folgendes aus:<pre>amplify init</pre><br />Amplify fordert Sie zur Eingabe des Projektnamens und der Konfigurationsparameter auf<br />2. Geben Sie alle Parameter an und drücken Sie dann **Y**, um das Projekt mit der angegebenen Konfiguration zu initialisieren.<pre>Project information<br />| Name: amplifyreactproject<br /><br />| Environment: dev<br /><br />| Default editor: Visual Studio Code<br /><br />| App type: javascript<br /><br />| Javascript framework: react<br /><br />| Source Directory Path: src<br /><br />| Distribution Directory Path: build<br /><br />| Build Command: npm run-script build<br /><br />| Start Command: npm run-script start</pre><br />3. Wählen Sie das Profil aus, das Sie im vorherigen Schritt erstellt haben. Die Ressourcen werden in der `dev` Umgebung des von Ihnen erstellten Amplify-Projekts bereitgestellt.<br />4. Um zu bestätigen, dass die Ressourcen erstellt wurden, können Sie die [AWS Amplify Amplify-Konsole](https://console.aws.amazon.com/amplify/home) öffnen und die CloudFormation AWS-Vorlage, die zur Erstellung der Ressourcen verwendet wurde, sowie die Details anzeigen.<pre>Deploying root stack amplifyreactproject [ ====================-------------------- ] 2/4<br />amplify-amplifyreactproject-d… AWS::CloudFormation::Stack     CREATE_IN_PROGRESS            <br /><br />UnauthRole                     AWS::IAM::Role                 CREATE_COMPLETE                 <br /><br />DeploymentBucket               AWS::S3::Bucket                CREATE_IN_PROGRESS         <br /><br />AuthRole                       AWS::IAM::Role                 CREATE_COMPLETE   </pre> | App-Entwickler, General AWS | 

### Fügen Sie dem Frontend eine Authentifizierung hinzu
<a name="add-authentication-to-the-frontend"></a>


| Aufgabe | Description | Erforderliche Fähigkeiten | 
| --- | --- | --- | 
| Authentifizierung hinzufügen. | Sie können den `amplify add <category>` 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.<br />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.1. Führen Sie den folgenden Befehl aus, um die Authentifizierung für Ihre React-App zu konfigurieren:<pre>amplify-react-application1 % amplify add auth</pre><br />Dadurch werden die folgenden Informationen und Eingabeaufforderungen angezeigt. Sie können je nach Ihren Geschäfts- und Sicherheitsanforderungen die passende Konfiguration auswählen.<pre>Using service: Cognito, provided by: awscloudformation<br /> The current configured provider is Amazon Cognito. <br />Do you want to use the default authentication and security configuration? (Use arrow keys)<br /><br />❯ Default configuration <br /><br />  Default configuration with Social Provider (Federation) <br /><br />  Manual configuration <br /><br />  I want to learn more. </pre><br />2. Wählen Sie für ein einfaches Beispiel die Standardkonfiguration und dann den Anmeldemechanismus für Benutzer (in diesem Fall E-Mail):<pre>How do you want users to be able to sign in? <br /> Username <br /><br />❯ Email <br /><br />  Phone Number <br /><br />  Email or Phone Number <br /><br />  I want to learn more. </pre><br />3. Umgehen Sie die erweiterten Einstellungen, um das Hinzufügen von Authentifizierungsressourcen abzuschließen:  <pre>Do you want to configure advanced settings? (Use arrow keys)<br />❯ No, I am done. <br /><br />  Yes, I want to make some additional changes.</pre><br />4. Erstellen Sie Ihre lokalen Backend-Ressourcen und stellen Sie sie in der Cloud bereit:<pre>amplify-react-application1 % amplify push</pre><br />Mit diesem Befehl werden die entsprechenden Änderungen an den Congito-Benutzerpools in Ihrem Konto vorgenommen.<br />5. Drücken Sie **Y**, um die `auth` Ressource mithilfe von zu konfigurieren. CloudFormation<br />Dadurch werden die folgenden Ressourcen konfiguriert:<pre>UserPool                       AWS::Cognito::UserPool         CREATE_COMPLETE  <br />UserPoolClientWeb              AWS::Cognito::UserPoolClient   CREATE_COMPLETE    <br />UserPoolClientWeb              AWS::Cognito::UserPoolClient   CREATE_COMPLETE            <br />UserPoolClientRole             AWS::IAM::Role                 CREATE_COMPLETE                <br />UserPoolClientLambda           AWS::Lambda::Function          CREATE_COMPLETE  <br />UserPoolClientLambdaPolicy     AWS::IAM::Policy               CREATE_COMPLETE                <br />UserPoolClientLogPolicy        AWS::IAM::Policy               CREATE_IN_PROGRESS                </pre><br />Sie können diese Ressourcen auch mit der [AWS Cognito-Konsole](https://console.aws.amazon.com/cognito/home) anzeigen (suchen Sie nach Cognito-Benutzerpools und Identitätspools).<br />In diesem Schritt wird die `aws-exports.js` Datei im `src` Ordner für Ihre React-App mit den Cognito-Benutzerpool- und Identitätspool-Konfigurationen aktualisiert. | App-Entwickler, General AWS | 

### Ändern Sie die Datei App.js
<a name="change-the-app-js-file"></a>


| 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:<pre>{  App.Js File after modifications:<br />import React from 'react';<br />import logo from './logo.svg';<br />import './App.css';<br />import { Amplify } from 'aws-amplify';<br />import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';<br />import awsconfig from './aws-exports';<br />Amplify.configure(awsconfig);<br />function App({ signOut }) {<br />  return (<br />      <div><br />      <h1>Thankyou for doing verification</h1><br />      <h2>My Content</h2><br />       <button onClick={signOut}>Sign out</button><br />    </div><br />  );<br />}<br />export default withAuthenticator(App);</pre> | App-Developer | 
| Importiere React-Pakete. | Die `App.js` Datei importiert zwei React-Pakete. Installieren Sie diese Pakete mit dem folgenden Befehl:<pre>amplify-react-application1 % npm install --save aws-amplify @aws-amplify/ui-react</pre> | App-Developer | 

### Starten Sie die React-App und überprüfen Sie die Authentifizierung
<a name="launch-the-react-app-and-check-authentication"></a>


| Aufgabe | Description | Erforderliche Fähigkeiten | 
| --- | --- | --- | 
| Starte die App. | Starten Sie die React-App auf Ihrem lokalen Computer:<pre>amplify-react-application1 % npm start</pre> | 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.)<br />Die Frontend-Benutzeroberfläche sollte Sie zur Eingabe der Anmeldeinformationen auffordern und eine Option zum Erstellen eines Kontos bieten.<br />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
<a name="create-a-react-app-by-using-aws-amplify-and-add-authentication-with-amazon-cognito-resources"></a>
+ [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)