Richten Sie eine einseitige React-Beispielanwendung ein - Amazon Cognito
Erstellen einer AnwendungErstellen Sie eine Lightsail-Entwicklungsumgebung

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.

Richten Sie eine einseitige React-Beispielanwendung ein

In diesem Tutorial erstellen Sie eine einseitige React-Anwendung, in der Sie die Benutzeranmeldung, Bestätigung und Anmeldung testen können. React ist eine JavaScript basierte Bibliothek für Web- und mobile Apps, deren Schwerpunkt auf der Benutzeroberfläche (UI) liegt. Diese Beispielanwendung demonstriert einige grundlegende Funktionen von Amazon Cognito Cognito-Benutzerpools. Wenn Sie bereits Erfahrung in der Entwicklung von Web-Apps mit React haben, laden Sie die Beispiel-App von GitHub herunter.

Der folgende Screenshot zeigt die erste Authentifizierungsseite in der Anwendung, die Sie erstellen werden.

Ein Screenshot der Anmeldeseite für eine React-basierte Beispiel-Webanwendung.

Mit dem Verfahren Benutzerpool erstellen richten Sie einen Benutzerpool ein, der mit der Beispielanwendung funktioniert. Sie können diesen Schritt überspringen, wenn Sie über einen Benutzerpool verfügen, der die folgenden Anforderungen erfüllt:

  • Benutzer können sich mit ihrer E-Mail-Adresse anmelden. Anmeldeoptionen für den Cognito-Benutzerpool: E-Mail.

  • Bei Benutzernamen wird nicht zwischen Groß- und Kleinschreibung unterschieden. Anforderungen an Benutzernamen: Bei Benutzernamen zwischen Groß- und Kleinschreibung unterscheiden ist nicht ausgewählt.

  • Eine mehrstufige Authentifizierung (MFA) ist nicht erforderlich. MFADurchsetzung: Fakultativ MFA.

  • Ihr Benutzerpool überprüft die Attribute für die Bestätigung des Benutzerprofils mit einer E-Mail-Nachricht. Zu verifizierende Attribute: E-Mail-Nachricht senden, E-Mail-Adresse verifizieren.

  • E-Mail ist das einzige erforderliche Attribut. Erforderliche Attribute: E-Mail.

  • Benutzer können sich selbst in Ihrem Benutzerpool anmelden. Selbstregistrierung: Die Option Selbstregistrierung aktivieren ist ausgewählt.

  • Ihr erster App-Client ist ein öffentlicher Client, der die Anmeldung mit Benutzername und Passwort ermöglicht. App-Typ: Öffentlicher Client, Authentifizierungsabläufe:ALLOW_USER_PASSWORD_AUTH.

