Démarrer avec AWS

Créer une application web sans serveur

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

Module 2 : Gestion des utilisateurs

Vous allez créer un groupe d'utilisateurs Amazon Cognito afin de gérer les comptes de vos utilisateurs.

Présentation

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

Présentation de l'architecture

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 depuis la console Amazon Cognito avec de fausses adresses e-mail à des fins de test.

Une fois que les utilisateurs disposent d'un compte confirmé (soit par le processus de vérification par e-mail, soit par la confirmation manuelle dans la console), ils peuvent 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.

 Temps nécessaire

30 minutes

 Services utilisés

 Modèle CloudFormation

Si vous souhaitez passer directement au module suivant, vous pouvez lancer un de ces modèles 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 >

Mise en œuvre

  • 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. Dans la console Amazon Cognito, sélectionnez Créer un groupe d'utilisateurs.
    2. Sur la page Configurer l'expérience de connexion, dans la section Options de connexion du groupe d'utilisateurs Cognito, cliquez sur Nom d'utilisateur. Ne modifiez pas les autres paramètres par défaut, tels que les Types de fournisseurs, et ne définissez aucune Exigence en matière de nom d'utilisateur. Cliquez sur Suivant.
    3. Sur la page Configurer les exigences de sécurité, conservez le Mode de stratégie de mot de passe comme mode par défaut de Cognito. Vous pouvez choisir de configurer l'authentification multifactorielle (MFA) ou opter pour Sans MFA et conserver les autres configurations par défaut. Cliquez sur Suivant.
    4. Sur la page Configurer l'expérience d'inscription, conservez tous les paramètres par défaut. Cliquez sur Suivant.
    5. Sur la page Configurer la transmission des messages, pour Fournisseur de messagerie, vérifiez que l'option Envoyer un e-mail avec Amazon SES - Recommandé est sélectionnée. Dans le champ Adresse e-mail de l'EXPÉDITEUR, sélectionnez une adresse e-mail que vous avez vérifiée auprès d'Amazon SES en suivant les instructions de la section Vérification de l'identité d'une adresse e-mail du Manuel du développeur Amazon Simple Email Service.
      Remarque : si l'adresse e-mail vérifiée n'apparaît pas dans le menu déroulant, assurez-vous d'avoir créé une adresse e-mail vérifiée dans la même Région que celle que vous avez sélectionnée au début du didacticiel.
    6. Sur la page Intégrer votre application, nommez votre groupe d'utilisateurs WildRydes. Sous Client d'application initial, nommez le client d'application WildRydesWebApp et conservez les autres paramètres par défaut.
    7. Sur la page Vérifier et créer, sélectionnez Créer un groupe d'utilisateurs.
    8. Sur la page Groupes d'utilisateurs, sélectionnez le Nom du groupe d'utilisateurs pour afficher des informations détaillées sur le groupe d'utilisateurs que vous avez créé. Copiez l'ID du groupe d'utilisateurs dans la section Vue d'ensemble du groupe d'utilisateurs et enregistrez-le dans un emplacement sécurisé sur votre machine locale. 
    9. Cliquez sur l'onglet Intégration des applications, puis copiez et enregistrez l'ID client dans la section Clients d'applications et analyses de votre nouveau groupe d'utilisateurs.
  • Le fichier /js/config.js contient les paramètres de l'ID du groupe d'utilisateurs, de l'ID de 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 réintégrez le fichier dans votre compartiment.

    1. Depuis votre machine locale, ouvrez le fichier wildryde-site/js/config.js dans l'éditeur de texte de votre choix.
    2. Mettez à jour la section cognito du fichier en saisissant les valeurs correctes de l'ID du groupe d'utilisateurs et de l'ID du client d'application que vous avez enregistrés aux étapes 8 et 9 de la section précédente. L'userPoolID est l'ID du groupe d'utilisateurs indiqué dans la section Vue d'ensemble du groupe d'utilisateurs, et l'userPoolClientID est l'ID du Client d'application figurant dans la section Intégration de l'application > Clients d'applications et analyses d'Amazon Cognito. 
    3. 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 ne savez pas quel code utiliser, vous pouvez afficher la valeur ARN du groupe sur la page des détails du groupe d'utilisateurs. Le code de Région est la partie de l'ARN située juste après arn:aws:cognito-idp:.

    Le fichier config.js mis à jour doit ressembler au code suivant. Les valeurs réelles de votre fichier seront différentes :

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

        4. Enregistrez le fichier modifié.

        5. Dans la fenêtre de votre terminal, ajoutez, validez et envoyez le fichier vers votre référentiel Git afin de le déployer automatiquement sur la console Amplify.

    Le bloc de code suivant est un exemple de ce qui s'affichera dans la fenêtre de votre terminal :

    $ git add .
    $ git commit -m "new_config"
    $ git push
    
    1. Dans une fenêtre de l'outil de recherche ou dans l'explorateur de fichiers Windows, accédez au dossier wildrydes-site que vous avez copié sur votre ordinateur local dans le module 1. 
    2. Ouvrez la page /register.html ou cliquez sur le bouton Giddy Up! de la page d'accueil (index.html) de votre site.
    3. Remplissez le formulaire d'inscription et cliquez sur 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 confirmant la création de votre utilisateur.
    4. Confirmez votre nouvel utilisateur en utilisant l'une des deux méthodes suivantes :
      1. 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 de manière à utiliser Amazon Simple Email Service afin d'envoyer des e-mails depuis un domaine qui vous appartient.
      2. Si vous avez utilisé une adresse e-mail fictive, vous devez confirmer l'utilisateur manuellement dans la console Cognito.
        1. Dans la console Amazon Cognito, sélectionnez le groupe d'utilisateurs WildRydes.
        2. Dans l'onglet Utilisateurs, vous devriez voir un utilisateur correspondant à l'adresse e-mail que vous avez indiquée sur la page d'inscription. Sélectionnez ce nom d'utilisateur pour afficher la page des informations utilisateur.
        3. Dans le menu déroulant Actions, cliquez sur Confirmer le compte pour finaliser le processus de création du compte.
        4. Dans la fenêtre contextuelle Confirmer le compte pour l'utilisateur, cliquez sur Confirmer.
    5. Après avoir confirmé le nouvel utilisateur sur la page /verify.html ou depuis 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.
    6. 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.
      Important : copiez et enregistrez le jeton d'authentification en vue de créer l'autorisateur du groupe d'utilisateurs Amazon Cognito dans le module suivant.
    Authentification réussie

Cette page vous a-t-elle été utile ?

Créer un backend sans serveur