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.

# Authentifizieren Sie bestehende Benutzer von React-Anwendungen mithilfe von Amazon Cognito und AWS Amplify UI
<a name="authenticate-react-app-users-cognito-amplify-ui"></a>

*Daniel Kozhemyako, Amazon Web Services*

## Zusammenfassung
<a name="authenticate-react-app-users-cognito-amplify-ui-summary"></a>

Dieses Muster zeigt, wie einer vorhandenen Frontend-React-Anwendung mithilfe einer AWS Amplify UI-Bibliothek und eines Amazon Cognito Cognito-Benutzerpools Authentifizierungsfunktionen hinzugefügt werden.

Das Muster verwendet Amazon Cognito, um Authentifizierung, Autorisierung und Benutzerverwaltung für die Anwendung bereitzustellen. Es verwendet auch eine Komponente aus [Amplify UI](https://ui.docs.amplify.aws/react/getting-started/introduction), einer Open-Source-Bibliothek, die die Funktionen der AWS Amplify Benutzeroberflächenentwicklung (UI) erweitert. Die [Authenticator-UI-Komponente](https://ui.docs.amplify.aws/react/connected-components/authenticator/advanced) verwaltet Anmeldesitzungen und führt den mit der Cloud verbundenen Workflow aus, der Benutzer über Amazon Cognito authentifiziert.

Nachdem Sie dieses Muster implementiert haben, können sich Benutzer mit beliebigen der folgenden Anmeldeinformationen anmelden:
+ Benutzername und Passwort
+ Anbieter sozialer Identitäten wie Apple, Facebook, Google und Amazon
+ Identitätsanbieter für Unternehmen, die entweder SAML 2.0-kompatibel oder OpenID Connect (OIDC) kompatibel sind

**Anmerkung**  
Um eine benutzerdefinierte Authentifizierungs-UI-Komponente zu erstellen, können Sie die Authenticator-Benutzeroberflächenkomponente im Headless-Modus ausführen.

## Voraussetzungen und Einschränkungen
<a name="authenticate-react-app-users-cognito-amplify-ui-prereqs"></a>

**Voraussetzungen**
+ Eine aktive AWS-Konto
+ Eine Webanwendung mit React 18.2.0 oder höher
+ [Node.js und npm 6.14.4 oder höher, installiert](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

**Einschränkungen**
+ Dieses Muster gilt nur für React-Webanwendungen.
+ Dieses Muster verwendet eine vorgefertigte Amplify-UI-Komponente. Die Lösung deckt nicht die Schritte ab, die zur Implementierung einer benutzerdefinierten UI-Komponente erforderlich sind.

**Produktversionen**
+ Amplify UI 6.1.3 oder höher (Gen 1)
+ Amplify 6.0.16 oder höher (Gen 1)

## Architektur
<a name="authenticate-react-app-users-cognito-amplify-ui-architecture"></a>

**Zielarchitektur**

Das folgende Diagramm zeigt eine Architektur, die Amazon Cognito verwendet, um Benutzer für eine React-Webanwendung zu authentifizieren.

![\[Amazon Cognito authentifiziert Benutzer für eine React-Webanwendung.\]](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/images/pattern-img/b2cea053-6931-4404-8aa8-c623ce2024ac/images/b7f69f20-a39d-4a78-8605-7dab73c59052.png)


## Tools
<a name="authenticate-react-app-users-cognito-amplify-ui-tools"></a>

**AWS-Services**
+ [Amazon Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) bietet Authentifizierung, Autorisierung und Benutzerverwaltung für Web- und mobile Apps.

**Andere Tools**
+ [Amplify UI](https://ui.docs.amplify.aws/react/getting-started/introduction) ist eine Open-Source-UI-Bibliothek, die anpassbare Komponenten bereitstellt, die Sie mit der Cloud verbinden können.
+ [Node.js](https://nodejs.org/en/docs/) ist eine ereignisgesteuerte JavaScript Laufzeitumgebung, die für die Erstellung skalierbarer Netzwerkanwendungen entwickelt wurde.
+ [npm](https://docs.npmjs.com/about-npm) ist eine Softwareregistrierung, die in einer Node.js -Umgebung ausgeführt wird und verwendet wird, um Pakete gemeinsam zu nutzen oder auszuleihen und die Bereitstellung von privaten Paketen zu verwalten.

## Best Practices
<a name="authenticate-react-app-users-cognito-amplify-ui-best-practices"></a>

Wenn Sie eine neue Anwendung erstellen, empfehlen wir Ihnen, Amplify Gen 2 zu verwenden.

## Epen
<a name="authenticate-react-app-users-cognito-amplify-ui-epics"></a>

### Erstellen Sie einen Amazon Cognito Cognito-Benutzerpool
<a name="create-an-cog-user-pool"></a>


| Aufgabe | Description | Erforderliche Fähigkeiten | 
| --- | --- | --- | 
| Erstellen Sie einen Benutzerpool. | [Erstellen Sie einen Amazon Cognito Cognito-Benutzerpool](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-user-pool.html). Konfigurieren Sie die Anmeldeoptionen und Sicherheitsanforderungen des Benutzerpools entsprechend Ihrem Anwendungsfall. | App-Developer | 
| Fügen Sie einen App-Client hinzu. | [Konfigurieren Sie einen Benutzerpool-App-Client](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-client-apps.html). Dieser Client ist erforderlich, damit Ihre Anwendung mit dem Amazon Cognito Cognito-Benutzerpool interagieren kann. | App-Developer | 

### Integrieren Sie Ihren Amazon Cognito Cognito-Benutzerpool in die Authenticator-UI-Komponente
<a name="integrate-your-cog-user-pool-with-the-authenticator-ui-component"></a>


| Aufgabe | Description | Erforderliche Fähigkeiten | 
| --- | --- | --- | 
| Installieren Sie die Abhängigkeiten. | Um die `@aws-amplify/ui-react` Pakete `aws-amplify` und zu installieren, führen Sie den folgenden Befehl im Stammverzeichnis Ihrer Anwendung aus:<pre>npm i @aws-amplify/ui-react aws-amplify</pre> | App-Developer | 
| Konfigurieren Sie den Benutzerpool. | Erstellen Sie anhand des folgenden Beispiels eine `aws-exports.js` Datei und speichern Sie sie im `src` Ordner. Die Datei sollte die folgenden Informationen enthalten:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)<pre>// replace the user pool region, id, and app client id details<br />const awsmobile = {<br />    "aws_project_region": "put_your_region_here",<br />    "aws_cognito_region": "put_your_region_here",<br />    "aws_user_pools_id": "put_your_user_pool_id_here",<br />    "aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"<br />}<br /><br />export default awsmobile;</pre> | App-Developer | 
| Importieren und konfigurieren Sie den Amplify-Dienst. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) | App-Developer | 
| Fügen Sie die Authenticator-UI-Komponente hinzu. | Um die `Authenticator` UI-Komponente anzuzeigen, fügen Sie der Einstiegspunktdatei (`App.js`) der Anwendung die folgenden Codezeilen hinzu:<pre>import { Authenticator } from '@aws-amplify/ui-react';<br />import '@aws-amplify/ui-react/styles.css';</pre>Das Beispielcode-Snippet importiert die `Authenticator` UI-Komponente und die Amplify UI-Datei styles.css, die erforderlich ist, wenn die vorgefertigten Designs der Komponente verwendet werden.Die `Authenticator` UI-Komponente bietet zwei Rückgabewerte:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html)Sehen Sie sich die folgende Beispielkomponente an:<pre>function App() {<br />    return (<br />        <Authenticator><br />            {({ signOut, user }) => (<br />                <div><br />                    <p>Welcome {user.username}</p><br />                    <button onClick={signOut}>Sign out</button><br />                </div><br />            )}<br />        </Authenticator><br />    );<br />}</pre>Eine `App.js` Beispieldatei finden Sie im Abschnitt [Zusätzliche Informationen](#authenticate-react-app-users-cognito-amplify-ui-additional) dieses Musters. | App-Developer | 
| (Optional) Rufen Sie Sitzungsinformationen ab. | Nachdem ein Benutzer authentifiziert wurde, können Sie vom Amplify-Client Daten über seine Sitzung abrufen. Sie können beispielsweise das JSON-Webtoken (JWT) aus der Sitzung eines Benutzers abrufen, sodass Sie die Anfragen aus seiner Sitzung an eine Backend-API authentifizieren können.Sehen Sie sich das folgende Beispiel für einen Anforderungsheader an, der ein JWT enthält:<pre>import { fetchAuthSession } from 'aws-amplify/auth';<br />(await fetchAuthSession()).tokens?.idToken?.toString();</pre> | App-Developer | 

## Fehlerbehebung
<a name="authenticate-react-app-users-cognito-amplify-ui-troubleshooting"></a>


| Problem | Lösung | 
| --- | --- | 
| Neue Benutzer können sich nicht für die Anwendung registrieren. | Stellen Sie wie folgt sicher, dass Ihr Amazon Cognito Cognito-Benutzerpool so konfiguriert ist, dass Benutzer sich selbst für den Benutzerpool anmelden können:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/authenticate-react-app-users-cognito-amplify-ui.html) | 
| Die Auth-Komponente funktionierte nach dem Upgrade von Version 5 auf Version 6 nicht mehr. | Die `Auth` Kategorie wurde in Amplify v6 auf einen funktionalen Ansatz umgestellt und Parameter benannt. Sie müssen die Funktion jetzt APIs direkt aus dem `aws-amplify/auth` Pfad importieren. Weitere Informationen finden Sie unter [Migration von v5 zu v6](https://docs.amplify.aws/gen1/react/build-a-backend/auth/auth-migration-guide/) in der Amplify-Dokumentation. | 

## Zugehörige Ressourcen
<a name="authenticate-react-app-users-cognito-amplify-ui-resources"></a>
+ [Erste Schritte mit Amazon Cognito](https://aws.amazon.com/cognito/getting-started/) (AWS Website)
+ [Erstellen Sie eine neue React-App](https://reactjs.org/docs/create-a-new-react-app.html) (React-Dokumentation)
+ [Was ist Amazon Cognito?](https://docs.aws.amazon.com/cognito/latest/developerguide/what-is-amazon-cognito.html) (Amazon Cognito Cognito-Dokumentation)
+ [Amplify-UI-Bibliothek](https://ui.docs.amplify.aws/) (Amplify-Dokumentation)

## Zusätzliche Informationen
<a name="authenticate-react-app-users-cognito-amplify-ui-additional"></a>

Die `App.js` Datei sollte den folgenden Code enthalten:

```
import './App.css';
import { Amplify } from 'aws-amplify';
import awsExports from './aws-exports';
import { fetchAuthSession } from 'aws-amplify/auth';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
Amplify.configure({ ...awsExports });
let token = (await fetchAuthSession()).tokens?.idToken?.toString();
function App() {
  return (
      <Authenticator>
        {({ signOut, user }) => (
            <div>
              <p>Welcome {user.username}</p>
                <p>Your token is: {token}</p>
              <button onClick={signOut}>Sign out</button>
            </div>
        )}
      </Authenticator>
  );
}

export default App;
```