In diesem Modul erstellen Sie einen Amazon Cognito-Benutzerpool, um die Konten Ihrer Benutzer zu verwalten. Sie stellen Seiten bereit, über die sich Kunden als neuer Benutzer registrieren, ihre E-Mail-Adresse überprüfen und sich auf der Website anmelden können.

Serverless_Web_App_LP_assets-03

Wenn Benutzer Ihre Website besuchen, registrieren sie zunächst ein neues Benutzerkonto. Für die Zwecke dieses Workshops benötigen wir lediglich eine E-Mail-Adresse und ein Passwort für die Registrierung. Sie können Amazon Cognito jedoch so konfigurieren, dass zusätzliche Attribute in Ihren eigenen Anwendungen erforderlich sind.

Nachdem die Benutzer ihre Registrierung abgeschickt haben, sendet Amazon Cognito an die angegebene Adresse eine Bestätigungs-E-Mail mit einem Bestätigungscode. Zur Bestätigung ihres Kontos kehren die Benutzer zu Ihrer Website zurück und geben ihre E-Mail-Adresse und den Bestätigungscode ein, den sie erhalten haben. Sie können Benutzerkonten auch über die Amazon Cognito-Konsole bestätigen, wenn Sie falsche E-Mail-Adressen zum Testen verwenden möchten.

Nachdem Benutzer ein bestätigtes Konto haben (entweder über den E-Mail-Bestätigungsprozess oder eine manuelle Bestätigung über die Konsole), können sie sich anmelden. Wenn sich Benutzer anmelden, geben sie ihren Benutzernamen (oder ihre E-Mail-Adresse) und ihr Passwort ein. Eine JavaScript-Funktion kommuniziert dann mit Amazon Cognito, authentifiziert sich mit dem sicheren Remote-Passwort-Protokoll (SRP) und erhält eine Reihe von JSON Web Tokens (JWT) zurück. Die JWTs enthalten Behauptungen über die Identität des Benutzers und werden im nächsten Modul verwendet, um sich gegenüber der RESTful API zu authentifizieren, die Sie mit Amazon API Gateway erstellt haben.

Benötigte Zeit: 30 Minuten

Verwendete Services: Amazon Cognito

CloudFormation-Vorlage: Wenn Sie zum nächsten Modul springen möchten, können Sie eine dieser AWS CloudFormation-Vorlagen in derselben Region starten, die Sie in Modul 1 verwendet haben.

Region CloudFormation-Vorlage
USA Ost (Nord-Virginia) Stapel starten >
USA Ost (Ohio) Stapel starten >
USA West (Oregon) Stapel starten >
EU (Frankfurt) Stapel starten >
EU (Irland) Stapel starten >
EU (London) Stapel starten >
Asien-Pazifik (Tokio) Stapel starten >
Asien-Pazifik (Seoul) Stapel starten >
Asien-Pazifik (Sydney) Stapel starten >
Asien-Pazifik (Mumbai) Stapel starten >
Serverless_Web_App_LP_assets-17

CloudFormation-Startanweisungen

  1. Wählen Sie oben die Verknüpfung Stapel starten für die Region Ihrer Wahl.

  2. Wählen Sie auf der Seite der Vorlagenauswahl Weiter.

  3. Geben Sie für den Website-Bucket-Namen den Namen Ihres Website-Buckets aus Modul 1 an (z. B. wildrydes-IhrName) und wählen Sie Weiter.

    Hinweis: Sie müssen denselben Bucket-Namen angeben, den Sie im vorherigen Modul verwendet haben. Wenn Sie einen Bucket-Namen angeben, der nicht vorhanden ist oder auf den Sie keinen Schreibzugriff haben, schlägt der CloudFormation-Stapel während der Erstellung fehl.

  4. Lassen Sie auf der Optionen-Seite alle Standardeinstellungen unverändert und wählen Sie Weiter.

  5. Aktivieren Sie auf der Überprüfungsseite das Kontrollkästchen, damit CloudFormation IAM-Ressourcen erstellt, und wählen Sie Erstellen.

    Diese Vorlage verwendet benutzerdefinierte Ressourcen zum Erstellen eines Amazon Cognito-Benutzerpools und -Clients sowie zum Generieren einer Konfigurationsdatei mit den Details, die zum Herstellen einer Verbindung mit diesem Benutzerpool und zum Hochladen in den Website-Bucket erforderlich sind. Die Vorlage erstellt eine Rolle, über die Sie diese Ressourcen erstellen und die Konfigurationsdatei in Ihren Bucket hochladen können.

  6. Warten Sie darauf, dass der Stapel wildrydes-webapp-2 den folgenden Status erreicht: CREATE_COMPLETE.

  7. Befolgen Sie die in Schritt 4. Ihre Implementierung testen festgelegten Schritte, damit Sie mit dem nächsten Modul fortfahren können.