Erstellen Sie einen neuen Benutzerpool

  1. Melden Sie sich bei der Amazon-Cognito-Konsole an. Wenn Sie dazu aufgefordert werden, geben Sie Ihre AWS Anmeldeinformationen ein.

  2. Wählen Sie die Schaltfläche Benutzerpool erstellen. Möglicherweise müssen Sie im linken Navigationsbereich Benutzerpools auswählen, um diese Option anzuzeigen.

  3. Wählen Sie in der rechten oberen Ecke der Seite Create a user pool (Benutzerpool erstellen) aus, um den Assistenten zur Erstellung von Benutzerpools zu starten.

  4. Unter Anmeldevorgang konfigurieren können Sie die Identitätsanbieter (IdPs) auswählen, die Sie mit diesem Benutzerpool verwenden möchten. Weitere Informationen finden Sie unter Hinzufügen einer Benutzerpool-Anmeldung über einen Drittanbieter.

    1. Stellen Sie unter Authentifizierungsanbieter für Anbietertypen sicher, dass nur der Cognito-Benutzerpool ausgewählt ist.

    2. Wählen Sie für die Anmeldeoptionen für den Cognito-Benutzerpool die Option Benutzername aus. Wählen Sie keine zusätzlichen Anforderungen für den Benutzernamen aus.

    3. Behalten Sie alle anderen Optionen als Standard bei und wählen Sie Weiter.

  5. Unter Sicherheitsanforderungen konfigurieren können Sie Ihre Kennwortrichtlinie, die Anforderungen für die mehrstufige Authentifizierung (MFA) und die Optionen zur Wiederherstellung von Benutzerkonten auswählen. Weitere Informationen finden Sie unter Verwendung der Sicherheitsfunktionen für Amazon-Cognito-Benutzerpools.

    1. Stellen Sie für die Passwortrichtlinie sicher, dass der Passwortrichtlinienmodus auf die Cognito-Standardeinstellungen eingestellt ist.

    2. Wählen Sie unter Multi-Faktor-Authentifizierung zur MFADurchsetzung die Option Optional aus. MFA

    3. Wählen Sie für MFAMethoden die Option Authenticator-Apps und SMS -Nachrichten aus.

    4. Vergewissern Sie sich, dass für die Wiederherstellung von Benutzerkonten die Option Self-Service-Kontowiederherstellung aktivieren ausgewählt ist und dass die Nachrichtenübermittlungsmethode für die Benutzerkontowiederherstellung auf Nur E-Mail eingestellt ist.

    5. Behalten Sie alle anderen Optionen als Standard bei und wählen Sie Weiter.

  6. Unter Anmeldevorgang konfigurieren können Sie festlegen, wie neue Benutzer ihre Identität überprüfen, wenn sie sich als neuer Benutzer registrieren, und welche Attribute bei der Benutzerregistrierung erforderlich oder optional sein sollen. Weitere Informationen finden Sie unter Verwalten von Benutzern in Ihrem Benutzerpool.

    1. Vergewissern Sie sich, dass Selbstregistrierung aktivieren ausgewählt ist. Diese Einstellung öffnet Ihren Benutzerpool, sodass Sie sich von jedem Benutzer im Internet anmelden können. Dies ist für die Zwecke der Beispielanwendung vorgesehen. Wenden Sie diese Einstellung jedoch in Produktionsumgebungen mit Vorsicht an.

    2. Vergewissern Sie sich, dass unter Cognito-gestützte Überprüfung und Bestätigung das Kontrollkästchen Cognito das automatische Senden von Nachrichten zur Überprüfung und Bestätigung zulassen aktiviert ist.

    3. Vergewissern Sie sich, dass für Zu überprüfende Attribute die Option E-Mail-Nachricht senden, E-Mail-Adresse verifizieren ausgewählt ist.

    4. Vergewissern Sie sich, dass unter Attributänderungen überprüfen die Standardoptionen ausgewählt sind: Ursprünglichen Attributwert beibehalten, wenn ein Update aussteht, und Aktive Attributwerte, wenn ein Update aussteht auf E-Mail-Adresse gesetzt ist.

    5. Vergewissern Sie sich, dass unter Erforderliche Attribute, die auf vorherigen Auswahlen basieren, E-Mail angezeigt wird.

      Wichtig

      Für diese Beispielanwendung darf Ihr Benutzerpool phone_number nicht als erforderliches Attribut festlegen. Wenn phone_number als erforderliches Attribut angezeigt wird, überprüfen und aktualisieren Sie Ihre vorherigen Einstellungen:

      • Optional MFA, nur E-Mail als Zustellungsmethode für Nachrichten zur Wiederherstellung von Benutzerkonten

      • E-Mail-Nachricht senden, E-Mail-Adresse für zu verifizierende Attribute verifizieren

    6. Behalten Sie alle anderen Optionen als Standard bei und wählen Sie Weiter.

  7. Unter Nachrichtenzustellung konfigurieren können Sie die Integration mit Amazon Simple Email Service und Amazon Simple Notification Service konfigurieren, um E-Mails und SMS Nachrichten an Ihre Benutzer zur Registrierung, Kontobestätigung und Kontowiederherstellung zu senden. MFA Weitere Informationen erhalten Sie unter E-Mail-Einstellungen für Amazon-Cognito-Benutzerpools und SMSNachrichteneinstellungen für Amazon Cognito Cognito-Benutzerpools.

    1. Wählen Sie für E-Mail-Anbieter die Option E-Mail mit Cognito senden und verwenden Sie den von Amazon Cognito bereitgestellten Standard-E-Mail-Absender. Diese Einstellung für ein niedriges E-Mail-Volumen ist für Anwendungstests ausreichend. Sie können zurückkehren, nachdem Sie eine E-Mail-Adresse mit Amazon Simple Email Service (AmazonSES) bestätigt und E-Mail mit Amazon senden ausgewählt habenSES.

    2. Wählen Sie für SMSNeue IAM Rolle erstellen aus und geben Sie einen IAMRollennamen ein. Dadurch wird eine Rolle erstellt, die Amazon Cognito Berechtigungen zum Senden von SMS Nachrichten erteilt.

    3. Behalten Sie alle anderen Optionen als Standard bei und wählen Sie Weiter.

  8. Unter Integrieren Sie Ihre App können Sie Ihrem Benutzerpool einen Namen geben, die gehostete Benutzeroberfläche konfigurieren und einen App-Client erstellen. Weitere Informationen finden Sie unter Fügen Sie einen App-Client mit der gehosteten Benutzeroberfläche hinzu. Die Beispielanwendungen verwenden die gehostete Benutzeroberfläche nicht.

    1. Geben Sie unter Benutzerpoolname einen Namen für den Benutzerpool ein.

    2. Wählen Sie nicht Die von Cognito gehostete Benutzeroberfläche verwenden aus.

    3. Vergewissern Sie sich unter Erster App-Client, dass der App-Typ auf Öffentlicher Client eingestellt ist.

    4. Vergewissern Sie sich, dass unter Geheimer Client die Option Keinen geheimen Clientschlüssel generieren ausgewählt ist.

    5. Geben Sie einen App-Client-Namen ein.

    6. Erweitern Sie Erweiterte App-Client-Einstellungen. ALLOW_USER_PASSWORD_AUTHZur Liste der Authentifizierungsabläufe hinzufügen.

    7. Behalten Sie alle anderen Optionen als Standard bei und wählen Sie Weiter.

  9. Überprüfen Sie Ihre Auswahl im Bildschirm „Überprüfen und erstellen“ und ändern Sie alle Auswahlen nach Bedarf. Wenn Sie mit Ihrer Benutzerpool-Konfiguration zufrieden sind, wählen Sie Benutzerpool erstellen, um fortzufahren.

  10. Wählen Sie auf der Seite Benutzerpools Ihren neuen Benutzerpool aus.

  11. Notieren Sie sich unter Benutzerpool-Übersicht Ihre Benutzerpool-ID. Sie geben diese Zeichenfolge an, wenn Sie Ihre Beispielanwendung erstellen.

  12. Wählen Sie die Registerkarte App-Integration und suchen Sie den Abschnitt App-Clients und Analysen. Wählen Sie Ihren neuen App-Client aus. Notieren Sie sich Ihre Kunden-ID.

