Projets sur AWS :

Créer une application web sans serveur

avec AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB et Amazon Cognito

Serverless_Web_App_LP_assets-15
Serverless_Web_App_LP_assets-22

Introduction

Progression-Bar-07

Hébergement d'un site web statique

Progression-Bar-14

Gérer les utilisateurs

Progression-Bar-09

Créer un backend sans serveur

Progression-Bar-10

Déployer une API RESTful

Progression-Bar-11

Résiliation des ressources

Module 2. Gestion des utilisateurs

Dans ce module, vous allez créer un groupe d'utilisateurs Amazon Cognito afin de gérer les comptes de vos utilisateurs. Vous déploierez des pages permettant aux clients de s'inscrire en tant que nouvel utilisateur, de confirmer leur adresse e-mail et de se connecter au site.

Présentation de l'architecture

Serverless_Web_App_LP_assets-03

Lorsque des utilisateurs visitent votre site Web, ils commencent par créer un nouveau compte d'utilisateur. Dans le cadre de cet atelier, nous leur demanderons simplement d'indiquer une adresse e-mail et un mot de passe pour s'inscrire. Cependant, vous pouvez configurer Amazon Cognito de manière à demander des attributs supplémentaires dans vos propres applications.

Une fois que les utilisateurs ont soumis leur demande d'inscription, Amazon Cognito envoie un e-mail de confirmation contenant un code de vérification à l'adresse qu'ils ont indiquée. Pour confirmer leur compte, les utilisateurs doivent revenir sur votre site et saisir leur adresse e-mail ainsi que le code de vérification qu'ils ont reçu. Vous pouvez aussi confirmer les comptes utilisateur via la console Amazon Cognito si vous préférez utiliser de fausses adresses e-mail à des fins de test.

Une fois que les utilisateurs disposent d'un compte confirmé (soit via le processus de vérification par e-mail, soit par une confirmation manuelle dans la console), ils ont la possibilité de se connecter. Pour se connecter, les utilisateurs saisissent leur nom d'utilisateur (ou adresse e-mail) et leur mot de passe. Une fonction JavaScript communique alors avec Amazon Cognito, procède à l'authentification via le protocole SRP (Secure Remote Password) et reçoit en retour un ensemble de jetons Web JSON (JWT). Les JWT contiennent des affirmations concernant l'identité de l'utilisateur et seront utilisés dans le module suivant pour l'authentification avec l'API RESTful que vous allez créer avec Amazon API Gateway.

Durée de réalisation du module : 30 minutes

Services utilisés : Amazon Cognito

Modèle CloudFormation : si vous souhaitez passer directement au module suivant, vous pouvez lancer un de ces templates AWS CloudFormation dans la région que vous avez utilisée pour le module 1.

Région Modèle CloudFormation
USA Est (Virginie du Nord) Lancer la pile >
USA Est (Ohio) Lancer la pile >
USA Ouest (Oregon) Lancer la pile >
UE (Francfort) Lancer la pile >
UE (Irlande) Lancer la pile >
UE (Londres) Lancer la pile >
Asie-Pacifique (Tokyo) Lancer la pile >
Asie-Pacifique (Séoul) Lancer la pile >
Asie-Pacifique (Sydney) Lancer la pile >
Asie-Pacifique (Mumbai) Lancer la pile >
Serverless_Web_App_LP_assets-17

