Dans ce module, vous créerez un groupe d’utilisateurs Amazon Cognito pour gérer les comptes de vos utilisateurs. Vous déploierez des pages qui permettent aux clients de s’inscrire en tant que nouvel utilisateur, de vérifier leur adresse e-mail et de se connecter au site.

Serverless_Web_App_LP_assets-03

Lorsque les utilisateurs accèdent à votre site Web, ils devront d’abord créer un nouveau compte utilisateur. Dans le cadre de cet atelier, nous leur demanderons uniquement de fournir une adresse e-mail et un mot de passe pour s’inscrire. Toutefois, vous pouvez configurer Amazon Cognito pour demander des attributs supplémentaires sur vos propres applications.

Une fois que les utilisateurs ont soumis leur inscription, Amazon Cognito envoie un e-mail de confirmation avec un code de vérification à l’adresse fournie. Pour confirmer leur compte, les utilisateurs devront revenir sur votre site et saisir leur adresse e-mail et le code de vérification qu’ils auront reçu. Vous pouvez également confirmer les comptes utilisateur à l’aide de la console Amazon Cognito si vous souhaitez utiliser de fausses adresses e-mail dans le cadre d’un test.

Une fois que les utilisateurs ont confirmé leur compte (que ce soit par le processus de vérification d’e-mail ou de confirmation manuelle via la console), ils seront en mesure de se connecter. Pour se connecter, les utilisateurs doivent saisir leur nom d’utilisateur (ou e-mail) et leur mot de passe. Une fonction JavaScript communique alors avec Amazon Cognito, procède à l’authentification à l’aide du protocole Secure Remote Password (SRP) et reçoit un ensemble de jetons Web JSON (JWT). Ces JWT contiennent des informations sur l’identité de l’utilisateur et seront utilisés dans le prochain module pour procéder à l’authentification auprès de l’API RESTful que vous aurez créée avec Amazon API Gateway.

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

Service utilisé : Amazon Cognito