Erstellen einer Anwendung

Um diese Anwendung zu erstellen, müssen Sie eine Entwicklerumgebung einrichten. Die Anforderungen an die Entwicklerumgebung sind:

  1. Node.js ist installiert und aktualisiert.

  2. Der Node Package Manager (npm) ist installiert und auf mindestens Version 10.2.3 aktualisiert.

  3. Auf die Umgebung kann über TCP Port 5173 in einem Webbrowser zugegriffen werden.

Um eine React-Beispiel-Webanwendung zu erstellen

  1. Melden Sie sich in Ihrer Entwicklerumgebung an und navigieren Sie zum übergeordneten Verzeichnis für Ihre Anwendung.

    cd ~/path/to/project/folder/

  2. Erstellen Sie einen neuen React-Dienst.

    npm create vite@latest frontend-client -- --template react-ts

  3. Klonen Sie den cognito-developer-guide-react-example Projektordner aus dem AWS Codebeispiel-Repository auf GitHub.

    cd ~/some/other/path
    git clone https://github.com/awsdocs/aws-doc-sdk-examples.git
    cp -r ./aws-doc-sdk-examples/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example/frontend-client ~/path/to/project/folder/frontend-client

  4. Navigieren Sie zu dem src Verzeichnis in Ihrem Projekt.

    cd ~/path/to/project/folder/frontend-client/src

  5. Bearbeiten config.json und ersetzen Sie die folgenden Werte:

    1. Durch YOUR_AWS_REGION einen AWS-Region Code ersetzen. Beispiel: us-east-1.

    2. YOUR_COGNITO_USER_POOL_IDErsetzen Sie es durch die ID des Benutzerpools, den Sie zum Testen bestimmt haben. Beispiel: us-east-1_EXAMPLE. Der Benutzerpool muss sich in dem befinden AWS-Region , den Sie im vorherigen Schritt eingegeben haben.

    3. YOUR_COGNITO_APP_CLIENT_IDErsetzen Sie es durch die ID des App-Clients, den Sie zum Testen bestimmt haben. Beispiel: 1example23456789. Der App-Client muss sich im Benutzerpool aus dem vorherigen Schritt befinden.

  6. Wenn Sie von einer anderen IP als auf Ihre Beispielanwendung zugreifen möchtenlocalhost, bearbeiten Sie die Zeile package.json und ändern "dev": "vite", Sie sie in"dev": "vite --host 0.0.0.0",.

  7. Installieren Sie Ihre Anwendung.

    npm install

  8. Starten Sie die Anwendung.

    npm run dev

  9. Greifen Sie in einem Webbrowser unter http://localhost:5173 oder auf die Anwendung zuhttp://[IP address]:5173.

  10. Melden Sie einen neuen Benutzer mit einer gültigen E-Mail-Adresse an.

  11. Rufen Sie den Bestätigungscode aus Ihrer E-Mail-Nachricht ab. Geben Sie den Bestätigungscode in die Anwendung ein.

  12. Melden Sie sich mit Ihrem Benutzernamen und Passwort an.

