Mise en œuvre

• Création d'une nouvelle API REST
  1. Dans la console Amazon API Gateway, sélectionnez les API dans le panneau de navigation de gauche. 
  2. Sous API REST, cliquez sur Créer.
  3. Dans la section Choisir le protocole, cliquez sur REST. 
  4. Dans la section Créer une API, sélectionnez Nouvelle API.
  5. Dans la section Paramètres, saisissez WildRydes pour le Nom de l'API et sélectionnez Optimisé pour les périphériques dans le menu déroulant Type de point de terminaison.
     Remarque : utilisez les types de points de terminaison optimisés pour les périphériques pour les services publics auxquels l'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.
  6. Sélectionnez Créer une API.
• Créer un autorisateur

  Vous devez créer un autorisateur de groupes d'utilisateurs Amazon Cognito. Amazon API Gateway utilise des jetons Web JSON (JWT), qui sont renvoyés par le groupe d'utilisateurs Amazon Cognito (créé dans le module 2) pour authentifier les appels d'API. Dans cette section, vous allez créer un autorisateur pour l'API, afin de pouvoir utiliser le groupe d'utilisateurs.

  Suivez les étapes ci-dessous pour configurer l'autorisateur dans la console Amazon API Gateway :

  1. Dans le panneau de navigation de gauche de l'API WildRydes que vous venez de créer, sélectionnez Autorisateurs.
  2. Cliquez sur Créer un nouvel autorisateur. 
  3. Saisissez WildRydes dans le champ Nom de l'autorisateur.
  4. Sélectionnez Cognito en tant que Type. 
  5. Sous Groupe d'utilisateurs Cognito, dans le menu déroulant Région, sélectionnez la même Région que celle que vous avez utilisée pour le reste du didacticiel. Saisissez WildRydes dans le champ du nom du Groupe d'utilisateurs Cognito.
  6. Saisissez Autorisation pour la Source du jeton. 
  7. Cliquez sur Créer.
  8. Cliquez sur Test pour vérifier la configuration de l'autorisateur. 
  9. Collez le Jeton d'autorisation copié depuis la page Web ride.html dans la section Validation de votre mise en œuvre du module 2 dans le champ Autorisation (en-tête), et vérifiez que le Code de réponse de l'état HTTP est défini sur 200. 

   

   

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

  Dans cette section, vous allez créer une nouvelle ressource 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.

  1. Dans le panneau de navigation de gauche de votre API WildRydes, cliquez sur Ressources.
  2. Dans le menu déroulant Actions, sélectionnez Créer une ressource.
  3. Saisissez ride en tant que Nom de ressource. Cela créera automatiquement le Chemin de ressource /ride.
  4. Cochez la case Activer API Gateway CORS.
  5. Cliquez sur Créer une ressource.
  6. En sélectionnant la ressource /ride qui vient d'être créée, dans le menu déroulant Actions, cliquez sur Créer une méthode.
  7. Sélectionnez POST dans le nouveau menu déroulant qui apparaît sous OPTIONS, puis cochez la case.
  8. Sélectionnez Fonction Lambda en tant que Type d'intégration.
  9. Cochez la case Utiliser l'intégration proxy Lambda.
  10. Sélectionnez la même Région que celle que vous avez utilisée tout au long du didacticiel pour la Région Lambda.
  11. Saisissez RequestUnicorn pour la Fonction Lambda.
  12. Cliquez sur 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.
  13. Lorsque vous êtes invité à autoriser Amazon API Gateway à invoquer votre fonction, cliquez sur OK.
  14. Sélectionnez la carte Demande de méthode.
  15. Cliquez sur l'icône en forme de crayon en regard d'Autorisation.
  16. 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éployer votre API

  Dans cette section, vous allez déployer votre API depuis la console Amazon API Gateway. 

  1. Dans le menu déroulant Actions, sélectionnez Déploiement d'API.
  2. Sélectionnez [Nouvelle étape] dans le menu déroulant Étape de déploiement.
  3. Saisissez prod en tant que Nom de l'étape.
  4. Cliquez sur Déployer.
  5. Copiez l'URL d'invocation. Vous devrez l'utiliser dans la section suivante.
     
• Mettre à jour la configuration du site Web

  Au cours de cette étape, vous allez mettre à jour le fichier /js/config.js dans le déploiement de votre site Web de manière à y inclure l'URL d'invocation que vous venez de créer à l'étape précédente. Vous allez copier l'URL d'appel directement depuis la partie supérieure de la page de l'éditeur d'étape de la console Amazon API Gateway et la coller dans la clé invokeUrl du fichier config.js de votre site. Votre fichier de configuration contiendra toutes les modifications que vous avez effectuées dans le module précédent sur votre UserPoolID, votre UserPoolClientID et votre région Amazon Cognito.

  1. Sur votre machine locale, accédez au dossier js et ouvrez le fichier config.js dans l'éditeur de texte de votre choix.
  2. Collez l'URL d'invocation que vous avez copiée depuis la console Amazon API Gateway dans la section précédente dans la valeur invokeURL du fichier config.js. 
  3. Enregistrez le fichier.

  Voici un exemple d'un fichier config.js complet. 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

      3. Ajoutez, validez et envoyez le fichier config.js modifié vers votre référentiel Git afin de le déployer automatiquement sur la console Amplify.

  $ git add .
  $ git commit -m "new_configuration"
  $ git push
  

  Code snippet copied

  Copier
• Validation de votre mise en œuvre

  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.

  1. Passez votre version d'ArcGIS JS de 4.3 à 4.6 (les versions plus récentes ne fonctionneront pas dans ce didacticiel) dans le fichier ride.html en procédant comme suit :
     

  <script src="https://js.arcgis.com/4.6/"></script>
   <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

  Code snippet copied

  Copier

  Vous trouverez ci-dessous un exemple de fichier ride.html complet. Certaines valeurs de votre fichier peuvent être différentes.

  <div id="noApiMessage" class="configMessage" style="display: none;">
          <div class="backdrop"></div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">Successfully Authenticated!</h3>
              </div>
              <div class="panel-body">
                  <p>This page is not functional yet because there is no API invoke URL configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 3.</p>
                  <p>In the meantime, if you'd like to test the Amazon Cognito user pool authorizer for your API, use the auth token below:</p>
                  <textarea class="authToken"></textarea>
              </div>
          </div>
      </div>
  
      <div id="noCognitoMessage" class="configMessage" style="display: none;">
          <div class="backdrop"></div>
          <div class="panel panel-default">
              <div class="panel-heading">
                  <h3 class="panel-title">No Cognito User Pool Configured</h3>
              </div>
              <div class="panel-body">
                  <p>There is no user pool configured in <a href="/js/config.js">/js/config.js</a>. You'll configure this in Module 2 of the workshop.</p>
              </div>
          </div>
      </div>
  
      <div id="main">
          <div id="map">
          </div>
      </div>
  
      <div id="authTokenModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="authToken">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">Your Auth Token</h4>
                  </div>
                  <div class="modal-body">
                      <textarea class="authToken"></textarea>
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
              </div>
          </div>
      </div>
  
  
      <script src="js/vendor/jquery-3.1.0.js"></script>
      <script src="js/vendor/bootstrap.min.js"></script>
      <script src="js/vendor/aws-cognito-sdk.min.js"></script>
      <script src="js/vendor/amazon-cognito-identity.min.js"></script>
      <script src="https://js.arcgis.com/4.6/"></script>
      <script src="js/config.js"></script>
      <script src="js/cognito-auth.js"></script>
      <script src="js/esri-map.js"></script>
      <script src="js/ride.js"></script>
  </body>
  
  </html>

  Code snippet copied

  Copier

      2. Enregistrez le fichier modifié. Ajoutez, validez et envoyez-le vers votre référentiel Git afin de le déployer automatiquement sur la console AWS Amplify.

      3. Ouvrez la page /ride.html sous le domaine de votre site Web.

      4. Si vous êtes redirigé vers la page de connexion d'ArcGIS, connectez-vous à l'aide des informations d'identification de l'utilisateur que vous avez créées dans la section Introduction comme condition préalable à ce didacticiel.

      5. Une fois la carte chargée, cliquez n'importe où sur celle-ci pour définir un emplacement de départ.

      6. Sélectionnez Demander licorne. Vous devez 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.