Projekte in AWS:

Erstellen einer serverlosen Webanwendung

mit AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB und Amazon Cognito

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

Einführung

Progression-Bar-07

Hosten einer statischen Website

Progression-Bar-14

Benutzer verwalten

Progression-Bar-09

Erstellen eines serverlosen Backends

Progression-Bar-10

Bereitstellen einer RESTful-API

Progression-Bar-11

Beenden von Ressourcen

Modul 2. Benutzerverwaltung

Im Rahmen dieses Moduls erstellen Sie einen Amazon Cognito-Benutzerpool zur Verwaltung der Konten Ihrer Benutzer. Sie stellen Seiten bereit, die Kunden die Registrierung als neuer Benutzer, das Verifizieren ihrer E-Mail-Adresse und die Anmeldung bei der Site ermöglichen.

Übersicht über die Architektur

Serverless_Web_App_LP_assets-03

Wenn Benutzer Ihre Website besuchen, registrieren sie sich als Erstes für ein neues Benutzerkonto. Im Rahmen dieses Workshops sind für die Registrierung nur eine E-Mail-Adresse und ein Passwort erforderlich. Allerdings können Sie Amazon Cognito so konfigurieren, dass für Ihre eigenen Anwendungen zusätzliche Attribute erforderlich sind.

Nach dem Absenden der Registrierung durch den Benutzer sendet Amazon Cognito eine Bestätigungs-E-Mail mit einem Verifizierungscode an die angegebene E-Mail-Adresse. Zur Bestätigung des Kontos kehren Benutzer auf die Website zurück und geben die E-Mail-Adresse und den erhaltenen Verifizierungscode ein. Sie können Benutzerkonten auch anhand der Amazon Cognito-Konsole bestätigen, wenn Sie zum Testen eine Fake-E-Mail-Adresse verwenden möchten.

Wenn Benutzer über ein bestätigtes Konto verfügen (entweder anhand des E-Mail-Verifizierungsprozesses oder einer manuellen Bestätigung anhand der Konsole), können Sie sich anmelden. Bei der Anmeldung geben Benutzer ihren Benutzernamen (oder ihre E-Mail-Adresse) und ihr Passwort an. Eine JavaScript-Funktion kommuniziert dann mit Amazon Cognito, nimmt anhand des Secure Remote Password-Protokolls (SRP) eine Authentifizierung vor und erhält einen Satz JSON-Web-Tokens (JWT) zurück. Die JWTs enthalten Ansprüche bezüglich der Identität des Benutzers und werden im nächsten Modul zur Authentifizierung anhand der RESTful-API verwendet, die Sie mit Amazon API Gateway erstellen.

Veranschlagte Zeit für das Modul: 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 verwenden, die Sie in Modul 1 verwendet haben.

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

CloudFormation-Startanweisungen

  1. Wählen Sie oben in der Region Ihrer Wahl den Link Stack starten aus.

  2. Wählen Sie auf der Seite "Select Template" (Vorlage auswählen) die Option Weiter aus.

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

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

  4. Behalten Sie auf der Seite "Optionen" die Standardwerte bei und wählen Sie dann Weiter.

  5. Aktivieren Sie auf der Seite "Prüfen" das Kontrollkästchen, um zu bestätigen, dass CloudFormation IAM-Ressourcen erstellt, und wählen Sie Erstellen.

    Diese Vorlage nutzt benutzerdefinierte Ressourcen zur Erstellung eines Amazon Cognito-Benutzerpools und -Clients sowie zur Generierung einer Konfigurationsdatei mit den erforderlichen Details für die Verknüpfung mit diesem Benutzerpool und das Hochladen des Benutzerpools in den Website-Bucket. Die Vorlage erstellt eine Rolle, die Zugriff für die Erstellung dieser Ressourcen und das Hochladen der Konfigurationsdatei in den Bucket bietet.

  6. Warten Sie, bis der wildrydes-webapp-2-Stack den Status CREATE_COMPLETE erreicht hat.

  7. Befolgen Sie die Anleitung in Schritt 4: Testen der Implementierung, um zu bestätigen, dass Sie dazu bereit sind, mit dem nächsten Modul fortzufahren.

Implementierungsanweisungen

