Mise en œuvre

• Créez un groupe d'utilisateurs Amazon Cognito et intégrez une application à votre groupe d'utilisateurs.

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

  Code snippet copied

  Copier

      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
  

  Code snippet copied

  Copier
• Validation de votre mise en œuvre
  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.