Folgen Sie der nachfolgenden Schritt-für-Schritt-Anleitung, um Benutzerpools zu erstellen. Klicken Sie auf jede Schrittnummer, um den Abschnitt zu erweitern.

  • Schritt 1. Erstellen eines Amazon Cognito-Benutzerpools

    Amazon Cognito bietet zwei verschiedene Mechanismen zum Authentifizieren von Benutzern. Sie können Cognito-Benutzerpools verwenden, um Ihrer Anwendung Anmelde- und Anmeldefunktionen hinzuzufügen, oder Sie können Cognito-Identitätspools verwenden, um Benutzer über soziale Identitätsanbieter wie Facebook, Twitter oder Amazon mit SAML-Identitätslösungen zu authentifizieren, oder indem Sie Ihr eigenes Identitätssystem verwenden. In diesem Modul verwenden Sie einen Benutzerpool als Backend für die bereitgestellten Registrierungs- und Anmeldeseiten.


    1. Klicken Sie in der AWS-Konsole auf Services und unter Mobile Services wählen Sie dann Cognito aus.
    2. Wählen Sie Ihre Benutzerpools verwalten.
    3. Wählen Sie Einen Benutzerpool erstellen.
    4. Geben Sie einen Namen für Ihren Benutzerpool an, z. B. WildRydes, und wählen Sie dann Standardwerte überprüfen.
    5. Klicken Sie auf der Überprüfungsseite auf Pool erstellen.
    6. Notieren Sie sich die Pool-ID auf der Detailseite Ihres neu erstellten Benutzerpools.
  • Schritt 2. Ihrem Benutzerpool eine App hinzufügen

    Wählen Sie in der Amazon Cognito-Konsole Ihren Benutzerpool und dann den Bereich der App-Clients. Fügen Sie einen neuen App-Client hinzu und vergewissern Sie sich, dass die Option zur Generation eines Clientgeheimnisses deaktiviert ist. Clientgeheimnisse werden derzeit vom JavaScript SDK nicht unterstützt. Wenn Sie eine App mit einem generierten Clientgeheimnis erstellen, löschen Sie sie und erstellen Sie eine neue mit der richtigen Konfiguration.


    1. Wählen Sie in der linken Navigationsleiste auf der Detailseite Ihres Benutzerpools App-Clients aus.
    2. Klicken Sie auf App-Client hinzufügen.
    3. Geben Sie der App einen Namen wie WildRydesWebApp.
    4. Deaktivieren Sie die Option zur Generation eines Clientgeheimnisses. Clientgeheimnisse werden derzeit von browserbasierten Anwendungen nicht unterstützt.
    5. Klicken Sie auf App-Client erstellen.
    6. Notieren Sie sich die App-Client-ID für die neu erstellte Anwendung.
  • Schritt 3. In Ihrem Website-Bucket die Datei config.js aktualisieren

    Die Datei /js/config.js enthält Einstellungen für die Benutzerpool-ID, die App-Client-ID und die Region. Aktualisieren Sie diese Datei mit den Einstellungen aus dem Benutzerpool und der App, die Sie in den vorherigen Schritten erstellt haben, und laden Sie die Datei in Ihren Bucket zurück.


    1. Laden Sie die Datei config.js aus dem Website-Verzeichnis des ersten Moduls in diesem Repository auf Ihren lokalen Rechner herunter. Sie können sie finden, indem Sie zum erstellten S3-Bucket zurückkehren und zum Ordner mit dem Namen "js" navigieren.
    2. Öffnen Sie die heruntergeladene Datei mit dem Texteditor Ihrer Wahl.
    3. Aktualisieren Sie den Cognito-Abschnitt mit den korrekten Werten für den Benutzerpool und die App, die Sie gerade erstellt haben.
    4. Sie finden den Wert für die userPoolId auf der Pool-Detailseite der Amazon Cognito-Konsole, nachdem Sie den von Ihnen erstellten Benutzerpool ausgewählt haben.
      Sie finden den Wert für die userPoolClientId durch die Auswahl von App-Clients in der linken Navigationsleiste. Verwenden Sie den Wert aus dem Feld App-Client-ID für die App, die Sie im vorherigen Abschnitt erstellt haben.
      Der Wert für die region muss mit dem AWS-Regionscode übereinstimmen, den Sie in Ihrem Benutzerpool erstellt haben. Z. B. us-east-1 für die Region Nord-Virginia oder us-west-2 für die Region Oregon. Wenn Sie nicht sicher sind, welcher Code verwendet werden soll, können Sie den ARN-Wert des Pools auf der Seite mit den Pool-Details anzeigen. Der Regionalcode ist der Teil des ARN unmittelbar nach arn:aws:cognito-idp:.
      Die aktualisierte Datei config.js sollte wie folgt aussehen. Beachten Sie, dass sich die tatsächlichen Werte für Ihre Datei unterscheiden:

    window._config = { cognito: { userPoolId: 'us-west-2_uXboG5pAb', // e.g. us-east-2_uXboG5pAb userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv region: 'us-west-2' // e.g. us-east-2 }, api: { invokeUrl: '' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod', } };

    1. Speichern Sie die geänderte Datei und vergewissern Sie sich, dass der Dateiname noch immer wie folgt lautet: config.js.
    2. Öffnen Sie die Amazon S3-Konsole, indem Sie https://console.aws.amazon.com/s3/ besuchen.
    3. Wählen Sie Ihr Wild-Rydes-Website-Bucket aus, das Sie im vorherigen Modul erstellt haben.
    4. Navigieren Sie zum js Präfix.
    5. Wählen Sie Hochladen und dann Dateien hinzufügen.
    6. Navigieren Sie zu dem Verzeichnis, in dem Sie die lokal geänderte Version der Datei config.js gespeichert haben, wählen Sie es aus und wählen Sie Öffnen.
    7. Wählen Sie auf der linken Seite des Dialogs Hochladen.

    Hinweis: Damit Sie den browserseitigen Code zum Verwalten der Registrierungs-, Verifizierungs- und Anmeldungsabläufe nicht selber schreiben müssen, stellen wir eine funktionierende Implementierung in den Komponenten zur Verfügung, die Sie im ersten Modul bereitgestellt haben. Die Datei cognito-auth.js enthält den Code, der Ereignisse auf der Benutzeroberfläche verarbeitet und die entsprechenden SDK-Methoden der Amazon Cognito-Identität aufruft. Weitere Informationen über das SDK finden Sie auf der Projektseite unter GitHub.

  • Schritt 4. Ihre Implementierung prüfen


    1. Rufen Sie /register.html unter Ihrer Website-Domain auf oder wählen Sie die Schaltfläche Giddy Up! auf der Startseite Ihrer Website.
    2. Füllen Sie das Anmeldeformular aus und wählen Sie Mitfahren. Sie können Ihre eigene E-Mail-Adresse verwenden oder eine falsche E-Mail-Adresse eingeben. Achten Sie darauf, ein Kennwort auszuwählen, das mindestens einen Großbuchstaben, eine Zahl und ein Sonderzeichen enthält. Vergessen Sie das Passwort nicht, da Sie es später wieder benötigen. Sie sollten eine Warnung sehen, die Erstellung Ihres Benutzers bestätigt.
    3. Bestätigen Sie Ihren neuen Benutzer mit einer der beiden folgenden Methoden.
    4. Wenn Sie eine E-Mail-Adresse verwendet haben, die Sie kontrollieren, können Sie die Überprüfung des Kontos abschließen, indem Sie unter Ihrer Website-Domain /verify.html aufrufen und den Bestätigungscode eingeben, der Ihnen per E-Mail zugesandt wird. Bitte beachten Sie, dass die Bestätigungs-E-Mail in Ihrem Spam-Ordner landen kann. Für reale Bereitstellungen empfehlen wir, Ihren Benutzerpool so zu konfigurieren, dass der Amazon Simple Email Service verwendet wird, um E-Mails von einer eigenen Domain zu senden.
    5. Wenn Sie eine falsche E-Mail-Adresse verwendet haben, müssen Sie den Benutzer manuell über die Cognito-Konsole bestätigen.
    6. Klicken Sie in der AWS-Konsole auf Services und wählen Sie unter Sicherheit, Identität und Compliance Cognito aus.
    7. Wählen Sie Ihre Benutzerpools verwalten.
    8. Wählen Sie den Cognito-Benutzerpool WildRydes und klicken Sie in der linken Navigationsleiste auf Benutzer und Gruppen.
    9. Sie sollten einen Benutzer sehen, der E-Mail-Adresse entspricht, die Sie über die Registrierungsseite übermittelt haben. Wählen Sie diesen Benutzernamen aus, um die Detailseite des Benutzers anzuzeigen.
    10. Wählen Sie zum Abschluss der Kontoerstellung Benutzer bestätigen.
    11. Nachdem Sie den neuen Benutzer entweder über die Seite /verify.html oder die Cognito-Konsole bestätigt haben, rufen Sie /signin.html auf und melden Sie sich mit der E-Mail-Adresse und dem Passwort an, die Sie während des Registrierungsschritts eingegeben haben.
    12. Wenn Sie erfolgreich sind, werden Sie zu folgender Seite weitergeleitet: /ride.html. Sie sollten eine Benachrichtigung sehen, dass die API nicht konfiguriert ist.
    successful-login