Projekte in AWS

Erstellen einer modernen Webanwendung

Bereitstellen einer Webanwendung, Anbinden an eine Datenbank und Analysieren des Benutzerverhaltens

Modul 4: Benutzerregistrierung konfigurieren

In diesem Modul richten Sie die Benutzerregistrierung auf der Website ein, damit Sie benutzerspezifische Informationen erfassen können.

Übersicht

Bevor wir die Mythical Mysfits-Website um weitere wichtige Aspekte erweitern können, sodass Benutzer z. B. über ihr Lieblings-Mysfit abstimmen und ein Mysfit adoptieren können, müssen sich Benutzer auf der Website registrieren. Für die Registrierung und Authentifizierung von Websitebenutzern erstellen wir in AWS Cognito einen Benutzerpool – einen vollständig verwalteten Service zur Verwaltung von Benutzeridentitäten.

Anschließend möchten wir dafür sorgen, dass nur registrierte Benutzer berechtigt sind, Mysfits auf der Website zu liken oder zu adoptieren. Dazu stellen wir mit Amazon API Gateway eine REST API bereit, die unserem NLB vorgeschaltet ist. Amazon API Gateway ist ebenfalls ein verwalteter Service, der gängige REST API-Funktionen für den sofortigen Einsatz bereitstellt, z. B. SSL-Terminierung, Anfragenautorisierung, Drosselung, API-Phasen und Versioning.

Um die erforderlichen Ressourcen in AWS bereitzustellen, verwenden Sie wieder die AWS CLI.

Architekturdiagramm

Architekturdiagramm für die Einrichtung der Benutzerregistrierung

 Veranschlagte Zeit

60 Minuten