Modèle CloudFormation : si vous souhaitez passer directement au prochain module, vous pouvez lancer l’un de ces modèles AWS CloudFormation dans la même région que celle 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 pour le lancement de CloudFormation

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

  2. Cliquez sur Suivant sur la page Sélectionner un modèle.

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

    Remarque : vous devez spécifier le même nom de compartiment que celui que vous avez utilisé dans le module précédent. Si vous fournissez un nom de compartiment qui n’existe pas ou sur lequel vous ne disposez pas d’un accès en écriture, le processus de création de la pile CloudFormation échouera.

  4. Sur la page Options, conservez les paramètres par défaut et cliquez sur Suivant.

  5. Sur la page Vérification, cochez la case pour confirmer que CloudFormation créera des ressources IAM et choisissez Créer.

    Ce modèle utilise des ressources personnalisées pour créer un groupe d’utilisateurs et un client Amazon Cognito, mais aussi pour générer un fichier de configuration indiquant les informations nécessaires pour se connecter à ce groupe d’utilisateurs et le télécharger sur votre compartiment de site Web. Le modèle créera un rôle donnant accès à la création de ces ressources et au chargement du fichier de configuration sur votre compartiment.

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

  7. Suivez la procédure décrite à l’étape 4. Validation de votre implémentation pour confirmer que vous êtes prêt à passer au module suivant.


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éation d’un groupe d’utilisateurs Amazon Cognito

    Amazon Cognito propose deux mécanismes pour authentifier les utilisateurs. Vous pouvez utiliser les groupes d’utilisateurs Cognito pour ajouter des fonctionnalités d’inscription et de connexion à votre application ou utiliser des groupes d’identités Cognito pour authentifier les utilisateurs par le biais des fournisseurs d’identités sociaux tels que Facebook, Twitter ou Amazon, avec des solutions d’identité SAML ou en utilisant votre propre système d’identité. Dans le cadre de ce module, vous utiliserez un groupe d’utilisateurs en tant que backend pour les pages d’inscription et de connexion fournies.


    1. Dans la console AWS, cliquez sur Services et 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. Donnez un nom à votre groupe d’utilisateurs, par exemple WildRydes, puis sélectionnez Vérifier les paramètres par défaut
    5. Sur la page de vérification, cliquez sur Créer un groupe.
    6. Notez le ID du groupe sur la page de détails de votre groupe d’utilisateurs nouvellement créé.
  • Étape 2. Ajout d’une application à votre groupe d’utilisateurs

    Depuis la console Amazon Cognito, sélectionnez votre groupe d’utilisateurs, puis sélectionnez la section des applications clients. Ajoutez une nouvelle application client et assurez-vous que l’option Générer la clé secrète du client n’est pas sélectionnée. Les clés secrètes de client 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 configuration appropriée.


    1. À partir de la page de détails de votre groupe d'utilisateurs, sélectionnez App clients (Applications clients) dans la section General Settings (Paramètres généraux) sur la gauche de la barre de navigation.
    2. Cliquez sur Add an app client (Ajouter une application client).
    3. Donnez un nom à l'application client, par exemple WildRydesWebApp.
    4. Décochez l’option Générer la clé secrète du client. Les clés secrètes de client ne sont pas prises en charge actuellement pour une utilisation avec des applications basées sur un navigateur.
    5. Cliquez sur Create app client (Créer une application client).
    6. Notez l’ID de l’application client pour l’application que vous venez de créer.
  • Étape 3. Mise à jour du fichier config.js dans le compartiment de votre site Web

    Le fichier /js/config.js contient des paramètres pour l’ID du groupe d’utilisateurs, l’ID de l’application client et la région. Mettez à jour ce fichier en utilisant les paramètres du groupe d’utilisateurs et de l’application que vous avez créés dans la procédure précédente et chargez le fichier dans votre compartiment.


    1. Téléchargez sur votre ordinateur local le fichier config.js à partir du répertoire du site Web du premier module de ce référentiel. Pour le trouver, retournez dans le compartiment S3 que vous avez créé et accédez au dossier nommé « js ».
    2. Ouvrez le fichier téléchargé à l’aide de l’éditeur de texte de votre choix.
    3. Mettez à jour la section Cognito avec les valeurs correctes pour le groupe d’utilisateurs et l’application que vous venez de créer.
    4. 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 App clients (Clients d'application) dans la barre de navigation de gauche. Utilisez la valeur du champ App client ID (ID de l'application client) 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 de la Virginie du Nord ou us-west-2 pour la région de l'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 ressemble à l’exemple ci-dessous. Notez que les valeurs réelles seront différentes dans 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', } };

    1. Sauvegardez le fichier modifié en vérifiant que son nom est toujours config.js.
    2. Ouvrez la console Amazon S3 en visitant la page https://console.aws.amazon.com/s3/.
    3. Sélectionnez le compartiment de site Web Wild Rydes que vous avez créé dans le module précédent.
    4. Naviguez vers le préfixe js.
    5. Choisissez Charger, puis Ajouter des fichiers.
    6. Accédez au répertoire dans lequel vous avez enregistré votre version modifiée localement du fichier config.js, sélectionnez-le et cliquez sur Ouvrir.
    7. Choisissez Charger sur le côté gauche de la boîte de dialogue.

    Remarque : au lieu de vous demander d’écrire le code du côté navigateur pour la gestion des flux d’inscription, de vérification et de connexion, nous fournissons une implémentation fonctionnelle dans les ressources que vous avez déployées dans le cadre du premier module. Le fichier cognito-auth.js contient le code qui gère les événements de l’interface utilisateur et invoque les méthodes appropriées du SDK Amazon Cognito Identity. Pour en savoir plus sur le SDK, consultez la page de projet sur GitHub.

  • Étape 4. Validation de votre implémentation


    1. Consultez la page /register.html sous le domaine de votre site web ou choisissez le bouton Giddy Up ! sur la page d’accueil de votre site.
    2. Complétez le formulaire d’inscription et choisissez Let’s Ryde. Vous pouvez utiliser votre propre e-mail ou saisir un e-mail fictif. Assurez-vous de choisir un mot de passe contenant au moins une majuscule, un chiffre et un caractère spécial. N’oubliez pas le mot de passe que vous saisissez, vous en aurez besoin plus tard. Vous devriez voir apparaître une alerte confirmant la création de l’utilisateur.
    3. Confirmez votre nouvel utilisateur à l’aide de 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. Veuillez noter que l’e-mail de vérification peut arriver dans votre courrier indésirable. Pour les déploiements réels, nous vous recommandons de configurer votre groupe d’utilisateurs de manière à ce qu’il utilise Amazon Simple Email Service pour envoyer des e-mails à partir d’un domaine que vous possédez.
    5. Si vous avez utilisé une adresse e-mail fictive, vous devez confirmer l’utilisateur manuellement à l’aide de la console Cognito.
    6. À partir de 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 Users and groups (Utilisateurs et groupes) dans la barre de navigation de gauche.
    9. Vous devriez voir un utilisateur correspondant à l’adresse électronique que vous avez soumise sur la page d’inscription. Choisissez ce nom d’utilisateur pour afficher la page de détails de l’utilisateur.
    10. Choisissez 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. Vous devriez voir une notification indiquant que l’API n’est pas configurée.
    successful-login