Instructions de lancement CloudFormation

  1. Sélectionnez le lien Lancer la pile ci-dessus correspondant à la région de votre choix.

  2. Sur la page Sélectionner un modèle, choisissez Suivant.

  3. Indiquez le nom donné au compartiment de votre site web lors du module 1 pour le nom du compartiment du site web (par exemple wildrydes-yourname) et choisissez Suivant.

    Remarque : Vous devez indiquer le même nom de compartiment que celui utilisé dans le module précédent. Si vous spécifiez un nom de compartiment qui n'existe pas ou auquel vous n'avez pas accès en écriture, la création de la pile CloudFormation échoue.

  4. Dans la page Options, conservez les valeurs par défaut, puis choisissez Suivant.

  5. Sur la page Vérification, cochez la case pour accepter le fait que CloudFormation créera des ressources IAM, puis choisissez Créer.

    Ce modèle utilise des ressources personnalisées pour créer un client et un groupe d'utilisateurs Amazon Cognito. Il génère également un fichier de configuration contenant les informations nécessaires pour se connecter à ce groupe d'utilisateurs et le charger dans le compartiment de votre site. Le modèle crée un rôle qui fournit un accès pour créer ces ressources et charger le fichier de configuration dans votre compartiment.

  6. Attendez que la pile wildrydes-webapp-2 atteigne le statut CREATE_COMPLETE.

  7. Suivez les étapes décrites dans l'étape 4. Testez votre implémentation pour vérifier que vous êtes prêt à passer au module suivant.

Instructions de mise en œuvre