Implementierungsanweisungen

  • A: Erstellen des Cognito-Benutzerpools

    Zum Erstellen des Cognito-Benutzerpools, in dem alle Mythical Mysfits-Besucher gespeichert werden, führen Sie den folgenden CLI-Befehl aus. Dadurch wird ein Benutzerpool mit der Bezeichnung "MysfitsUserPool" erstellt und angegeben, dass die E-Mail-Adresse aller bei diesem Pool registrierten Benutzer automatisch per Bestätigungs-E-Mail verifiziert werden muss. Erst dann sind die Benutzer bestätigt.

    aws cognito-idp create-user-pool --pool-name MysfitsUserPool --auto-verified-attributes email

    Kopieren Sie die Antwort auf den obigen Befehl, die die eindeutige ID Ihres Benutzerpools enthält. Diese benötigen Sie für spätere Schritte. Beispiel-ID: us-east-1_ab12345YZ)

    B: Erstellen eines Cognito-Benutzerpool-Clients

    Als Nächstes möchten wir unsere Frontend-Website in Cognito integrieren. Dazu müssen wir einen neuen Benutzerpool-Client für diesen Benutzerpool erstellen. Dadurch wird eine eindeutige Clientkennung generiert, mit der unsere Website dazu autorisiert werden kann, die nicht authentifizierten APIs in Cognito aufzurufen. Dort können sich Websitebenutzer dann anmelden und im Mythical Mysfits-Benutzerpool registrieren. Um mit der AWS CLI einen neuen Client für den obigen Benutzerpool zu erstellen, führen Sie den folgenden Befehl aus (ersetzen Sie den Wert --user-pool-id mit dem kopierten Wert von oben):

    aws cognito-idp create-user-pool-client --user-pool-id REPLACE_ME --client-name MysfitsUserPoolClient
  • Als Nächstes erstellen wir eine neue RESTful API, die unserem bestehenden Flask-Service vorgeschaltet ist. So können wir Anfragen autorisieren, bevor sie bei unserem NLB eingehen. Dazu verwenden wir Amazon API Gateway, wie in der Modulübersicht beschrieben.

    Damit API Gateway privat in unser NLB integriert werden kann, konfigurieren wir eine API Gateway-VPC-Verknüpfung. Diese ermöglicht uns, API Gateway-APIs direkt in Backend-Webservices zu integrieren, die in einer VPC gehostet sind. Hinweis: Für die Zwecke dieses Workshops haben wir einen mit dem Internet verbundenen NLB erstellt, damit dieser in vorherigen Modulen direkt aufgerufen werden kann. Daher bleibt unser NLB hinter der API Gateway-API öffentlich zugänglich, obwohl wir nach diesem Modul in unserer API Autorisierungstokens voraussetzen.

    In einem realen Szenario sollten Sie von Anfang an einen internen NLB erstellen (oder einen neuen internen Load Balancer erstellen, der den vorhandenen ersetzt), da Sie bereits wissen, dass API Gateway Teil Ihrer Strategie für die API-Autorisierung über das Internet sein wird. Aus Zeitgründen verwenden wir hier jedoch den bereits erstellten NLB, der öffentlich zugänglich bleibt.

    Führen Sie den folgenden CLI-Befehl aus, um die VPC-Verknüpfung für unsere neue REST API zu erstellen (Sie müssen den gezeigten Wert durch den Load Balancer-ARN ersetzen, den Sie beim Erstellen des NLB in Modul 2 gespeichert haben):

    aws apigateway create-vpc-link --name MysfitsApiVpcLink --target-arns REPLACE_ME_NLB_ARN > ~/environment/api-gateway-link-output.json

    Mit dem obigen Befehl wird eine Datei namens "api-gateway-link-output.json" erstellt, die die ID der VPC-Verknüpfung enthält, die wir erstellen. Dabei wird der Status als "Ausstehend" angezeigt, ähnlich wie unten.

    Der Erstellungsvorgang dauert etwa 5–10 Minuten. Sie können die ID aus der Datei kopieren und mit dem nächsten Schritt fortfahren.

    {
        "status": "PENDING",
        "targetArns": [
            "YOUR_ARN_HERE"
        ],
        "id": "abcdef1",
        "name": "MysfitsApiVpcLink"
    }

    Während die VPC-Verknüpfung erstellt wird, können wir mit Amazon API Gateway die eigentliche REST API erstellen.

    B: Erstellen der REST API mit Swagger

    Ihre Mythical Mysfits-REST API wird mithilfe von **Swagger** definiert, einem beliebten Open-Source-Framework zur Beschreibung von APIs über JSON. Diese Swagger-Definition der API befindet sich unter "~/environment/aws-modern-application-workshop/module-4/aws-cli/api-swagger.json". In dieser Datei finden Sie die REST API und alle zugehörigen Ressourcen, Methoden und Konfigurationen.

    Die JSON-Datei muss an mehreren Stellen aktualisiert werden, damit die Parameter für Ihren Cognito-Benutzerpool enthalten sind und Ihr Network Load Balancer angegeben ist.

    Das Objekt "securityDefinitions" in der API-Definition zeigt an, dass wir mit dem Autorisierungs-Header einen apiKey-Autorisierungsmechanismus eingerichtet haben. AWS hat benutzerdefinierte Erweiterungen für Swagger mit dem Präfix "x-amazon-api-gateway-" bereitgestellt. In diesen Erweiterungen können Sie typischen Swagger-Dateien API Gateway-spezifische Funktionen hinzufügen, um deren Vorteile zu nutzen.

    Gehen Sie die Datei mit STRG+F durch, um die Stellen zu finden, an denen Sie "REPLACE_ME" durch Ihre eigenen Parameter ersetzen müssen. Wenn Sie die Werte geändert haben, speichern Sie die Datei und führen Sie den folgenden AWS CLI-Befehl aus:  

    aws apigateway import-rest-api --parameters endpointConfigurationTypes=REGIONAL --body file://~/environment/aws-modern-application-workshop/module-4/aws-cli/api-swagger.json --fail-on-warnings

    Kopieren Sie die Antwort, die dieser Befehl zurückgibt, und speichern Sie den ID-Wert für den nächsten Schritt:

    {
        "name": "MysfitsApi",
        "endpointConfiguration": {
            "types": [
                "REGIONAL"
            ]
        },
        "id": "abcde12345",
        "createdDate": 1529613528
    }
    C: Bereitstellen der API

    Jetzt ist unsere API erstellt, aber noch nicht bereitgestellt. Zum Bereitstellen unserer API müssen wir zunächst eine Bereitstellung erstellen und angeben, für welche **Phase** sie bestimmt ist. Eine Phase ist eine benannte Referenz einer Bereitstellung, die einen Snapshot der API darstellt.

    Mit einer Phase verwalten und optimieren Sie eine bestimmte Bereitstellung. Sie können beispielsweise Phaseneinstellungen einrichten, um das Caching zu aktivieren, die Anfragendrosselung anzupassen, die Protokollierung zu konfigurieren, Phasenvariablen festzulegen oder ein Canary-Release für Tests anzuhängen. Wir nennen unsere Phase "prod". Führen Sie den folgenden CLI-Befehl aus, um eine Bereitstellung für die Phase "prod" zu erstellen:

    aws apigateway create-deployment --rest-api-id REPLACE_ME_WITH_API_ID --stage-name prod

    Hiermit ist unsere REST API für die Benutzerautorisierung bereitgestellt und über das Internet zugänglich. Ihre API ist am folgenden Speicherort verfügbar:

    https://REPLACE_ME_WITH_API_ID.execute-api.REPLACE_ME_WITH_REGION.amazonaws.com/prod

    Kopieren Sie den obigen URI, ersetzen Sie die entsprechenden Werte und fügen Sie am Ende "/mysfits" hinzu. Wenn Sie den Wert in die Adressleiste eines Browsers eingeben, sollte wieder Ihre Mysfits-JSON-Antwort angezeigt werden. Allerdings haben wir mehrere Funktionen wie das Liken und Adoptieren von Mysfits hinzugefügt, die noch nicht in unserem Flask-Service-Backend implementiert sind.

    Darum kümmern wir uns als Nächstes.

    Während diese Service-Updates automatisch Ihre CI/CD-Pipeline durchlaufen, können Sie zum nächsten Schritt übergehen.

  • A: Aktualisieren des Flask-Service-Backends

    Für die neuen Funktionen – Mysfit-Profile aufrufen, Mysfits liken und adoptieren – haben wir aktualisierten Python-Code für das Backend Ihres Flask-Webservice eingefügt.

    Mit diesen Dateien überschreiben wir die vorhandene Codebasis und übertragen sie per Push an das Repository:

    cd ~/environment/MythicalMysfitsService-Repository/
    cp -r ~/environment/aws-modern-application-workshop/module-4/app/* .
    git add .
    git commit -m "Update service code backend to enable additional website features."
    git push

    Während diese Service-Updates automatisch Ihre CI/CD-Pipeline durchlaufen, können Sie zum nächsten Schritt übergehen.

    B: Aktualisieren der Mythical Mysfits-Website in S3

    Öffnen Sie die neue Version der Mythical Mysfits-Datei "index.html", die wir gleich an Amazon S3 übertragen werden. Sie befindet sich unter ~/environment/aws-modern-application-workshop/module-4/app/web/index.html. Diese neue index.html-Datei enthält zusätzlichen HTML- und JavaScript-Code, mit dem wir eine Funktion zur Benutzerregistrierung und -anmeldung hinzufügen.

    Dieser Code interagiert mit dem AWS Cognito JavaScript SDK, um die Registrierung, Authentifizierung und Autorisierung für alle betroffenen API-Aufrufe zu verwalten.

    In dieser Datei ersetzen Sie die Zeichenfolgen "REPLACE_ME" in einzelnen Anführungszeichen durch die von oben kopierten Ausgabewerte. Dann speichern Sie die Datei:

    before-replace2

    Für den Prozess der Benutzerregistrierung müssen Sie diese Werte außerdem in zwei weitere HTML-Dateien einfügen: register.html und confirm.html. Fügen Sie die kopierten Werte auch in diesen Dateien an die Stelle der Zeichenfolgen REPLACE_ME ein.

    Jetzt kopieren wir diese HTML-Dateien und das Cognito JavaScript SDK in den S3-Bucket, in dem der Inhalt unserer Mythical Mysfits-Website gehostet wird, damit die neuen Funktionen online veröffentlicht werden.

    aws s3 cp --recursive ~/environment/aws-modern-application-workshop/module-4/web/ s3://YOUR-S3-BUCKET/

    Aktualisieren Sie die Mythical Mysfits-Website in Ihrem Browser, um die neuen Funktionen auszuprobieren.

    Damit ist Modul 4 abgeschlossen.

Erfassen des Benutzerverhaltens