Projets sur AWS

Création d'une application Web moderne

Déployer une application Web, se connecter à une base de données et analyser le comportement des utilisateurs

Module 4 : Configuration de l'inscription des utilisateurs

Dans ce module, vous allez configurer l'inscription des utilisateurs sur le site Web de façon à pouvoir récupérer leurs informations.

Présentation

Pour ajouter certaines fonctionnalités essentielles au site Web Mythical Mysfits, comme autoriser les utilisateurs à voter pour leur mysfit favori et adopter un mysfit, nous devons d'abord les inscrire sur le site Web. Pour permettre l'inscription et l'authentification des utilisateurs du site Web, nous allons créer un groupe d'utilisateurs dans AWS Cognito, qui est un service de gestion des identités des utilisateurs entièrement géré.

Ensuite, pour s'assurer que seuls les utilisateurs inscrits peuvent aider ou adopter des mysfits sur le site Web, nous déploierons une API REST avec Amazon API Gateway devant notre NLB. Amazon API Gateway est également un service géré, qui offre les caractéristiques d'une API REST de base dès sa première utilisation, comme l'arrêt SSL, l'autorisation de demande, les limitations, les étapes d'API ou encore le contrôle de version.

Vous utiliserez à nouveau l'interface de ligne de commande AWS pour déployer les ressources nécessaires dans AWS.

Diagramme d'architecture

Diagramme d'architecture sur la configuration de l'inscription des utilisateurs

Instructions

  • A : Création du groupe d'utilisateurs dans Cognito

    Pour créer le groupe d'utilisateurs dans Cognito, espace où tous les visiteurs de Mythical Mysfits sont stockés, exécutez la commande de l'interface de ligne de commande suivante pour créer un groupe d'utilisateurs nommé MysfitsUserPool. Signalez à tous les utilisateurs inscrits dans ce groupe que leurs e-mails doivent être vérifiés par le biais d'un e-mail de confirmation avant d'être validés.

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

    Copiez la réponse de la commande ci-dessus, qui comprend l'identifiant unique de votre groupe d'utilisateurs dont vous aurez besoin ultérieurement. Par exemple : us-east-1_ab12345YZ)

    B : Création d'un client de groupe d'utilisateurs Cognito

    Ensuite, afin d'intégrer notre site Web frontend à Cognito, nous devons créer un nouveau client de groupe d'utilisateurs pour ce groupe d'utilisateurs. Cette action génère un identifiant de client unique qui permettra à notre site Web d'être autorisé à appeler des API non authentifiées dans Cognito où les utilisateurs du site Web peuvent se connecter et s'inscrire au groupe d'utilisateurs de Mythical Mysfits. Pour créer un nouveau client au moyen de l'interface de ligne de commande AWS pour le groupe d'utilisateurs précédemment cité, exécutez la commande suivante (en remplaçant la valeur --user-pool-id par celle que vous avez copiée au -dessus) :

    aws cognito-idp create-user-pool-client --user-pool-id REPLACE_ME --client-name MysfitsUserPoolClient
  • Ensuite, créons une nouvelle API RESTful devant notre service Flask existant, afin que nous puissions effectuer des demandes d'autorisation avant que notre NLB ne reçoive de demandes. Pour ce faire, nous nous servirons d'Amazon API Gateway, comme décrit dans la présentation du modèle.

    Pour permettre à API Gateway de s'intégrer de manière privée à notre NLB, nous allons configurer un lien VPC vers API Gateway permettant aux API de l'API Gateway de s'intégrer directement aux services Web backend qui sont hébergés en privé dans un VPC. Remarque : pour les besoins de cette formation, notre NLB sera accessible sur Internet et pourra ainsi être appelé directement dans les modules précédents. Pour cette raison, même si nous demanderons des jetons d'autorisation dans notre API après ce module, notre NLB sera toutefois ouvert au public derrière l'API API Gateway.

    En temps normal, vous devez créer votre NLB en privé dès le début (ou créer un nouvel équilibreur de charge interne pour remplacer l'existant), en sachant qu'API Gateway doit être votre stratégie pour l'autorisation de l'API accessible sur Internet. Pour gagner du temps, nous utiliserons le NLB déjà créé, qui restera accessible au public.

    Créez le lien VPC pour notre prochaine API REST en utilisant la commande d'interface de ligne de commande suivante (vous devrez remplacer la valeur indiquée par l'ARN de l'équilibreur de charge que vous avez enregistré lors de la création du NLB dans le Module 2) :

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

    La commande ci-dessus va créer un fichier appelé api-gateway-link-output.json qui contient l'identifiant du lien VPC en cours de création. Le statut PENDING s'affiche, comme ci-dessous.

    La création prendra environ 5 à 10 minutes. Vous pouvez copier l'identifiant de ce fichier et passer à l'étape suivante.

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

    Maintenant que le lien VPC est créé, nous pouvons procéder à la création de la véritable API REST à l'aide d'Amazon API Gateway.

    B : Création de l'API REST avec Swagger

    Votre API REST MythicalMysfits est définie en utilisant **Swagger**, un cadre open source populaire pour décrire les API via JSON. Cette définition Swagger de l'APi est située ici : `~/environment/aws-modern-applicaiton-workshop/module-4/aws-cli/api-swagger.json`. Ouvrez ce fichier et vous verrez l'API REST et toutes ses ressources, méthodes et configurations qui y sont définies.

    Vous devez modifier plusieurs éléments de ce fichier JSON pour inclure les paramètres spécifiques à votre groupe d'utilisateurs Cognito et à votre Network Load Balancer.

    L'objet « securityDefinitions » dans la définition de l'API indique que nous avons mis en place un mécanisme d'autorisation apiKey en utilisant l'en-tête Authorization. Vous remarquerez qu'AWS a fourni des extensions spécifiques à Swagger qui utilisent le préfixe « x-amazon-api-gateway- ». Ces extensions définissent l'endroit où les fonctionnalités propres à API Gateway peuvent être ajoutées aux fichiers Swagger typiques, afin que ces derniers bénéficient des capacités spécifiques d'API Gateway.

    Appuyez sur CTRL-F dans l'ensemble du fichier pour rechercher les différentes occurrences de « REPLACE_ME », permettant d'insérer vos paramètres spécifiques. Une fois les modifications apportées, enregistrez le fichier et exécutez la commande d'interface de ligne de commande AWS suivante :  

    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

    Copiez la réponse de cette commande et enregistrez la valeur « id » pour la prochaine étape :

    {
        "name": "MysfitsApi",
        "endpointConfiguration": {
            "types": [
                "REGIONAL"
            ]
        },
        "id": "abcde12345",
        "createdDate": 1529613528
    }
    C : Déploiement de l'API

    Maintenant que notre API a été créée, nous devons la déployer. Pour ce faire,nous devons d'abord créer un déploiement et indiquer à quelle **étape** il se situe. Une étape est une référence nommée à un déploiement, qui est un instantané de l'API.

    Vous utilisez une étape pour gérer et optimiser un déploiement particulier. Par exemple, vous pouvez configurer les paramètres d'une étape pour activer la mise en cache, personnaliser la limitation des demandes, configurer la journalisation, définir les variables de l'étape ou joindre une version Canary à des fins de test. Nous appellerons notre étape « prod ». Pour créer un déploiement pour l'étape « prod », exécutez la commande d'interface de ligne de commande suivante :

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

    De cette façon, notre API REST dotée de l'autorisation d'utilisateur est déployée et disponible sur Internet... mais où ?! Votre API est disponible à l'emplacement suivant :

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

    Copiez le lien ci-dessus en remplaçant les valeurs adéquates et ajoutez /mysfits à la fin de l'URL. Une fois que le lien est entré dans la barre d'adresse du navigateur, vous devriez voir une fois de plus votre réponse JSON Mysfits. Mais nous avons ajouté plusieurs fonctionnalités, comme la possibilité d'adopter et d'aimer des mysfits, que notre backend de service Flask n'a pas encore mises en place.

    Occupons-nous maintenant de ces fonctionnalités.

    Pendant que ces mises à jour de service sont automatiquement transférées dans votre pipeline de CI/CD, passez à l'étape suivante.

  • A : Mise à jour du backend du service Flask

    Pour intégrer la nouvelle fonctionnalité permettant de voir les profils Mysfit, les aimer et les adopter, nous avons inclus le code Python mis à jour à votre service Web Flask backend.

    Remplaçons votre base de code existante par ces fichiers et transférez-les dans le référentiel :

    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

    Pendant que ces mises à jour de service sont automatiquement transférées dans votre pipeline de CI/CD, passez à l'étape suivante.

    B : Mise à jour du site Web Mythical Mysfits dans S3

    Ouvrez la nouvelle version du fichier Mythical Mysfits index.html que nous allons bientôt transférer vers Amazon S3, située ici : ~/environment/aws-modern-application-workshop/module-4/app/web/index.html. Dans ce nouveau fichier, vous remarquerez la présence de code HTML et JavaScript supplémentaire qui est utilisé pour l'inscription et la connexion des utilisateurs.

    Ce code interagit avec le kit SDK JavaScript Cognito AWS pour aider à gérer l'inscription, l'authentification et l'autorisation de tous les appels API qui le nécessitent.

    Dans ce fichier, remplacez les chaînes REPLACE_ME entre guillemets simples par les OutputValues que vous avez copiées précédemment et enregistrez le fichier :

    before-replace2

    De plus, pour le processus d'inscription de l'utilisateur, vous disposez de deux fichiers HTML supplémentaires dans lesquels vous pouvez insérer ces valeurs : register.html et confirm.html. Insérez également dans ces fichiers les valeurs copiées dans les chaînes REPLACE_ME.

    Copions maintenant ces fichiers HTML, ainsi que le kit SDK JavaScript Cognito, dans le compartiment S3 qui héberge le contenu de notre site Web Mythical Mysfits afin que les nouvelles fonctionnalités soient publiées en ligne.

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

    Rafraîchissez le site Web Mythical Mysfits dans votre navigateur pour voir la nouvelle fonctionnalité à l'œuvre !

    Le Module 4 se termine ici.

Appréhender le comportement des utilisateurs