Suivez les instructions détaillées ci-dessous pour créer des groupes d'utilisateurs. Cliquez sur chaque numéro d’étape pour développer la section correspondante.

  • Étape 1. Créer un groupe d'utilisateurs Amazon Cognito

    Créer un groupe d'utilisateurs Amazon Cognito

    Amazon Cognito propose deux mécanismes différents pour l'authentification des utilisateurs. Vous pouvez utiliser les groupes d'utilisateurs Cognito pour ajouter des options d'inscription et de connexion à votre application, ou les groupes d'identités Cognito pour authentifier les utilisateurs via des fournisseurs d'identité sociale tels que Facebook, Twitter ou Amazon, grâce à des solutions d'identité SAML ou avec votre propre système d'identité. Dans le cadre de ce module, vous utiliserez un groupe d'utilisateurs comme backend pour les pages d'inscription et de connexion fournies.

    1. Depuis la console AWS, cliquez sur Services, puis sélectionnez Cognito sous Services mobiles.
    2. Sélectionnez Gérer vos groupes d'utilisateurs.
    3. Sélectionnez Créer un groupe d'utilisateurs.
    4. Indiquez un nom pour votre groupe d'utilisateurs, par exemple WildRydes, puis choisissez Consulter les valeurs par défaut.
    5. Sur la page de vérification, cliquez sur Créer un groupe.
    6. Notez l'ID du groupe qui s'affiche sur la page Détails du groupe pour le groupe d'utilisateurs que vous venez de créer.

  • Étape 2. Ajouter une application à votre groupe d'utilisateurs

    Ajouter une application à votre groupe d'utilisateurs

    À partir de la console Amazon Cognito, sélectionnez votre groupe d'utilisateurs, puis sélectionnez la section Clients d'application. Ajoutez un nouveau client d'application en vous assurant que l'option Générer la clé secrète du client n'est pas sélectionnée. Les clés secrètes de clients ne sont pas prises en charge actuellement par le kit SDK JavaScript. Si vous créez une application avec une clé secrète générée, supprimez-la et créez-en une autre avec la bonne configuration.

    1. À partir de la page de détails de votre groupe d'utilisateurs, sélectionnez Clients d'application dans la section Paramètres généraux sur la gauche de la barre de navigation.
    2. Choisissez Ajouter un client d'application.
    3. Donnez un nom à l'application client, par exemple WildRydesWebApp.
    4. Désactivez l'option Générer la clé secrète du client. Les clés secrètes de clients ne sont pas prises en charge actuellement pour les applications basées sur le navigateur.
    5. Choisissez Créer un client d'application.
    6. Notez l'ID de client d'application de l'application que vous venez de créer.

  • Étape 3. Mettre à jour le fichier de configuration du site web

    Mettre à jour le fichier de configuration du site web

    Le fichier /js/config.js contient les paramètres de l'ID du groupe d'utilisateurs, de l'ID du client d'application et de la région. Chargez ce fichier avec les paramètres du groupe d'utilisateurs et de l'application créés lors des étapes précédentes, puis retéléchargez le fichier dans votre compartiment.

    a. Depuis votre machine locale, ouvrez le fichier `wild-ryde-site/js/config.js` dans l'éditeur de texte que vous préférez.

    b. Mettez à jour la section cognito avec les valeurs correctes pour le groupe d'utilisateurs et l'application que vous venez de créer.

    Vous trouverez la valeur pour userPoolId sur la page de détails du groupe de la console Amazon Cognito après avoir sélectionné le groupe d'utilisateurs que vous avez créé.
    Vous trouverez la valeur pour userPoolClientId en sélectionnant Clients d'application dans la barre de navigation de gauche. Utilisez la valeur du champ ID du client d'application de l'application que vous avez créée à la section précédente.

    La valeur pour la région doit correspondre au code de la région AWS où vous avez créé votre groupe d'utilisateurs. Par exemple us-east-1 pour la région Virginie du Nord ou us-west-2 pour la région Oregon. Si vous n'êtes pas sûr du code à utiliser, vous pouvez afficher la valeur ARN du groupe sur la page de détails du groupe. Le code de région est la partie de l'ARN immédiatement située après arn:aws:cognito-idp:.

    Le fichier config.js mis à jour doit ressembler à ceci. Notez que les valeurs réelles seront différentes pour votre fichier :

    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. Enregistrez le fichier modifié et envoyez-le vers votre référentiel Git afin de le déployer automatiquement sur Amplify Console.

    $ git push

  • Étape 4. Tester votre implémentation

    Validation de votre implémentation

    1. Consultez la page /register.html sous le domaine de votre site Web, ou sélectionnez le bouton Giddy Up! de la page d'accueil de votre site.
    2. Complétez le formulaire d'inscription et sélectionnez Let's Ryde. Vous pouvez indiquer votre propre adresse e-mail ou utiliser une fausse adresse. Assurez-vous de choisir un mot de passe contenant au moins une lettre majuscule, un chiffre et un caractère spécial. N'oubliez pas ce mot de passe : vous en aurez besoin ultérieurement. Vous devez voir une alerte qui confirme que votre utilisateur a été créé.
    3. Confirmez votre nouvel utilisateur en utilisant l'une des deux méthodes suivantes.
    4. Si vous avez utilisé une adresse e-mail que vous contrôlez, vous pouvez terminer le processus de vérification du compte en consultant la page /verify.html sous le domaine de votre site web et en saisissant le code de vérification qui vous a été envoyé par e-mail. Sachez que l'e-mail de vérification peut se retrouver dans le dossier des courriers indésirables. Pour un déploiement réel, nous vous conseillons de configurer votre groupe d'utilisateurs pour utiliser Amazon Simple Email Service afin d'envoyer des e-mails depuis un domaine qui vous appartient.
    5. Si vous avez utilisé une adresse e-mail fictive, vous devez confirmer l'utilisateur manuellement dans la console Cognito.
    6. Dans la console AWS, cliquez sur Services, puis sélectionnez Cognito sous Sécurité, identité et conformité.
    7. Sélectionnez Gérer vos groupes d'utilisateurs.
    8. Sélectionnez le groupe d'utilisateurs WildRydes et cliquez sur Utilisateurs et groupes dans la barre de navigation de gauche.
    9. Vous devriez voir un utilisateur correspondant à l'adresse e-mail que vous avez soumise via la page d'inscription. Choisissez ce nom d'utilisateur pour afficher la page des informations utilisateur.
    10. Sélectionnez Confirmer l'utilisateur pour finaliser le processus de création de compte.
    11. Après avoir confirmé le nouvel utilisateur grâce à la page /verify.html ou la console Cognito, consultez la page /signing.html et connectez-vous en utilisant l'adresse e-mail et le mot de passe saisis lors de l'enregistrement.
    12. Si tout se passe bien, vous devez être redirigé vers /ride.html. Une notification doit vous indiquer que l'API n'est pas configurée.
    successful-login
Suivant : Conception d'un backend sans serveur