Authentifizieren Sie bestehende Benutzer von React-Anwendungen mithilfe von Amazon Cognito und AWS Amplify UI

Erstellen Sie einen Benutzerpool.

Erstellen Sie einen Amazon Cognito Cognito-Benutzerpool. Konfigurieren Sie die Anmeldeoptionen und Sicherheitsanforderungen des Benutzerpools entsprechend Ihrem Anwendungsfall.

Fügen Sie einen App-Client hinzu.

Konfigurieren Sie einen Benutzerpool-App-Client. Dieser Client ist erforderlich, damit Ihre Anwendung mit dem Amazon Cognito Cognito-Benutzerpool interagieren kann.

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:

npm i @aws-amplify/ui-react aws-amplify

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:

// replace the user pool region, id, and app client id details
const awsmobile = {
    "aws_project_region": "put_your_region_here",
    "aws_cognito_region": "put_your_region_here",
    "aws_user_pools_id": "put_your_user_pool_id_here",
    "aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"
}

export default awsmobile;

Importieren und konfigurieren Sie den Amplify-Dienst.

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:

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

Hinweis: 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:

Sehen Sie sich die folgende Beispielkomponente an:

function App() {
    return (
        <Authenticator>
            {({ signOut, user }) => (
                <div>
                    <p>Welcome {user.username}</p>
                    <button onClick={signOut}>Sign out</button>
                </div>
            )}
        </Authenticator>
    );
}

Hinweis: Eine App.js Beispieldatei finden Sie im Abschnitt Zusätzliche Informationen dieses Musters.

(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 Web-Token (JWT) aus der Sitzung eines Benutzers abrufen, sodass Sie die Anfragen aus seiner Sitzung an ein Backend authentifizieren können. API

Sehen Sie sich das folgende Beispiel für einen Anforderungsheader an, der Folgendes enthält: JWT

import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString();