Implémentation

• Création d'une nouvelle API REST

  a. Dans la Console de gestion AWS, cliquez sur Services et sélectionnez API Gateway sous Services applicatifs.
  b. Sélectionnez Créer une API.
  c. Sélectionnez Nouvelle API et saisissez WildRydes en tant que Nom de l'API.
  d. La fonction Optimisé pour les périphériques doit rester sélectionnée dans le menu déroulant Type de point de terminaison. Remarque : l'option Optimisé pour les périphériques est la plus adaptée aux services publics auxquels on accède depuis Internet. Les points de terminaison régionaux sont généralement utilisés pour les API auxquels on accède principalement depuis la même région AWS.
  e. Sélectionnez Créer une API.

• Création d'un autorisateur de groupes d'utilisateurs Cognito

  Amazon API Gateway peut utiliser les jetons JWT renvoyés par les groupes d'utilisateurs Cognito pour authentifier les appels d'API. Au cours de cette étape, vous configurerez un autorisateur permettant à votre API d'utiliser le groupe d'utilisateurs que vous avez créé dans le Module 2.

  Dans la console Amazon API Gateway, créez un nouvel autorisateur de groupe d'utilisateurs Cognito pour votre API. Configurez-le en utilisant les détails du groupe d’utilisateurs que vous avez créé dans le module précédent. Vous pouvez tester cette configuration dans la console en copiant et collant le jeton d'autorisation qui est apparu après votre connexion sur la page /signin.html de votre site web actuel.
  

  a. Sous l'API que vous venez de créer, sélectionnez Autorisateurs.

  b. Sélectionnez Créer une personne autorisée.

  c. Saisissez WildRydes comme nom d'autorisateur.

  d. Sélectionnez le type Cognito.

  e. Dans le menu déroulant Region, sous Groupe d'utilisateurs Cognito, sélectionnez la région dans laquelle votre groupe d'utilisateurs Cognito a été créé dans le module 2 (la région actuelle devrait être sélectionnée par défaut).

  f. Saisissez WildRydes (ou le nom que vous avez donné à votre groupe d'utilisateurs) dans l'entrée Groupe d'utilisateurs Cognito.

  g. Saisissez Authorization pour Source du jeton.

  h. Sélectionnez Créer.

  
  Vérifiez la configuration de votre autorisateur

  j. Ouvrez un nouvel onglet de navigateur et consultez la page /ride.html sous le domaine de votre site web.

  k. Si vous êtes redirigé vers la page de connexion, connectez-vous avec l'utilisateur que vous avez créé dans le dernier module. Vous serez redirigé vers la page /ride.html.

  l. Copiez le jeton d'authentification indiqué dans la notification sur la page /ride.html.

  m. Revenez à l'onglet précédent où vous venez de créer la personne autorisée

  n. Cliquez sur Test au bas de la carte de la personne autorisée.

  o. Collez le jeton d'autorisation dans le champ Jeton d'autorisation de la boîte de dialogue contextuelle.

  Cliquez sur le bouton Test et vérifiez que le code de réponse est 200 et que les réclamations pour votre utilisateur sont affichées.

• Création d'une nouvelle ressource et méthode

  Créez une nouvelle ressource appelée /ride dans votre API. Ensuite, créez une méthode POST pour cette ressource et configurez-la pour utiliser une intégration proxy Lambda sauvegardée par la fonction RequestUnicorn que vous avez créée dans la première étape de ce module.

  a. Dans le volet de gauche, cliquez sur Ressources sous votre API WildRydes.

  b. Dans le menu déroulant Actions, sélectionnez Créer une ressource.

  c. Saisissez ride en tant que Nom de la ressource.

  d. Assurez-vous que le Chemin de ressource est défini sur ride.

  e. Sélectionnez Activer la spécification CORS pour API Gateway pour la ressource.

  f. Cliquez sur Créer une ressource.

  g. En sélectionnant la ressource /ride qui vient d'être créée, dans le menu déroulant Action, sélectionnez Créer une méthode.

  h. Sélectionnez POST dans le nouveau menu déroulant qui s'affiche, puis cochez la case.

  i. Sélectionnez Fonction Lambda en tant que type d'intégration.

  j. Cochez la case Utiliser l'intégration proxy Lambda.

  k. Sélectionnez la région que vous utilisez comme Région Lambda.

  l. Pour Fonction Lambda, saisissez le nom de la fonction que vous avez créée dans le module précédent, RequestUnicorn.

  m. Sélectionnez Enregistrer. Remarque : si vous obtenez une erreur indiquant que votre fonction n'existe pas, vérifiez que la région que vous avez sélectionnée correspond à celle que vous avez utilisée dans le module précédent.

  n. Lorsque vous êtes invité à donner à Amazon API Gateway la permission d'appeler votre fonction, sélectionnez OK.

  o. Sélectionnez la carte Demande de méthode.

  Sélectionnez l'icône représentant un crayon en regard d'Autorisation.

  q. Sélectionnez l'autorisateur du groupe d'utilisateurs Cognito WildRydes dans la liste déroulante, puis cliquez sur l'icône représentant une coche.

• Déploiement de votre API

  À partir de la console Amazon API Gateway, cliquez sur Actions, Deploy API (Déploiement d'API). Vous serez invité à créer une nouvelle étape. Vous pouvez utiliser « prod » comme nom de l'étape.

  a. Dans la liste déroulante Actions, sélectionnez Déploiement d'API.
  b. Sélectionnez [Nouvelle étape] dans la liste déroulante Étape de déploiement.
  c. Saisissez prod en tant que Nom de l'étape.
  d. Sélectionnez Déployer.
  e. Notez l'URL d'appel. Vous devrez l'utiliser dans la section suivante.
  

• Mettre à jour le fichier de configuration du site web

  Mettez à jour le fichier /js/config.js dans le déploiement de votre site Web pour y inclure l'URL d'appel que vous venez de créer à l'étape précédente. Copiez l’URL d’appel directement depuis le haut de la page de l’éditeur d’étape de la console Amazon API Gateway et collez-la dans la clé _config.api.invokeUrl du fichier /js/config.js de votre site. Lorsque vous mettez à jour le fichier de configuration, vérifiez qu'il contient toujours les mises à jour effectuées dans le module précédent pour votre groupe d'utilisateurs Cognito.

  a. Ouvrez le fichier config.js dans un éditeur de texte.
  b. Mettez à jour le paramètre invokeUrl sous la clé api dans le fichier config.js. Comme valeur, utilisez l'URL d'appel pour l'étape de déploiement que vous avez créée à la section précédente.

  Vous trouverez ci-dessous un exemple de fichier config.js complet. 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: 'https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod' // e.g. https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod, 
  
      } 
  
  };

  Code snippet copied

  Copier

  c. Enregistrez le fichier modifié et envoyez-le vers votre référentiel Git afin de le déployer automatiquement sur Amplify Console.
  

  $ git push
  

  Code snippet copied

  Copier
• Validation de votre implémentation

  Remarque : il est possible qu'il y ait un délai entre la mise à jour du fichier config.js dans votre compartiment S3 et le moment où le contenu mis à jour soit visible dans votre navigateur. Vous devez aussi vous assurer de vider le cache avant d'exécuter les étapes suivantes.

  a. Consultez la page /ride.html sous le domaine de votre site web.
  b. Si vous êtes redirigé vers la page de connexion, connectez-vous avec l'utilisateur que vous avez créé dans le module précédent.
  c. Une fois la carte chargée, cliquez n'importe où sur celle-ci pour définir un emplacement de départ.
  d. Sélectionnez Demander licorne. Vous devriez d'abord voir une notification indiquant qu'une licorne est en chemin dans la barre latérale de droite, puis une icône de licorne voler jusqu'à votre emplacement de départ.