Befolgen Sie die folgende schrittweise Anleitung zur Erstellung von Benutzerpools. Klicken Sie auf die Nummer eines jeweiligen Schritts, um den Bereich zu erweitern.

  • Schritt 1. Erstellen eines Amazon Cognito-Benutzerpools

    Erstellen eines Amazon Cognito-Benutzerpools

    Amazon Cognito bietet zwei unterschiedliche Mechanismen zum Authentifizieren von Benutzern. Sie können Cognito-Benutzerpools verwenden, um Registrierungs- und Anmeldefunktionen für Ihre Anwendung bereitzustellen. Alternativ haben Sie auch die Möglichkeit, mit Cognito-Identitätspools Benutzer über Social-Identity-Anbieter, wie Facebook, Twitter oder Amazon, über SAML-Identitätslösungen oder über Ihr eigenes Identitätssystem zu authentifizieren. Im Rahmen dieses Moduls verwenden Sie einen Benutzerpool als Backend für die angegebenen Registrierungs- und Anmeldeseiten.

    1. Klicken Sie in der AWS-Konsole auf Services und wählen Sie dann unter "Mobile Services" die Option Cognito aus.
    2. Wählen Sie Eigene Benutzerpools verwalten.
    3. Wählen Sie Erstellen eines Benutzerpools.
    4. Geben Sie einen Namen für Ihren Benutzerpool ein, z. B. WildRydes, und wählen Sie Review Defaults (Standardwerte prüfen).
    5. Klicken Sie auf der Prüfseite auf Pool erstellen.
    6. Notieren Sie sich die Pool-ID auf der Seite "Pooldetails" Ihres neu erstellten Benutzerpools.

  • Schritt 2. Hinzufügen einer App zu Ihrem Benutzerpool

    Hinzufügen einer App zu Ihrem Benutzerpool

    Wählen Sie in der Amazon Cognito-Konsole Ihren Benutzerpool und dann den Bereich "App-Clients" aus. Fügen Sie einen neuen App-Client hinzu und stellen Sie sicher, dass die Option "Clientschlüssel generieren" nicht ausgewählt ist. Das JavaScript-SDK unterstützt derzeit keine Clientschlüssel. Wenn Sie eine App mit einem generierten Schlüssel erstellen, löschen Sie sie und erstellen Sie eine neue mit der korrekten Konfiguration.

    1. Wählen Sie auf der Seite "Pooldetails" Ihres Benutzerpools im linken Bereich Allgemeine Einstellungen der Navigationsleiste die Option App-Clients aus.
    2. Wählen Sie ​App-Client hinzufügen aus.
    3. Geben Sie dem App-Client einen Namen, z. B. WildRydesWebApp.
    4. Heben Sie die Auswahl der Option "Clientschlüssel generieren" auf. Browserbasierte Anwendungen unterstützen derzeit keine Clientschlüssel.
    5. Wählen Sie App-Client erstellen.
    6. Notieren Sie die App-Client-ID für die neu erstellte Anwendung.

  • Schritt 3. Website-Konfiguration aktualisieren

    Website-Konfiguration aktualisieren

    Die Datei /js/config.js enthält die Einstellungen für die Benutzerpool-ID, App-Client-ID und 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 wieder in den Bucket hoch.

    a. Öffnen Sie von Ihrem lokalen Rechner aus `wild-ryde-site/js/config.js` in einem Texteditor Ihrer Wahl.

    b. Aktualisieren Sie den Cognito-Bereich mit den korrekten Werten für den Benutzerpool und die soeben erstellte App.

    Sie finden den Wert für 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 userPoolClientId, indem Sie App-Clients in der linken Navigationsleiste auswählen. 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 Region sollte der AWS-Regionalcode sein, in dem Sie Ihren Benutzerpool angelegt 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 die tatsächlichen Werte für Ihre Daten unterschiedlich sein werden:

    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',
    }
};

    d. Speichern Sie die modifizierte Datei in Ihrem Git-Repository, damit sie automatisch der Ampflify-Konsole bereitgestellt wird.

    $ git push

  • Schritt 4. Testen der Implementierung

    Überprüfen Sie Ihre IAM-Implementierung

    1. Rufen Sie /register.html unter Ihrer Website-Domäne auf oder wählen Sie auf der Startseite Ihrer Website die Schaltfläche Giddy Up! (Los geht's!) aus.
    2. Füllen Sie das Registrierungsformular aus, und wählen Sie Let's Ryde (Los geht's!). Sie können Ihre eigene E-Mail-Adresse angeben oder eine Fake-E-Mail-Adresse angeben. Wählen Sie ein Passwort, dass mindestens einen Großbuchstaben, eine Zahl und ein Sonderzeichen enthält. Vergessen Sie das angegebene Passwort nicht. Es sollte eine Meldung angezeigt werden, auf der die Erstellung des Benutzers bestätigt wird.
    3. Bestätigen Sie den neuen Benutzer anhand einer von zwei Methoden.
    4. Wenn Sie eine von E-Mail-Adresse verwendet haben, auf die Sie zugreifen können, können Sie den Kontoverifizierungsprozess abschließen, indem Sie /verify.html unter Ihrer Website-Domäne aufrufen und den Verifizierungscode eingeben, der Ihnen per E-Mail zugesandt wird. Hinweis: Die Verifizierungs-E-Mails landen möglicherweise im Spam-Ordner. Für echte Bereitstellungen empfehlen wir die Konfiguration Ihres Benutzerpools für die Verwendung von Amazon Simple Email Service, damit Sie E-Mails von einer eigenen Domäne versenden können.
    5. Wenn Sie eine Fake-E-Mail-Adresse angegeben haben, müssen Sie den Benutzer über die Cognito-Konsole manuell bestätigen.
    6. Klicken Sie in der AWS-Konsole auf "Services" und wählen Sie dann unter "Sicherheit, Identität und Compliance" die Option Cognito aus.
    7. Wählen Sie Eigene Benutzerpools verwalten.
    8. Wählen Sie den WildRydes-Benutzerpool aus und klicken Sie in der linken Navigationsleiste auf Benutzer und Gruppen.
    9. Ihnen sollte ein Benutzer angezeigt werden, der der E-Mail-Adresse entspricht, die Sie auf der Registrierungsseite angegeben haben. Wählen Sie diesen Benutzernamen aus, um die Benutzerdetailseite anzuzeigen.
    10. Klicken Sie auf Benutzer bestätigen, um die Kontoerstellung abzuschließen.
    11. Nachdem Sie den neuen Benutzer entweder über die Seite /verify.html oder die Cognito-Konsole bestätigt haben, besuchen Sie /signin.html 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. Ihnen sollte die Benachrichtigung angezeigt werden, dass die API nicht konfiguriert ist.
    successful-login
Weiter: Erstellen eines serverlosen Backend