Erstellen einer React-Entwicklungsumgebung mit Amazon Lightsail

Eine schnelle Möglichkeit, mit dieser Anwendung zu beginnen, besteht darin, einen virtuellen Cloud-Server mit Amazon Lightsail zu erstellen.

Mit Lightsail können Sie schnell eine kleine Serverinstanz erstellen, die mit den Voraussetzungen für diese Beispielanwendung vorkonfiguriert geliefert wird. Sie können SSH Ihre Instanz mit einem browserbasierten Client aufrufen und über eine öffentliche oder private IP-Adresse eine Verbindung zum Webserver herstellen.

Um eine Lightsail-Instanz für diese Beispielanwendung zu erstellen

  1. Gehen Sie zur Lightsail-Konsole. Wenn Sie dazu aufgefordert werden, geben Sie Ihre AWS Anmeldeinformationen ein.

  2. Wählen Sie Create instance (Instance erstellen).

  3. Wählen Sie unter Plattform auswählen die Option Linux/Unix.

  4. Wählen Sie für Select a blueprint die Option Node.js aus.

  5. Geben Sie Ihrer Entwicklungsumgebung unter Identifizieren Sie Ihre Instanz einen benutzerfreundlichen Namen.

  6. Wählen Sie Create instance (Instance erstellen).

  7. Nachdem Lightsail Ihre Instance erstellt hat, wählen Sie sie aus und wählen Sie auf der Registerkarte Connect die Option Connect using aus. SSH

  8. Eine SSH Sitzung wird in einem Browserfenster geöffnet. Führen Sie node -v das Programm aus, npm -v um zu überprüfen, ob Ihre Instanz mit Node.js und der npm-Mindestversion 10.2.3 bereitgestellt wurde.

  9. Fahren Sie mit der Konfiguration Ihrer React-Anwendung fort.